Vue3 中如何封装 ECharts 组件

在 Vue3 的项目开发中，将 ECharts 进行组件封装，能极大提高代码的复用性与可维护性。下面就详细介绍在 Vue3 里封装 ECharts 组件的步骤。

要确保项目中安装了 ECharts 和 Vue3 相关依赖。使用 npm 或 yarn 安装 ECharts，如：npm install echarts --save。

接着，在 Vue3 项目中创建一个新的组件，比如 EchartsComponent.vue。在这个组件的 <template> 部分，定义一个用于渲染图表的容器，通常是一个 <div> 元素，并为其设置唯一的 id 或 ref，方便后续获取。例如：

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

在 <script setup> 中引入 ECharts。先从 echarts 库中导入所需模块，然后通过 ref 来定义获取图表容器的 ref 对象，如下：

import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';

const chartRef = ref(null);
let chartInstance = null;

在 onMounted 生命周期钩子函数中初始化 ECharts 实例，并设置图表配置。获取到图表容器后，使用 echarts.init 方法创建实例，接着根据需求设置图表的各种配置项，如标题、坐标轴、系列等。示例代码如下：

onMounted(() => {
  chartInstance = echarts.init(chartRef.value);
  const option = {
    title: {
      text: '示例图表'
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [120, 200, 150, 80, 70],
        type: 'bar'
      }
    ]
  };
  chartInstance.setOption(option);
});

为了避免内存泄漏，在组件销毁时要将 ECharts 实例销毁。在 onUnmounted 钩子函数中调用 chartInstance.dispose() 方法：

onUnmounted(() => {
  chartInstance.dispose();
});

最后，在样式部分为图表容器设置合适的宽度和高度，确保图表能正常显示：

.echarts-container {
  width: 100%;
  height: 400px;
}

通过以上步骤，一个基本的 Vue3 封装 ECharts 组件就完成了。在其他组件中，只需引入并使用该组件，就能轻松展示各种 ECharts 图表，为项目开发带来便利。