最近使用websocket加ECharts做了一个实时监控的功能,发现了一个比较严重的问题,就是浏览器运行一段时间就会非常卡,之前在ECharts官网运行官方实例“动态数据 + 时间坐标轴”时,也遇到了同样的情况,只是当时没有当回事,现在来看原来是内存泄漏的问题。那么是什么原因导致的内存泄漏呢?

  通过上次使用ECharts的经验以及上网查资料得知,原来ECharts在每次setOption后都需要清理变量,在ECharts中是有API手动清理变量的,分别是clear()和dispose(),区别是前者只需插入参数,ECharts就会重绘图表;而后者则是直接将ECharts对象进行清理,需要重新构建ECharts对象。另外,针对IE,也有专门的回收内存函数CollectGarbage,每次浏览器最小化的时候,浏览器都会调用该函数,清理内存。

  经过亲身试验,综合各种解决方案,挑选了一种个人认为比较好的可行方案,关键部分源码如下:

setInterval()或者websocket.onmessage
function(){
data0.shift();
data0.push(data0);
data1.shift();
data1.push(data1);
xdata.shift();
xdata.push(axisData);
chart.clear();//清空ECharts
chart.setOption(Option);
}
//IE内存回收机制
if (window.CollectGarbage) {
setInterval(function () {
CollectGarbage();
}, 30000);
}

  还有一种方案就是chart.dispose()配合echarts.init(),然后再setOption(),也是可行的,与clear()方法的不同之处在于,dispose()方法是销毁ECharts实例,然后再重新初始化,个人觉得clear()方法好一点。

  以上方法有点问题,内存泄漏的问题确实没有了,但是用户的操作(比如缩放或者点击图例等)在每次执行setInterval()或者websocket.onmessage方法时,ECharts图表都会重置为初始化时的状态,通过查询官方API,找到了解决此问题的方法,代码如下:

setInterval()或者websocket.onmessage
function(){
xxdata = option.xAxis[0].data;
data0 = option.series[0].data;
data1 = option.series[1].data;
data0.shift();
data0.push(newdata0);
data1.shift();
data1.push(newdata1);
xdata.shift();
xdata.push(newaxisData);
userOption = ismpflow.getOption();//返回包含用户操作的option
userOption.xAxis[0].data = xxdata;
userOption.series[0].data = data0;
userOption.series[1].data = data1;
chart.clear();//清空ECharts
chart.setOption(userOption );
}
//IE内存回收机制
if (window.CollectGarbage) {
setInterval(function () {
CollectGarbage();
}, 30000);
}

有更好的解决方案欢迎交流!

本文为作者原创,转载请注明出处。

前端交流群,群文件提供大量文档、书籍和资料。期待你的加入!群号:127768464

关于ECharts内存泄漏问题的更多相关文章

  1. echarts 内存泄漏

    最近使用vue + Echarts 实现vue项目的数据可视化功能的时候,在ios环境下,点击列表页进入详情页几次就白屏了. 感觉白屏的原因是:echarts频繁初始化画图时候有内存泄漏,吃掉了所有内 ...

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

    echarts是百度的一个图表插件,确实好用美观. 之前实习接触到的页面大多是下面这种调用方式 var chart=echarts.init(document.getElementById(dom)) ...

  3. Webservice WCF WebApi 前端数据可视化 前端数据可视化 C# asp.net PhoneGap html5 C# Where 网站分布式开发简介 EntityFramework Core依赖注入上下文方式不同造成内存泄漏了解一下? SQL Server之深入理解STUFF 你必须知道的EntityFramework 6.x和EntityFramework Cor

    Webservice WCF WebApi   注明:改编加组合 在.net平台下,有大量的技术让你创建一个HTTP服务,像Web Service,WCF,现在又出了Web API.在.net平台下, ...

  4. 【知识必备】内存泄漏全解析,从此拒绝ANR,让OOM远离你的身边,跟内存泄漏say byebye

    一.写在前面 对于C++来说,内存泄漏就是new出来的对象没有delete,俗称野指针:而对于java来说,就是new出来的Object放在Heap上无法被GC回收:而这里就把我之前的一篇内存泄漏的总 ...

  5. Android性能优化之利用Rxlifecycle解决RxJava内存泄漏

    前言: 其实RxJava引起的内存泄漏是我无意中发现了,本来是想了解Retrofit与RxJava相结合中是如何通过适配器模式解决的,结果却发现了RxJava是会引起内存泄漏的,所有想着查找一下资料学 ...

  6. Android性能优化之利用LeakCanary检测内存泄漏及解决办法

    前言: 最近公司C轮融资成功了,移动团队准备扩大一下,需要招聘Android开发工程师,陆陆续续面试了几位Android应聘者,面试过程中聊到性能优化中如何避免内存泄漏问题时,很少有人全面的回答上来. ...

  7. C++的内存泄漏检测

    C++大量的手动分配.回收内存是存在风险的,也许一个函数中一小块内存泄漏被重复放大之后,最后掏空内存. 这里介绍一种在debug模式下测试内存泄漏的方法. 首先在文件的开头以确定的顺序写下这段代码: ...

  8. 使用 Android Studio 检测内存泄漏与解决内存泄漏问题

    本文在腾讯技术推文上 修改 发布. http://wetest.qq.com/lab/view/63.html?from=ads_test2_qqtips&sessionUserType=BF ...

  9. 【腾讯优测干货分享】Android内存泄漏的简单检查与分析方法

    本文来自于Dev Club 开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d14047603a5bf1242ad01b 导语 内存泄漏问题大约是An ...

