使用eCharts实现实时监控，可以动态的增加和删除数据，可以全屏展示。
一、图表的配置，配置方面没什么好说的，参数官方文档中都有解释，时间轴的生成也是参考的官方实例，只是增加了一个刷新频率cycle参数，项目中要求的。
option = {
backgroundColor: '#f0f0f0',
animation: false,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#283b56'
}
}
},
legend: {
data:legendData
},
toolbox: {
show: true,
feature: {
dataView: {readOnly: false},
saveAsImage: {}
}
},
dataZoom: {
show: true,
start: 0,
end: 100
},
xAxis: {
type: 'category',
boundaryGap: false,
data: (function (){
var now = new Date();
var res = [];
var len = 100;
while (len--) {
res.unshift(now.toLocaleTimeString().replace(/^D*/,''));
now = new Date(now - 1000 * cycle);
}
return res;
})()
},
yAxis: [
{
type: 'value',
scale: true,
boundaryGap: [0, '100%'],
name: unit,
splitLine: {
show: true
}
}
],
series: (function(){
var serie = [];
for(i=0; i<testData.length; i++){
var item = {
name: testData[i].name,
type: 'line',
showSymbol: false,
data: testData[i].data
}
serie.push(item);
}
return serie;
})()
};
二、初始化实例
var myChart = echarts.init(document.getElementById('line-main'));
三、setOption
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
四、下面来说动态增加和删除折线，说是删除图表中的元素，其实本质上都是对数据的操作。
eoUnit.id = eoVal; eoUnit.name = eoText; eoUnit.data = eoData; testData.push(eoUnit); legendData.push(eoText);
所谓增加折线，其实就是向数组里添加一条数据。
删除也是，将数组中对应的数据删除掉，但是要多执行一步操作
myChart.setOption(optiondel, true);
如果不执行这个的话，图表上的监控折线虽然停止了运动，但是之前的线会留在图上，所以这步操作是必须的，也是值得注意的一点。
五、开始和停止监控，这块没什么好讲的，就是用到了两个定时器，一个负责记录剩余时长，一个用来执行刷新函数。
//开始 timer1 = setInterval(leftTimeFun,1000);//剩余时长 timer = setInterval(monitorFun,1000 * cycle);//监控频率 //停止 clearInterval(timer); clearInterval(timer1);
六、监控函数，这部分功能应该算是核心功能了（有些变量名改了），其实这个也是对数组的操作，通过定时器定时执行，每次从服务器获取一条最新数据插入到数组，从数组弹出最早的一条数据，形成一个队列式操作，展现在图表上就是实时监控的效果，setOption 中设置的都是有所改变的项，每操作一次，都要 setOption 。
//监测函数
function monitorFun(){
var fdgal = $("#fdgd").val();
$.ajax({
type:"post",
url: "aaaaa.action",
async:false,
timeout:1000,
data:{"aaaaList":aassList,"aaddid":ssssVal},
traditional: true,
dataType: "json",
success: function(data){
var jsonData = eval("("+data+")");
var rightP = $(".datacol p");
for(i=0; i<testData.length; i++){
testData[i].showSymbol = false;
for (var j = 0; j < jsonData.length; j++){
if(jsonData[j].moId == testData[i].id){
testData[i].data.shift();
if(jsonData[j].value==""){
testData[i].data.push(barData[i]);
$(rightP[i]).text(barData[i]);
}else{
testData[i].data.push(jsonData[j].value);
$(rightP[i]).text(jsonData[j].value);
}
}
}
}
}
});
axisData = (new Date()).toLocaleTimeString().replace(/^D*/,'');
myChart.setOption({
legend: {
data:legendData
},
xAxis: {
data: (function (){
var now = new Date();
var res = [];
var len = 100;
while (len--) {
res.unshift(now.toLocaleTimeString().replace(/^D*/,''));
now = new Date(now - 1000 * cycle);
}
return res;
})()
},
series: (function(){
var serie = [];
for(i=0; i<testData.length; i++){
var item = {
name:testData[i].name,
type: 'line',
showSymbol: false,
data:testData[i].data
}
serie.push(item);
}
return serie;
})()
});
option.xAxis.data.shift();
option.xAxis.data.push(axisData);
cycleCount -= cycle;
if(cycleCount < 0){
pause();
}
}
有不明确的地方可以交流一下，随时恭候，不对的地方也请指正，共同进步。