Vue 引入Echarts 封装（无内存泄漏问题）

封装 常用 echarts 图表：

首先需要下载echarts：

// 命令行
npm install echarts --save

接着创建相关js文件，

代码如下：

import Vue from "vue";
import echarts from "echarts";
let Echarts = function(Vue) {
  Object.defineProperties(Vue.prototype, {
    $chart: {
      get() {
        return {
          // 清除实例
          dispose(...args) {
            args.forEach(item => echarts.dispose(item));
          },
          //示例
          bar(id) {
            this.chart = echarts.init(document.getElementById(id));
            this.chart.clear();
            // 这里定义的optionData 也可作为参数传入，
            const optionData = {
              title: {
                text: "ECharts示例"
              },
              tooltip: {},
              xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
              },
              yAxis: {},
              series: [
                {
                  name: "销量",
                  type: "bar",
                  data: [5, 20, 36, 10, 10, 20]
                }
              ]
            };
            this.chart.setOption(optionData, true);
          }
        };
      }
    }
  });
};
Vue.use(Echarts);

这里我封装了一个清除方法，防止内存泄漏。

创建后需要在入口js中引入：

然后在组件中调用：

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div class="about-body" id="first" ref="first"></div>
    <div class="about-body" id="second" ref="second"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.$chart.bar("first"); //方法调用
    this.$chart.bar("second"); //方法调用
    setInterval(() => {
      this.$chart.dispose(this.$refs.first);
      this.$chart.bar("first"); //方法调用
    }, 1000);
  },
  beforeDestroy() {
 // beforeDestroy中无法通过getElementById获取dom元素，所以采用ref方法
    this.$chart.dispose(this.$refs.first, this.$refs.second);
  }
};
</script>
<style lang="scss" scoped>
.about {
  /*<!--$blue: #a3bcff;-->*/
  & {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    width: 100%;
    height: 80vh;
  }
  .about-body {
    width: 100%;
    height: 60vh;
  }
}
</style>

这里我创建了两张图，添加了一个定时器用于测试，经过测试后发现，更新图表数据（先删除再重新建），包括路由切换，都可以完美清除，不会有内存泄漏问题。

更多图表可自行封装。