绘制动态趋势图的时候,浏览器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)