Vue + Echarts頁面內(nèi)存占用高的問題解決方案
Vue + Echarts頁面內(nèi)存占用高問題解決
1.問題描述
目前使用的是Vue2 + Echarts4.x的組合，頁面如下所示。
就是一個(gè)類似于神策的數(shù)據(jù)看板頁面，左側(cè)是一個(gè)導(dǎo)航欄，右側(cè)看板頁面中包含很多個(gè)報(bào)表圖片，其中報(bào)表頁面中對Echarts圖表進(jìn)行了二次封裝。點(diǎn)擊左側(cè)的菜單可以切換不同的看板，有些看板頁面中的報(bào)表比較多，用戶多次切換后頁面的內(nèi)存占用可以上升為GB級。嚴(yán)重時(shí)導(dǎo)致頁面內(nèi)存溢出，使得頁面崩潰，極大影響了用戶體驗(yàn)。
2.解決方法
參考了多篇文章，發(fā)現(xiàn)有可能是Echarts+Vue2中，組件銷毀時(shí)，不會(huì)自動(dòng)釋放掉組件中持有的Echarts實(shí)例對象。因此只需要在組件銷毀的時(shí)候主動(dòng)銷毀掉其持有的Echarts實(shí)例對象即可。
普通Vue項(xiàng)目可使用如下方式。
data(){
return {
MyEchart: null,
}
}
initEcharts(){
// ....
}
// ....
beforeDestroy(){
if(this.MyEchart){
this.MyEchart.dispose();
this.MyEchart=null;
}
}Vue2 + TyepScript項(xiàng)目使用如下方式。
private MyEchart: any = null;
private initEcharts(): void {
// ...
}
beforeDestroy(): void{
if(this.MyEchart){
this.MyEchart.dispose();
this.MyEchart=null;
}
}參考文章
https://zhuanlan.zhihu.com/p/585392877
https://blog.csdn.net/weixin_47409897/article/details/129174801
到此這篇關(guān)于Vue + Echarts頁面內(nèi)存占用高問題解決的文章就介紹到這了,更多相關(guān)Vue Echarts內(nèi)存占用高內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue中關(guān)于template報(bào)錯(cuò)等問題的解決
這篇文章主要介紹了vue中關(guān)于template報(bào)錯(cuò)等問題的解決，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
layer.js(mobile)是一個(gè)小巧方便的彈出層插件，在之前的apicloud項(xiàng)目中被大量使用，但最近對apicloud的IDE、非常不友好的文檔和極低的開發(fā)效率深感厭煩，決定棄用然后轉(zhuǎn)向Vue開發(fā)。這篇文章主要介紹了vue-cli腳手架引入彈出層layer插件的幾種方法，需要的朋友可以參考下2019-06-06
我們在開發(fā) Vue 項(xiàng)目的時(shí)候會(huì)使用一些前端組件庫,例如 Element、Ant Design 等,這些組件庫雖然方便,但是也有一些缺點(diǎn),比如內(nèi)置的圖標(biāo)太少,例如我們開發(fā)醫(yī)療、財(cái)務(wù)、工程等一些前端項(xiàng)目,內(nèi)置的圖標(biāo)不能滿足我們的需求,所以我們常常在Vue項(xiàng)目中引入SVG圖標(biāo)2024-09-09
vue Nprogress進(jìn)度條功能實(shí)現(xiàn)常見問題
這篇文章主要介紹了vue Nprogress進(jìn)度條功能實(shí)現(xiàn),NProgress是頁面跳轉(zhuǎn)是出現(xiàn)在瀏覽器頂部的進(jìn)度條，本文通過實(shí)例代碼給大家講解，需要的朋友可以參考下2021-07-07
在Vue項(xiàng)目中用fullcalendar制作日程表的示例代碼
這篇文章主要介紹了在Vue項(xiàng)目中用fullcalendar制作日程表，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
Vue.js設(shè)計(jì)與實(shí)現(xiàn)無限遞歸學(xué)習(xí)總結(jié)
這篇文章主要為大家介紹了Vue.js設(shè)計(jì)與實(shí)現(xiàn)無限遞歸學(xué)習(xí)總結(jié)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
vite配置@別名以及讓vscode智能提示路經(jīng)的步驟
這篇文章主要給大家介紹了關(guān)于vite配置@別名以及讓vscode智能提示路經(jīng)的步驟,文中通過代碼示例以及圖文介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-08-08
詳解webpack打包vue項(xiàng)目之后生成的dist文件該怎么啟動(dòng)運(yùn)行
這篇文章主要介紹了詳解webpack打包vue項(xiàng)目之后生成的dist文件該怎么啟動(dòng)運(yùn)行,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要介紹了詳解Vscode中使用Eslint終極配置大全，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
在本文中,我們詳細(xì)講解了Vue路由的使用方法,我們首先安裝了Vue?Router,然后創(chuàng)建了一個(gè)Vue?Router實(shí)例,并配置了路由,感興趣的朋友一起看看吧2023-11-11