随机推荐

  1. 【代码笔记】Java连连看项目的实现(2)——JTable 、TableModel的使用

    博客有时间就写写,所以一篇可能会拆成很多篇,写完后计划再合在一起. 首先肯定是要实现连连看的界面. 先准备连连看要的图片.. “LianLianKan”就是项目名称. 当然,如果小白看我的博客想学到什 ...

  2. phpmyadmin-错误:配置文件权限错误,不应任何用户都能修改!这里有答案

    今天在linux下使用phpMyadmin的时候突然出现这个红色警告.差点把我吓晕在电脑前.不过冷静想一下这个报错,肯定就是linux权限那几个 ‘7’ 惹的祸. 于是 通过命令  ‘ll’ (这是英 ...

  3. 如何开放 Azure 虚拟机 Ping 功能

    前言 文章<使用 PsPing & PaPing 进行 TCP 端口连通性测试>中提到,ICMP 协议的数据包无法通过 Azure 的防火墙和负载均衡器,所以不能直接使用 Ping ...

  4. python加解密

    from Crypto.Cipher import AES import base64 secret_key = '1234567890123456' # 密匙 msg_text = 'test so ...

  5. win7 下vs2008试用版破解

    用过微软的开发套件Visual Studio 2008,如果用的是试用版本,超过90天,就会过期,出现下面这张图片显示的 下面介绍破解的步骤: 1.首先打开控制面板——然后找到卸载或更改程序——然后找 ...

  6. 把IDENTITY_INSERT 设置为 ON ,还不能插入数据问题

    IDENTITY_INSERT 为 ON 时 , 必须把需要插入的列名列出来 不然报错 正确例子: SET IDENTITY_INSERT  table(表名) ONinsert into table ...

  7. p2psearcher绿色版使用方法

    P2pSearcher大家应该很了解,p2p是一款基于P2P技术的资源搜索软件,基于先进的P2P搜索技术,可在瞬间搜遍全球ED2k网络资源,简单便捷的搜索到ED2K网络上共享的海量影音娱乐,学习资料等 ...

  8. 浏览器下出现net::ERR_BLOCKED_BY_CLIENT的解决办法

    转发网址:https://www.cnblogs.com/wenzheshen/p/7724065.html 当我们在做开发时,调试页面图片会出现部分图片无法正常显示,并且确认图片的地址正确: 按F1 ...

  9. C++ decltype类型说明符(尾置返回类型使用)

    转自https://blog.csdn.net/yhl_leo/article/details/50865552 1 基本语法 decltype 类型说明符生成指定表达式的类型.在此过程中,编译器分析 ...

  10. “标准查询运算符”是组成语言集成查询 (LINQ) 模式的方法

    “标准查询运算符”是组成语言集成查询 (LINQ) 模式的方法.大多数这些方法都在序列上运行,其中的序列是一个对象,其类型实现了IEnumerable<T> 接口或 IQueryable& ...