echarts 内存泄漏

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

然后就在chrome测试：

image.png

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

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

image.png

查找过程中发现：
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)
            })
        }

https://cn.vuejs.org/v2/guide/components-edge-cases.html