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工程全局设置ajax的等待动效的方法
这篇文章主要介绍了vue工程全局设置ajax的等待动效的方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-02-02
详解如何在Vue2中实现useDraggable
这篇文章主要为大家详细介绍了Vue2中实现useDraggable的相关知识,文中的示例代码简洁易懂,对我们深入了解vue有一定的帮助,需要的小伙伴可以参考下
2023-12-12
Vite热更新失效的问题解决
本文主要介绍了Vite热更新失效的问题解决,原因是文件夹和文件名大小写不一致,下面就来解决一下次问题,感兴趣的可以了解一下
2024-08-08
Vue el-menu 左侧菜单导航功能的实现
这篇文章主要介绍了Vue el-menu 左侧菜单导航功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2022-08-08
Electron store及shareObject进程间数据交互存储功能封装
这篇文章主要为大家介绍了Electron store及shareObject进程间数据交互存储功能封装示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
Vue实现移动端左右滑动效果的方法
最近得到一个新需求，需要在Vue项目的移动端页面上加上左右滑动效果，经过一番折腾，最终决定四月vue-touch。下面小编把实现代码分享给大家，感兴趣的朋友一起看看吧
2018-11-11
如何理解Vue简单状态管理之store模式
状态管理也就是数据状态管理，vue应用程序的各组件之间经常需要进行通信，除了v-on、EventBus等通信方式外，可以采用数据共享的方式进行通信。这种简单的数据共享模式就是store模式。
2021-05-05
vue2.x版本中computed和watch的使用及关联和区别
这篇文章主要介绍了vue2.x版本中computed和watch的使用及关联和区别，文章围绕主题展开详细的内容介绍，需要的小伙伴可以参考一下
2022-07-07
Vue自定义指令实现checkbox全选功能的方法
下面小编就为大家分享一篇Vue自定义指令实现checkbox全选功能的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
element Dropdown组件意想不到的坑
本文主要介绍了element Dropdown组件意想不到的坑，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-01-01