首页 技术 正文
技术 2022年11月10日
0 收藏 991 点赞 3,683 浏览 1229 个字

  echarts是百度的一个图表插件,确实好用美观。

  之前实习接触到的页面大多是下面这种调用方式

var chart=echarts.init(document.getElementById(dom));
var option={
//.....................
}
chart.setOption(option);

  这次有一个页面需要计时器反复加载新数据,然后重绘echarts图表。一开始我还是使用了上面这种方式,没有发现太大问题。第二天早上来调试的时候,网页运行了一段时间,我的电脑内存达到了56%,我是8G的内存,十分好奇,发现chome占用了大量的内存,调出chome的任务管理器,发现就是带有计时器的页面内存占用一直再稳定上升。。。我意识到了内存泄漏,一直认为内存泄漏与我无缘的我内心是奔溃的。

  为了确认,我把计时器改成了200ms,果然,一会内存就上涨到1G了,赶紧上网查资料,发现chome自带内存快照,拍了几张快照对比,发现原来是echarts的问题。搜了挺久,似乎也没比较好的方案,有一个说调用dispose()(这个应该也是可以的,但没有过多的尝试),试了一下,好像调用方法有错,我就去官网查了一下文档。

echarts配合循环计时器等出现的内存泄漏echarts配合循环计时器等出现的内存泄漏

  看到这里我突然就想到,百度建议的是修改配置,我也确实是使用setOption()去修改的,但是我没注意到,当第二次进入时我们是用

var chart = echarts.init(document.getElementById(dom));

这段代码重新初始化了一个echarts对象。然后尝试着把代码改成了

var chart = echarts.getInstanceByDom(document.getElementById(dom));
if (chart === undefined) {
chart = echarts.init(document.getElementById(dom));
}
var option = {
//.......................
}
chart.setOption(option);

果然内存占用稳定下来了(这次不是稳定上升。。。),大概就是这样了。应该也可以写成下面这种方式。

var chart = echarts.getInstanceByDom(document.getElementById(dom));
echarts.dispose(chart);
chart = echarts.init(document.getElementById(dom));
var option = {
//.......................
}
chart.setOption(option);

大家可以试试。

补:后来我用两种方式试了一下,第一种方式(if…..)内存占用大概在100M左右,第二种方式(echarts.dispose())内存占用大概是300M左右,原因还不太清楚,页面上有6个echarts图表,还有其他元素。

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,494
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,907
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,740
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,495
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:8,133
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:5,297