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标识符。

浙公网安备 33010602011771号