在vue中使用echarts，切換頻繁時內存泄漏出現白屏

錯誤場景：

在 vue 項目中使用了 echarts，在一個頁簽與另一個頁簽之間切換多次后，頁面卡頓並且 echarts 不能重繪，出現白屏。

原因分析：

echarts 頻繁初始化畫圖時候有內存泄漏，吃掉了所有內存，就白屏畫不出來了。

生成的echarts實例對象很大，占用內存過多。 echarts 里 zrender 用的canvas。

解決方法：

來自 https://www.jianshu.com/p/d6d7294b2bf5

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', () => {
            echarts.dispose(Chart)
        })
    }