echarts导致的内存波动解决方案

作者在可视化开发过程中不免经常用到eharts，不得不说这确实是一款良心的开源图表框架，可以解决工作中大部分需求。以下所说使用过程中的一些注意点，避免踩坑。

出现问题的原因以及解决方案

1. 不要把chart实例赋值在this上。（this对象一直存在不会被回收【在vue中引用时】）
2. 新版本echarts不支持对一个dom多次创建实例。
3. 析构掉生成的echarts对象。(echarts.dispose()可参见echarts api)

建议：

如果有涉及多个图表的页面，不妨把echarts实例的创建、销毁生命周期抽离成mixin注入，可增加开发规范性，并且方便维护，以下仅供参考：

<script>
export default {
  methods: {
    //创建实例
    createEchartsInstance(el) {
      let chart = this.$echarts.getInstanceByDom(el); //获取实例，不要重复初始化
      if (!chart) {
        chart = this.$echarts.init(el);
        //$once钩子的好处：
        //1每个新的实例都程序化地在后期清理它自己
        //2减少dom查询
        this.$once("hook:beforeDestroy", () => {
          chart.clear();
          this.$echarts.dispose(chart);
        });
      }
      return chart;
    }
  }
};
</script>

在vue文件中引入： 这样避免了重复初始化，又能在组件销毁时释放内存，可以很好地规避内存泄漏的问题。