V-FOR中循环创建Echarts实例,由于每次循环中实例个数不同导致的内存泄露问题

  项目中引入vue,使用v-for进行数据的循环显示。在前台进行分页,由于数据量无法控制,最后一个页面的模块数量不一定能占满屏幕。在echarts初始化之前去销毁,就会有一部分实例漏掉,内存无法彻底释放。

  解决方法:

    在给echart实例的容器命名时,我选择使用“echarts”和模块的索引值组合,这样可以通过JQuery方法获取当前页面所有ID中包含“echarts”的元素,遍历后调用echarts的dispose方法。

function disposeEcharts(key){
    $("div[id^='" + key+ "']").each(function (index, value){
            var myChart = echarts.getInstanceByDom($('#' +  value.id)[0]);
            if (myChart != undefined && myChart != null) {
                myChart.dispose();
            }
        });
}

  此方法在beforeUpdate钩子函数中调用,在更新下个页面数据之前删除上个页面的实例对象,参数传入字符串“echarts”,或者传入自定义的ID标识符。

 

posted @ 2020-11-07 15:25  MuXuming  阅读(889)  评论(0)    收藏  举报