vue+echarts定时重新绘制以达到刷新的动效问题
作者：不想996了的小姑娘
这篇文章主要介绍了vue+echarts定时重新绘制以达到刷新的动效问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue echarts定时重新绘制达到刷新的动效
主要注意在setOption() 之前要调用clear() 方法
以下为代码：
// 重绘饼图
resetPieChartData() {
clearInterval(this.timeRePie);
this.timeRePie = setInterval(() => {
// debugger;
if (!this.pieChart) {
return;
}
// 不先清空chart没法重绘
this.pieChart.clear();
this.pieChart.setOption(this.pieOption); //获取echarts数据的方法
}, 4000);
},
```
vue项目局部定时刷新多个echart图表
js2种常用定时器
//会间隔3s不停的调用函数
setInterval(function(){}, 3000)
//延迟3s执行 只执行一次
setTimeout(function(){}, 3000)使用多个setInterval会导致浏览器崩溃！
原因是setInterval不会清除定时器队列，每重复执行1次都会导致定时器叠加，最终导致浏览器崩溃。
setTimeout是自带清除定时器的，
解决方法
如下所示：
window.setInterval(() => {
setTimeout(function(){}, 0)
}, 3000)//页面加载完 再定时刷新
data:{
return {
Timer01:null,
}
},
mounted(){
let that = this;
that.getData();
that.Timer01 = window.setInterval(() => {
setTimeout(()=>{
that.getData();
}, 0)
}, 3000)
},
destory(){
this.Timer01 = null
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。