vue+echarts定時重新繪制以達到刷新的動效問題
更新時間：2024年06月12日 15:20:28 作者：不想996了的小姑娘
這篇文章主要介紹了vue+echarts定時重新繪制以達到刷新的動效問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue echarts定時重新繪制達到刷新的動效
主要注意在setOption() 之前要調(diào)用clear() 方法
以下為代碼：
// 重繪餅圖
resetPieChartData() {
clearInterval(this.timeRePie);
this.timeRePie = setInterval(() => {
// debugger;
if (!this.pieChart) {
return;
}
// 不先清空chart沒法重繪
this.pieChart.clear();
this.pieChart.setOption(this.pieOption); //獲取echarts數(shù)據(jù)的方法
}, 4000);
},
```
vue項目局部定時刷新多個echart圖表
js2種常用定時器
//會間隔3s不停的調(diào)用函數(shù)
setInterval(function(){}, 3000)
//延遲3s執(zhí)行 只執(zhí)行一次
setTimeout(function(){}, 3000)使用多個setInterval會導(dǎo)致瀏覽器崩潰！
原因是setInterval不會清除定時器隊列，每重復(fù)執(zhí)行1次都會導(dǎo)致定時器疊加，最終導(dǎo)致瀏覽器崩潰。
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
}總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue.js實現(xiàn)輸入框綁定的實例代碼,需要的朋友可以參考下2017-08-08
這篇文章主要介紹了Monorepo風(fēng)格的組件工程搭建示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
本文介紹了如何在項目中創(chuàng)建和使用自定義插件,以在構(gòu)建過程中檢查版本號,具體步驟包括在項目根目錄下創(chuàng)建buildLifeHook.ts文件,并在public目錄下創(chuàng)建version文件夾,然后在vite.config.ts中引用該插件,并在src/utils目錄下創(chuàng)建XxzUtils.ts文件2024-12-12
我們最開始拿到的element-ui是帶有下拉箭頭的,那么如何去除element-ui下拉框的下拉箭頭的實現(xiàn),本文就詳細的介紹一下,感興趣的可以了解一下2023-08-08
vue結(jié)合el-dialog封裝自己的confirm二次確認彈窗方式
這篇文章主要介紹了vue結(jié)合el-dialog封裝自己的confirm二次確認彈窗方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-08-08
這篇文章主要介紹了從零使用webpack手動搭建vue項目的步驟，本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-03-03
本文主要介紹了Vue3怎么使用element-plus，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要給大家介紹了關(guān)于Vue中xlsx的使用方法指南,有很多辦法都可以實現(xiàn),其中最簡單的還是使用插件xlsx,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2023-07-07
使用vue-element-admin框架調(diào)用后端接口及跨域的問題
這篇文章主要介紹了使用vue-element-admin框架調(diào)用后端接口及跨域的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
動態(tài)組件指的是動態(tài)切換組件的顯示與隱藏,下面這篇文章主要給大家介紹了關(guān)于Vue動態(tài)組件和keep-alive組件的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-05-05