Echarts 释放资源
当我们使用echarts进行视图渲染的时候,我们一般都会使用定时器来进行试图的更新,我们会发现页面开的越久就会变得很卡,我们打开任务管理器发现,内存在稳定的上升,这就是内存的泄露。
这是因为,我们的定时器没有取消,而是再一直叠加,我们再启动定时器的时候我们也要清除定时器,然后在执行定时器。
// An highlighted block
setTimer: function () {
this.timer = setInterval(() => {
this.gtePack();//定时器执行的任务
clearInterval(this.timer);//清除定时器
this.setTimer();//重启定时器
}, 10000);
},
这样我们的内存就稳定了,页面开多久都不会出现每面很卡的现象。
当然,我们渲染页面的时候我们也要注意:
我们再渲染数据视图的时候,我们先要销毁实例然后再进行渲染,比如:
// An highlighted block
if(this.myChart){ //判断视图是否渲染
this.myChart.dispose(); //如果渲染了 先销毁
this.myChart = undefined; //把视图容器变为undefined
}
this.myChart = echarts.init(this.$refs.allMap); //在进行视图的绑定!
通过这种方式,我打开页面测试了一下,我写的可视化大数据页面,有9个echarts视图表格,发现内存很稳定,没有了持续升高的迹象。