在vue中使用echarts，切换频繁时内存泄漏出现白屏

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