1.引入 echarts.js
<script type="text/javascript" src="/static/js/echarts.js"></script>
2.为ECharts准备一个具备大小(宽高)的Dom
<div id="container" style="border-style: solid;border-width: 0px;color:#666666;height: 430px;"></div>
3.初始化echarts实例
var myChart = echarts.init(document.getElementById('container'));
$.get('/admin/devData/sendqueueshow').done(function (data) {
if (data != null) {
var series = [];
for (var i = 0; i < data.channelList.length; i++) {
series.push({
name: data.channelList[i],
type: 'line',
data: data.sendQueueList[i],
// markPoint: {
// data: [
// {type: 'max', name: '最大值'},
// {type: 'min', name: '最小值'}
// ]
// }
});
}
myChart.resize();
myChart.clear(); //清除旧图
myChart.setOption({
tooltip: {
trigger: 'axis'
},
grid: {
x: 5, //左侧与y轴的距离
y: 12, //top部与x轴的距离
x2: 20, //右侧与y轴的距离
y2: -6, //bottom部与x轴的距离},
containLabel: true
},
xAxis: [{
show: false,
type: 'category',
data: data.timeList,
axisLabel: { //字体
show: true,
textStyle: {
// color: '#666666',
color: '#ffffff',
fontSize: '12'
}
// interval:0, //隔几个标签显示一个标签
// rotate:40 //标签倾斜角度
}
}],
yAxis: [{
type: 'value',
axisLabel: { //字体
show: true,
textStyle: {
// color: '#666666',
color: '#ffffff',
fontSize: '12'
}
}
}],
series: series
})
}
});