最近使用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(ismpflowOption);
}
//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
如对本文有疑问， 点击进行留言回复！！
网友评论