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