Vue echarts封装实现流程

下面是详细的Vue echarts封装实现流程攻略。

1. 创建 Vue 组件

首先，在 Vue 项目中进行 echarts 封装前需要先创建一个 Vue 组件。

<template>
  <div ref="main" :style="{ width: '100%', height: '100%' }"></div>
</template>
<script>
export default {
  props: {
    option: {
      type: Object,
      default: () => {},
    },
    theme: String,
    initOptions: {
      type: Object,
      default: () => {},
    },
  },
  mounted() {
    this.initEcharts();
  },
  beforeDestroy() {
    this.dispose();
  },
  methods: {
    initEcharts() {
      if (!this.chart) {
        this.chart = echarts.init(this.$refs.main, this.theme, this.initOptions);
      }
      this.chart.setOption(
        this.option,
      );
      window.addEventListener('resize', this.chart.resize);
    },
    dispose() {
      if (this.chart) {
        this.chart.dispose();
        this.chart = null;
      }
      window.removeEventListener('resize', this.chart.resize);
    },
  },
};
</script>

上述代码中，我们暴露了三个 props：

• option: echarts 配置对象。
• theme: echarts 主题。
• initOptions: echarts 初始化选项。

mounted 钩子函数在组件加载完成后，进行初始化 echarts，并注册 window resize 事件。

beforeDestroy 钩子函数在组件销毁前，销毁 echarts 并解除 resize 事件的注册。

initEcharts 函数用于初始化 echarts，其中包括设置 echarts 配置选项和主题。

dispose 函数用于销毁 echarts。

2. 引入 echarts

为了使用 echarts，我们需要在 Vue 组件中引入 echarts 库。可以在 Vue.config.js 的 webpack 配置中，全局引入 echarts:

config.resolve.alias.set('echarts$', 'echarts/dist/echarts.min.js');

在 Vue 组件中，使用 import 引入 echarts：

<script>
import echarts from 'echarts';
export default {};
</script>

3. 使用 vue-echarts 封装组件

现在我们已经将 echarts 封装成了一个 Vue 组件，可以在任意 Vue 组件中通过如下方式使用：

<template>
  <bar-chart :option="option" :theme="theme" :initOptions="initOptions" />
</template>
<script>
import BarChart from '@/charts/BarChart.vue';
export default {
  components: {
    BarChart,
  },
  data() {
    return {
      option: {/* echarts 配置选项 */},
      theme: 'my_theme',
      initOptions: {/* echarts 初始化选项 */},
    };
  },
}
</script>

在上述代码中，我们在 Vue 组件中通过 import 引入了具名为 BarChart 的封装组件，同时通过 :option、:theme 和 :initOptions props，向组件传递了 echarts 相关的配置信息。这个示例展示了如何封装柱状图的组件。

4. echarts 封装组件的深度应用

在实际开发中，我们常常需要对 echarts 封装组件进行深度应用。下面我们以一个仪表盘组件为例进行说明。

<template>
  <div class="dashboard">
    <div ref="dashboard1" :style="{ width: '50%', height: '100%', display: 'inline-block' }"></div>
    <div ref="dashboard2" :style="{ width: '50%', height: '100%', display: 'inline-block' }"></div>
  </div>
</template>
<script>
import echarts from 'echarts';
export default {
  data() {
    return {
      option1: {/* 仪表盘1 echarts 配置选项 */},
      option2: {/* 仪表盘2 echarts 配置选项 */},
    };
  },
  mounted() {
    this.initEcharts();
  },
  beforeDestroy() {
    this.dispose();
  },
  methods: {
    initEcharts() {
      if (!this.chart1) {
        this.chart1 = echarts.init(this.$refs.dashboard1, 'my_theme', this.initOptions);
        this.chart1.setOption(this.option1);
      }
      if (!this.chart2) {
        this.chart2 = echarts.init(this.$refs.dashboard2, 'my_theme', this.initOptions);
        this.chart2.setOption(this.option2);
      }
      window.addEventListener('resize', this.chart1.resize);
      window.addEventListener('resize', this.chart2.resize);
    },
    dispose() {
      if (this.chart1) {
        this.chart1.dispose();
        this.chart1 = null;
      }
      if (this.chart2) {
        this.chart2.dispose();
        this.chart2 = null;
      }
      window.removeEventListener('resize', this.chart1.resize);
      window.removeEventListener('resize', this.chart2.resize);
    },
  },
};
</script>

在上述代码中，我们使用一个名称为 Dashboard 的 Vue 封装组件，同时配置了两个仪表盘的 echarts 配置选项 option1 和 option2。通过重载 Watcher，在 option 发生变化时重新绘制仪表盘，并在 beforeDestroy 钩子函数中销毁对应的 echarts 实例对象。

这里是一个更为完整且复杂的 echarts 封装组件示例，希望能够帮助你深度理解 Vue echarts 封装实现的过程。