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)
            })
        }