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

谁借莪１个温暖的怀抱￠ 2021-07-26 13:16 365阅读 0赞

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

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

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

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

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

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

[format_png]: /images/20210726/334ccbf28bc348719f930c98fe92af07.png