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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/702520.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

挑战30天学完Python:Day21 类和对象

🎉 本系列为Python基础学习,原稿来源于 30-Days-Of-Python 英文项目,大奇主要是对其本地化翻译、逐条验证和补充,想通过30天完成正儿八经的系统化实践。此系列适合零基础同学,或仅了解Python一点知识,但又没…

[python][whl]pymc所有版本下载地址汇总

pymc-2.3.7-cp27-cp27m-win_amd64.whl下载地址:https://download.csdn.net/download/FL1623863129/88631556 pymc-2.3.7-cp35-cp35m-win_amd64.whl下载地址:https://download.csdn.net/download/FL1623863129/88631555 pymc-2.3.8-cp36-cp36m-win_amd64.…

Python-读取串口接收到的数据

一、需求描述 现有一单片机在通过串口向外发送数据,需要使用Python编写程序进行数据的接收,并根据自定义的协议进行报文的解析。 二、自定义协议 因为单片机在通过串口发送数据时,是以字节为单位进行发送,对于接收方来说&#…

2-25练习题

6.假设循环队列用数组实现,其定义如下: #define SEQLEN 32 int seqn [ SEQLEN ]; /*用于存放队列数据的数组*/ int head;/*数组下标索引,指向队列头部,若队列不空,指向队列头元素*/ int tail;/*数组下标索引,指向队列尾部&#xf…

STL常用容器(string容器)---C++

STL常用容器目录 1.string容器1.1 string基本概念1.2 string构造函数1.3 string赋值操作1.4 string字符串拼接1.5 string查找和替换1.6 string字符串比较1.7 string字符存取1.8 string插入和删除1.9 string子串 1.string容器 1.1 string基本概念 本质: string是C…

电子签证小程序系统源码后台功能列表

基于ThinkPhp8.0uniapp 开发的电子签证小程序管理系统。能够真正帮助企业基于微信公众号H5、小程序、wap、pc、APP等,实现会员管理、数据分析,精准营销的电子商务管理系统。可满足企业新零售、批发、分销、预约、O2O、多店等各种业务需求,快速积累客户、…

搜索专项---IDA*

文章目录 排书回转游戏 一、排书OJ链接 本题思路:先考虑每一步的决策数量:当抽取长度为 i 的一段时,有 n−i1 种抽法,对于每种抽法,有 n−i 种放法。另外,将某一段向前移动,等价于将跳过的那段向后移动&am…

C++之std::tuple(二) : 揭秘底层实现原理

相关系列文章 C之std::tuple(二) : 揭秘底层实现原理 C三剑客之std::any(一) : 使用 C之std::tuple(一) : 使用精讲(全) C三剑客之std::variant(一) : 使用 C三剑客之std::variant(二):深入剖析 深入理解可变参数(va_list、std::initializer_list和可变参数模版) st…

【JVM】线上一次fullGC排查思路

fullGC问题背景 监控告警发现,今天开始我们线上应用频繁出现fullGC,并且每次出现后磁盘都会被占满 查看监控 查看监控发现FULLGC的机器均为同一个机房的集器,并且该机房有线上error报错,数据库监控对应的时间点也有异常&#x…

数据结构知识点总结-绪论 数据结构基本术语 算法及评价

要求 (1)对数据结构这么课学了哪些知识有个清楚的认知; (2)掌握目录结构,能复述出来每个知识点下都有哪些内容。 如下图所示,可自行制作思维导图,针对自己薄弱的地方进行复习。 …

curl与HTTP状态码

目录 一、curl (一)curl简介 (二)curl命令的选项 二、HTTP状态码 (一)状态码的含义 (二)状态码分类 1.默认的状态码 2.自定义状态码 一、curl (一)c…

NGINX服务器配置实现加密的WebSocket连接WSS协议

一、背景 最近在做小程序开发,需要在nginx中配置websocket加密模式,即wss。初次配置wss时,踩了两个小时的坑,本文将踩坑过程分享给大家,有需要用到的伙伴可以直接copy即可实现,节省宝贵时间。 二、WebSo…

代码随想录第41天|● 01背包问题,你该了解这些! ● 01背包问题,你该了解这些! 滚动数组 ● 416. 分割等和子集

文章目录 背包问题背包题目解法一 ● 01背包问题-二维数组五部曲1.确定dp数组2、确定递推公式3、初始化dp数组4、循环代码: 解法二-01背包问题-滚动数组五部曲1:定义dp二、递推公式三、初始化四、循环顺序代码: 698. 划分为k个相等的子集题解…

【AI学习指南】一、人工智能方向学习路线

目录 人工智能是什么 我们可以利用人工智能做什么 人工智能学习路线 总结与展望

FairyGUI × Cocos Creator 3.x 使用方式

前言 上一篇文章 FariyGUI Cocos Creator 入门 简单介绍了FairyGUI,并且按照官方demo成功在Cocos Creator2.4.0上运行起来了。 当我今天使用Creator 3.x 再引入2.x的Lib时,发现出现了报错。 这篇文章将介绍如何在Creator 3.x上使用fgui。 引入 首先&…

uniapp开发安卓app华为平板真机预览

首先使用数据线连接平板和电脑设备 一、前期准备 平板需要开启三个地方: 1、打开设置,在搜索框中输入版本号/或者直接点击最下方的【关于平板电脑】,点击版本号进入关于平板的界面,连续点击版本号7次,直到出现提醒“…

2.25基础会计学

资本公积是指由股东投入、但不能构成“股本”或“实收资本”的资金部分。 盈余公积是指公司按照规定从净利润中提取的各种积累资金。 所以区别在于盈余公积来自净利润。 借贷其实就是钱从哪来和到哪去的问题,来源是贷,流向是借。比如购入9w原材料&…

基于自适应波束成形算法的matlab性能仿真,对比SG和RLS两种方法

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 5.完整程序 1.程序功能描述 基于自适应波束成形算法的matlab性能仿真,对比SG和RLS两种方法. 2.测试软件版本以及运行结果展示 MATLAB2022a版本运行 3.核心程序 ........................…

facebook群控如何做?使用静态住宅ip代理有什么好处?

在进行Facebook群控时,ip地址的管理是非常重要的,因为Facebook通常会检测ip地址的使用情况,如果发现有异常的使用行为,比如从同一个ip地址频繁进行登录、发布内容或者在短时间内进行大量的活动等等,就会视为垃圾邮件或…

RK3568平台开发系列讲解(Linux系统篇)字符设备驱动:分配和注册字符设备

🚀返回专栏总目录 文章目录 一、分配和注册字符设备二、file_operations沉淀、分享、成长,让自己和他人都能有所收获!😄 一、分配和注册字符设备 字符设备在内核中表示为struct cdev的实例。在编写字符设备驱动程序时,目标是最终创建并注册与struct file_operations关联…