解决Vue+Echarts的手机APP页面内存溢出（页面空白问题）问题

问题背景：

1. 手机APP页面用了echarts+vue生成图表。如下图所示，假设一开始Tab标签页1下面有三个echarts图表，Tab标签2也有三个echarts图表。
2. 前几次切换Tba标签页可以正常生成图表，但是当切换多次以后，页面会出现空白的情况，页面也不会报错并且无明显提示。
   

产生原因

1. 最终通过调试窗口发现了问题。
2. 如图：
3. 原因就是切换生成echarts时需要用到一部分内存，重复切换Tab标签页，之前生成的图表内存并没有进行清空，一直切换内存也一直叠加，最终导致内存溢出。

解决思路

发现问题后解决思路就有了：

1. 在生成echarts之前进行判断，dom不存在时就不初始化echarts
2. 去掉重复初始化echarts，这个主要就是在不需要使用时销毁实例。那么很自然想到官方API，查阅echarts官方API果然发现有这个方法：
   

最终代码

1. 页面容器：

<template>
  <div class="chart-main">
    <div ref="dom" :style="chartStyle"></div>
  </div>
</template>

2. 初始化echarts方法：

initChart() {
      //-dom 不存在时不画
      if (!this.$refs.dom) {
          return
      }
      //去掉重复初始化
      this.myChart = echarts.getInstanceByDom(this.$refs.dom);
      if(!this.myChart){
        this.myChart = echarts.init(this.$refs.dom);
        this.$once('hook:beforeDestroy', function () {
          echarts.dispose(this.myChart)
        })
      }
  }

3. 没修改之前的代码：

initChart() {
      this.myChart = echarts.init(this.$refs.dom);
}

个人水平有限，有不对的地方欢迎大家指正，谢谢！