echarts 内存泄漏

最近使用vue + Echarts 实现vue项目的数据可视化功能的时候,在ios环境下,点击列表页进入详情页几次就白屏了。
感觉白屏的原因是:echarts频繁初始化画图时候有内存泄漏,吃掉了所有内存,就白屏画不出来了。

然后就在chrome测试:

 
 

点击过程中一直增加,点击停止后,没有回落到平衡状态。

原因:
生成的echarts实例对象很大,占用内存过多。
echarts 里 zrender 用的canvas。

 

 
 

查找过程中发现:
1.不要把chart实例赋值在this上。(this对象一直存在不会被回收)
2.新版本echarts不支持对一个dom多次创建实例。
3.析构掉生成的echarts对象。

解决方法:

 //-dom 不存在时不画
     if (!this.$refs.barchart) {
          return
     }
     //- 不要重复初始化
     let Chart = echarts.getInstanceByDom(this.$refs.barchart)
     if (!Chart) {
            Chart = echarts.init(this.$refs.barchart, 'light')
     }
    //-释放echarts对象
    beforeDestroy () {
        let dcharts = echarts.getInstanceByDom(this.$refs.barchart)
        if (dcharts) {
            echarts.dispose(dcharts)
        }
    },

        //- 发现官网实例上有once hook 比destroy 要好一些
        //- hook:beforeDestroy
        let Chart = echarts.getInstanceByDom(this.$refs.barchart)
        if (!Chart) {
            Chart = echarts.init(this.$refs.barchart, 'light')
            this.$once('hook:beforeDestroy', function () {
                echarts.dispose(Chart)
            })
        }

 

posted @ 2019-11-07 20:25  simple-love  阅读(2439)  评论(0编辑  收藏  举报