最近使用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()方法好一点。有更好的解决方案欢迎交流！

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

来源：https://www.cnblogs.com/sysg/archive/2018/03/20/8608010.html

链接: https://fly63.com/article/detial/524