Vue3封装ECharts组件详解

前言

ECharts是一个非常流行的可视化图表库，它提供了丰富的图表类型和灵活的配置选项，满足了各种数据展示的需求。本文主要介绍如何在Vue3中封装ECharts组件。

准备工作

在使用ECharts之前，需要先安装echarts库。

npm install echarts@^5.1.0

我们还需要安装@vueuse/core库来使用useDebouncedFn方法，防抖函数的使用可以在图表动态交互时提高性能。

npm install @vueuse/core@^5.0.0

封装ECharts组件

我们先把需要的echarts实例引入。

import * as echarts from 'echarts';

为了便于组件复用，我们定义一个基础的ECharts组件，命名为BaseEChart。该组件提供基础的ECharts实例创建和销毁方法，以及重置图表方法。

<template>
  <div class="chart-container" ref="chartRef"></div>
</template>

<script>
import * as echarts from 'echarts';
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    options: {
      type: Object,
      required: true,
    },
    width: {
      type: [Number, String],
      default: '100%',
    },
    height: {
      type: [Number, String],
      default: '400',
    },
  },
  data() {
    return {
      chart: null,
      chartResizeFn: null,
    };
  },
  computed: {
    chartStyle() {
      return {
        width: typeof this.width === 'string' ? this.width : this.width + 'px',
        height: typeof this.height === 'string' ? this.height : this.height + 'px',
      };
    },
  },
  mounted() {
    this.createChart();
    this.chartResizeFn = this.$utils.useDebouncedFn(() => {
    this.chart?.resize();
    });
    window.addEventListener('resize', this.chartResizeFn);
  },
  updated() {
    this.chart.clear();
    this.chart.setOption(this.options);
  },
  beforeUnmount() {
    if (this.chart) {
      window.removeEventListener('resize', this.chartResizeFn);
      this.chart.dispose();
      this.chart = null;
      this.chartResizeFn = null;
    }
  },
  methods: {
    createChart() {
      this.chart = echarts.init(this.$refs.chartRef);
      this.chart.setOption(this.options);
    },
    resetChart() {
      this.chart.clear();
      this.chart.setOption(this.options);
    },
  },
});
</script>

<style scoped>
.chart-container {
  margin: 0px;
}
</style>

在该基础组件中，我们定义了三个props：

• options：echarts图表配置。该属性必传。
• width：图表宽度，默认100%。
• height：图表高度，默认400。

在mounted生命周期中，我们用echarts.init()方法传入组件的ref属性来创建echarts实例。通过setOption()方法传入options属性来配置图表。定义了一个防抖函数来处理浏览器窗口的resize事件，以达到图表的自适应大小触发的目标。

在updated生命周期中，我们在数据更新后，通过调用clear()方法和setOption()方法来更新图表。

在beforeUnmount生命周期中，我们先在window对象上取消resize事件，然后调用dispose()方法来销毁echarts实例。

使用封装的ECharts组件

我们以一个柱状图的实例来演示如何使用BaseEChart组件。

首先，我们在父组件中引入BaseEChart组件，定义一个名为BarChart的组件。在该组件中，我们引入定义好的BaseEChart组件来实现柱状图的封装。

<template>
  <div class="chart-block">
    <h3 class="chart-title">{{ title }}</h3>
    <base-echart
      :options="options"
      :width="width"
      :height="height"
    />
  </div>
</template>

<script>
import BaseEChart from '@/components/BaseEChart.vue';
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'BarChart',
  components: {
    BaseEChart,
  },
  props: {
    data: {
      type: Array,
      required: true,
    },
    title: {
      type: String,
      default: '',
    },
    xAxisName: {
      type: String,
      default: '',
    },
    yAxisName: {
      type: String,
      default: '',
    },
    width: {
      type: [Number, String],
      default: '100%',
    },
    height: {
      type: [Number, String],
      default: '400',
    },
  },
  computed: {
    options() {
      return {
        xAxis: {
          type: 'category',
          data: this.data.map((item) => item.name),
          name: this.xAxisName,
        },
        yAxis: {
          type: 'value',
          name: this.yAxisName,
        },
        series: [
          {
            type: 'bar',
            data: this.data.map((item) => item.value),
          },
        ],
      };
    },
  },
});
</script>

<style scoped>
.chart-block {
  margin: 10px;
}
.chart-title {
  margin: 0 0 10px;
  font-size: 16px;
}
</style>

在该组件中，我们定义了六个props：

• data：柱状图的数据。该属性必传。
• title：柱状图的标题。默认为空。
• xAxisName：x轴的名称。默认为空。
• yAxisName：y轴的名称。默认为空。
• width：图表宽度。默认100%。
• height：图表高度。默认400。

在该组件中，我们重新定义了计算属性options，根据传递的data属性和其他属性来返回echarts图表的配置，比如图表类型、x轴、y轴、系列等。

定义完成后我们就可以在父组件中引入该柱状图组件，并传入相关参数，从而展示一个基础的柱状图。

<template>
  <div>
    <h2 class="page-title">柱状图1</h2>
    <bar-chart
      :data="data"
      title="柱状图示例"
      xAxisName="X轴"
      yAxisName="Y轴"
    />
  </div>
</template>

<script>
import BarChart from '@/components/BarChart.vue';
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'SamplePage',
  components: {
    BarChart,
  },
  data() {
    return {
      data: [
        {name: '测试1', value: 10},
        {name: '测试2', value: 20},
        {name: '测试3', value: 30},
        {name: '测试4', value: 40},
        {name: '测试5', value: 50},
      ],
    };
  },
});
</script>

在这个示例中，我们引入刚才定义的柱状图组件，并传入了必需的data属性，以及可选的标题和轴名称等属性，以实现基础的柱状图展示。

结语

通过以上步骤，我们已经成功的封装了一个基础的ECharts组件，并且实现了一个柱状图的示例。在实际项目中，我们可以定义不同样式的图表组件，来满足各种数据可视化展示的需求。