使用echarts绘制图表,一直存在一个问题:数据更新时,会重新绘图,导致图表出现空档或者跳动的感觉比较强
一下是解决方法:
initcCharts()不变
代码如下:这样图表就像心电图一样,解决
randomData(){//data的格式,主要变动的地方
let value = this.getRandomInt(0,100)
let now = new Date()
return {
name:now.toString(),
value:[0,value]
}
},
getData(){
this.data.unshift(this.randomData())
for(let i=0;i<this.data.length;i++){
this.data[i] = {
name:this.data[i].name,
value:[i,this.data[i].value[1]]
}
}
if(this.data.length > 61){
//需要的数据个数自行设置
this.data.pop()
}
//每次加载数据后就更新图表
this.initChart()
},
mounted(){
this.getData()
this.timer=setInterval(()=>{
this.getData()
},5000)
}