转载：echarts配合计时器导致的内存溢出

最近碰到一个echarts配合计时器定时获取数据的问题，时间长了之后电脑内存就满了，导致浏览器卡死，网上搜了好久这个方法试了一下可行，转载过来记录一下。

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

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

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

 

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

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

看到这里我突然就想到，百度建议的是修改配置，我也确实是使用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图表，还有其他元素。

 

链接地址：http://blog.csdn.net/wxkongkong/article/details/72726720