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

封装ECharts图表

最新推荐文章于 2025-03-01 16:45:33 发布

原创最新推荐文章于 2025-03-01 16:45:33 发布 · 689 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #封装 #vue.js

Vue 杂项问题专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用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>

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

更多图表可自行封装。