动态数据 + 时间坐标轴echarts 折线配置项内容和展示

绘制动态趋势图的时候,浏览器CPU占用过高。现实环境中,使用vue+echarts+webscoket,,同样的配置。浏览器会卡死。

配置项如下
      var data =[];
var now = new Date((new Date()).getTime()-10*60*1000);
var oneDay =  1 * 1 * 200;
var value = Math.random() * 50+900;
var series=[];
var strTagName = ["点1","点2"];
for(var j=0;j<2;j++){
    data = [];
    now = new Date((new Date()).getTime()-10*60*1000);
    for (var i = 0; i < 3000; i++) {
        data.push(randomData(j));
    }
    series[j]={
        name: strTagName[j],
        type: 'line',
        showSymbol: false,
        hoverAnimation: false,
        data: data
    };
}
initPoint();
function randomData(num) {
    now = new Date(now.getTime()+oneDay);
    value = Math.random() * 50 + num*100+10;
    return {
        name: now.toString(),
        value: [
            now,
            Math.round(value)
        ]
    }
}
function webscoket(){
    var strTagName = ["点1","点2"];
    for(var i=0;i<series.length;i++){
            series[i].data.shift();
            series[i].data.push(randomData(i))
    }
    initPoint();
}
function initPoint(){
    console.log(series)
    myChart.setOption({
        title: {
            text: '动态数据 + 时间坐标轴'
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'time',
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            splitLine: {
                show: false
            }
        },
        series: series
    });
}
window.setInterval(function(){
    webscoket();
},500)
    
截图如下