vue+echarts定时重新绘制以达到刷新的动效问题
更新时间：2024年06月12日 15:20:28 作者：不想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
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于Vue中forEach()使用方法的相关资料,forEach和map是数组的两个方法,作用都是遍历数组,在vue项目的处理数据中经常会用到,需要的朋友可以参考下2023-09-09
最近新项目中需要一个弹窗组件,所以我就做了一个,下面这篇文章主要给大家介绍了关于如何利用vue3封装一个符合思维且简单实用的弹出层,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-05-05
这篇文章主要介绍了vue前端如何接收后端传过来的带list集合的数据,前后端交互,文中的示例Json报文,前端采用vue进行接收,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧2024-02-02
Element-UI中关于table表格的那些骚操作(小结)
这篇文章主要介绍了Element-UI中关于table表格的那些骚操作(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要为大家详细介绍了vue.js 2.0实现简单分页效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
这篇文章主要介绍了解读vue页面监听store值改变问题，具有很好的参考价值，希望对大家有所帮助。2022-10-10
vue-resource post数据时碰到Django csrf问题的解决
这篇文章主要介绍了vue-resource post数据时碰到Django csrf问题的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-03-03
vite build vue3项目配置开启sourcemap方式
这篇文章主要介绍了vite build vue3项目配置开启sourcemap方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
本文给大家总结ES6新特性：默认参数、reduce、解构赋值和Set在使用时的一些小技巧。需要的朋友参考下吧2018-04-04
这篇文章主要介绍了mpvue 项目初始化及实现授权登录的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
最新评论