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.js实现输入框绑定的实例代码
这篇文章主要介绍了Vue.js实现输入框绑定的实例代码,需要的朋友可以参考下
2017-08-08
Monorepo风格的组件工程搭建示例详解
这篇文章主要介绍了Monorepo风格的组件工程搭建示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
vue3提示用户版本更新方式
本文介绍了如何在项目中创建和使用自定义插件,以在构建过程中检查版本号,具体步骤包括在项目根目录下创建buildLifeHook.ts文件,并在public目录下创建version文件夹,然后在vite.config.ts中引用该插件,并在src/utils目录下创建XxzUtils.ts文件
2024-12-12
去除element-ui下拉框的下拉箭头的实现
我们最开始拿到的element-ui是带有下拉箭头的,那么如何去除element-ui下拉框的下拉箭头的实现,本文就详细的介绍一下,感兴趣的可以了解一下
2023-08-08
vue结合el-dialog封装自己的confirm二次确认弹窗方式
这篇文章主要介绍了vue结合el-dialog封装自己的confirm二次确认弹窗方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-08-08
使用webpack手动搭建vue项目的步骤
这篇文章主要介绍了从零使用webpack手动搭建vue项目的步骤，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-03-03
详解Vue3怎么使用element-plus
本文主要介绍了Vue3怎么使用element-plus，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-11-11
Vue中xlsx的使用方法指南
这篇文章主要给大家介绍了关于Vue中xlsx的使用方法指南,有很多办法都可以实现,其中最简单的还是使用插件xlsx,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2023-07-07
使用vue-element-admin框架调用后端接口及跨域的问题
这篇文章主要介绍了使用vue-element-admin框架调用后端接口及跨域的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-11-11
Vue动态组件和keep-alive组件实例详解
动态组件指的是动态切换组件的显示与隐藏,下面这篇文章主要给大家介绍了关于Vue动态组件和keep-alive组件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-05-05