ECharts模拟实时能耗数据展示

能耗数据一般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);