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)表頁面中對(duì)Echarts圖表進(jìn)行了二次封裝。點(diǎn)擊左側(cè)的菜單可以切換不同的看板，有些看板頁面中的報(bào)表比較多，用戶多次切換后頁面的內(nèi)存占用可以上升為GB級(jí)。嚴(yán)重時(shí)導(dǎo)致頁面內(nèi)存溢出，使得頁面崩潰，極大影響了用戶體驗(yàn)。
2.解決方法
參考了多篇文章，發(fā)現(xiàn)有可能是Echarts+Vue2中，組件銷毀時(shí)，不會(huì)自動(dòng)釋放掉組件中持有的Echarts實(shí)例對(duì)象。因此只需要在組件銷毀的時(shí)候主動(dòng)銷毀掉其持有的Echarts實(shí)例對(duì)象即可。
普通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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)div拖拽互換位置的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
Vue3+Vite項(xiàng)目中引入pinia和pinia-plugin-persistedstate的方法代碼
這篇文章主要給大家介紹了關(guān)于Vue3+Vite項(xiàng)目中引入pinia和pinia-plugin-persistedstate的相關(guān)資料,Pinia是Vue.js的官方狀態(tài)管理庫,輕量且功能強(qiáng)大,支持模塊化和TypeScript,PiniaPluginPersistedState是一個(gè)插件,需要的朋友可以參考下2024-11-11
這篇文章主要為大家詳細(xì)介紹了vue+Echart實(shí)現(xiàn)立體柱狀圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
在本文章里小編給大家整理了關(guān)于Vue中this.$nextTick的作用及用法，有需要的朋友們可以跟著學(xué)習(xí)參考下。2020-02-02
ue-bus 提供了一個(gè)全局事件中心，并將其注入每一個(gè)組件，你可以像使用內(nèi)置事件流一樣方便的使用全局事件。這篇文章給大家介紹了vue bus全局事件中心簡單Demo，需要的朋友參考下吧2018-02-02
這篇文章主要介紹了vue代理模式解決跨域詳解的相關(guān)資料,需要的朋友可以參考下2022-09-09
Vue的Eslint配置文件eslintrc.js說明與規(guī)則介紹
最近在跟著視頻敲項(xiàng)目時(shí)，代碼提示出現(xiàn)很多奇奇怪怪的錯(cuò)誤提示，百度了一下是eslintrc.js文件沒有配置相關(guān)命令，ESlint的語法檢測(cè)真的令人抓狂，現(xiàn)在總結(jié)一下這些命令的解釋2020-02-02
vue 判斷兩個(gè)時(shí)間插件結(jié)束時(shí)間必選大于開始時(shí)間的代碼
這篇文章主要介紹了vue 判斷兩個(gè)時(shí)間插件結(jié)束時(shí)間必選大于開始時(shí)間的代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
openlayers6之地圖覆蓋物overlay三種常用用法(popup彈窗marker標(biāo)注text文本)
這篇文章主要介紹了openlayers6之地圖覆蓋物overlay三種常用用法(popup彈窗marker標(biāo)注text文本),主要講overlay三種最常用的案例,感興趣的朋友一起看看吧2021-09-09
這篇文章主要來和大家分享一些關(guān)于 Vue3中Hooks封裝的技巧,希望能夠?yàn)榇蠹以?nbsp;Vue 3 項(xiàng)目中更好地利用 Hooks 提供一些思路和實(shí)踐經(jīng)驗(yàn)2023-12-12