能耗数据一般15分钟更新一次,使用面积曲线展示,下图模拟两条线的能耗数据,更新频率设为15秒(15分钟等待时间太长了)。
最总效果:
Echarts相关代码:
var dataa = []; var datab= []; var curtimestamp = Date.parse(new Date()); var sttimestamp = curtimestamp - 500*1000*15 ; var temptime; var tm = Date.now() // // 生成初始数据500个 for (var i = 0; i < 500; i++) { temptime = new Date(parseInt(sttimestamp+i*1000*15)).toLocaleString(‘chinese‘,{hour12:false}); dataa.push({name:temptime,value:[temptime,Math.random()*50+180]}); datab.push({name:temptime,value:[temptime,Math.random()*60+100]}); } // option = { title: { text: ‘实时能耗‘, left:‘80%‘, top:‘2%‘ }, tooltip: { trigger: ‘axis‘, formatter: function (params) { params = params[0]; var date = new Date(params.name); return params.name + ‘ : ‘ + Math.round(params.value[1]); }, axisPointer: { animation: false } }, xAxis: { type: ‘time‘, splitLine: { show: false }, minInterval: 5, axisLabel:{ formatter:‘{HH}:{mm}:{ss}‘ } }, legend:{ top:‘8%‘ }, yAxis: { axisLine:{ show:true }, type: ‘value‘, name:‘千瓦时‘, max:300, boundaryGap: [0, ‘100%‘], splitLine: { show: false } }, series: [{ name: ‘生产线A‘, type: ‘line‘, smooth: true, symbol: ‘none‘, areaStyle: { color:‘rgba(70, 130, 180, 0.6)‘ }, data: dataa },{ name: ‘生产线B‘, type: ‘line‘, color:‘#00ff00‘, smooth: true, symbol: ‘none‘, areaStyle: { color:‘rgba(72, 209, 204, 0.5)‘ }, data: datab }] }; setInterval(function () { // 每个15秒添加一次数据 curtimestamp = Date.parse(new Date()); temptime = new Date(parseInt(curtimestamp)).toLocaleString(‘chinese‘,{hour12:false}); dataa.shift(); dataa.push({name:temptime,value:[temptime,Math.random()*50+180]}); datab.shift(); datab.push({name:temptime,value:[temptime,Math.random()*60+100]}); // myChart.setOption({ series: [{ data: dataa },{ data: datab } ] }); }, 15000);