Vue + Echarts页面内存占用高的问题解决方案
更新时间：2024年02月28日 11:54:10 作者：小宇0926
点击左侧的菜单可以切换不同的看板,有些看板页面中的报表比较多,用户多次切换后页面的内存占用可以上升为GB级,严重时导致页面内存溢出,使得页面崩溃,极大影响了用户体验,本文给大家介绍Vue + Echarts页面内存占用高的问题解决方案,感兴趣的朋友一起看看吧
Vue + Echarts页面内存占用高问题解决
1.问题描述
目前使用的是Vue2 + Echarts4.x的组合，页面如下所示。
就是一个类似于神策的数据看板页面，左侧是一个导航栏，右侧看板页面中包含很多个报表图片，其中报表页面中对Echarts图表进行了二次封装。点击左侧的菜单可以切换不同的看板，有些看板页面中的报表比较多，用户多次切换后页面的内存占用可以上升为GB级。严重时导致页面内存溢出，使得页面崩溃，极大影响了用户体验。
2.解决方法
参考了多篇文章，发现有可能是Echarts+Vue2中，组件销毁时，不会自动释放掉组件中持有的Echarts实例对象。因此只需要在组件销毁的时候主动销毁掉其持有的Echarts实例对象即可。
普通Vue项目可使用如下方式。
data(){
return {
MyEchart: null,
}
}
initEcharts(){
// ....
}
// ....
beforeDestroy(){
if(this.MyEchart){
this.MyEchart.dispose();
this.MyEchart=null;
}
}Vue2 + TyepScript项目使用如下方式。
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
到此这篇关于Vue + Echarts页面内存占用高问题解决的文章就介绍到这了,更多相关Vue Echarts内存占用高内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了vue实现div拖拽互换位置的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
Vue3+Vite项目中引入pinia和pinia-plugin-persistedstate的方法代码
这篇文章主要给大家介绍了关于Vue3+Vite项目中引入pinia和pinia-plugin-persistedstate的相关资料,Pinia是Vue.js的官方状态管理库,轻量且功能强大,支持模块化和TypeScript,PiniaPluginPersistedState是一个插件,需要的朋友可以参考下2024-11-11
这篇文章主要为大家详细介绍了vue+Echart实现立体柱状图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
在本文章里小编给大家整理了关于Vue中this.$nextTick的作用及用法，有需要的朋友们可以跟着学习参考下。2020-02-02
ue-bus 提供了一个全局事件中心，并将其注入每一个组件，你可以像使用内置事件流一样方便的使用全局事件。这篇文章给大家介绍了vue bus全局事件中心简单Demo，需要的朋友参考下吧2018-02-02
这篇文章主要介绍了vue代理模式解决跨域详解的相关资料,需要的朋友可以参考下2022-09-09
Vue的Eslint配置文件eslintrc.js说明与规则介绍
最近在跟着视频敲项目时，代码提示出现很多奇奇怪怪的错误提示，百度了一下是eslintrc.js文件没有配置相关命令，ESlint的语法检测真的令人抓狂，现在总结一下这些命令的解释2020-02-02
这篇文章主要介绍了vue 判断两个时间插件结束时间必选大于开始时间的代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
openlayers6之地图覆盖物overlay三种常用用法(popup弹窗marker标注text文本)
这篇文章主要介绍了openlayers6之地图覆盖物overlay三种常用用法(popup弹窗marker标注text文本),主要讲overlay三种最常用的案例,感兴趣的朋友一起看看吧2021-09-09
这篇文章主要来和大家分享一些关于 Vue3中Hooks封装的技巧,希望能够为大家在 Vue 3 项目中更好地利用 Hooks 提供一些思路和实践经验2023-12-12
最新评论