Vue3引入ECharts实现图表组件的初始化配置与销毁清理

脚本专家

在 Vue 3 项目中做数据可视化时，ECharts 是一个非常常用的图表库。它本身不依赖具体框架，因此只需要在组件里手动管理实例的创建、更新和销毁。下面从安装开始，逐步演示如何在 Vue 3 组件中集成 ECharts，并实现一个柱状图。

一、安装 ECharts

打开终端，在 Vue 3 项目根目录执行以下任一命令即可。

使用 npm：

2. npm install echarts --save

复制代码

或者使用 yarn：

2. yarn add echarts

复制代码

安装完成后，ECharts 会写入 package.json 的 dependencies 中，可以直接在组件代码里 import。

二、在 Vue 组件中引入并创建柱状图

首先准备一个容器元素，ECharts 需要基于一个具有宽高的 DOM 节点完成初始化。在 Vue 模板中给这个节点绑定 ref，便于在脚本中获取。

下面是完整的单文件组件示例：

2. <template>
3.   <div ref="chartContainer" style="width: 600px; height: 400px;"></div>
4. </template>
6. <script>
7. import * as echarts from 'echarts';
9. export default {
10.   name: 'BarChart',
11.   data() {
12.     return {
13.       chartInstance: null
14.     };
15.   },
16.   mounted() {
17.     this.initChart();
18.   },
19.   beforeUnmount() {
20.     // 组件销毁前释放 ECharts 实例，避免内存泄漏
21.     if (this.chartInstance) {
22.       this.chartInstance.dispose();
23.       this.chartInstance = null;
24.     }
25.   },
26.   methods: {
27.     initChart() {
28.       // 通过 ref 获取 DOM 容器，初始化图表实例
29.       this.chartInstance = echarts.init(this.$refs.chartContainer);
31.       // 配置项：标题、提示框、图例、坐标轴、系列数据
32.       const option = {
33.         title: {
34.           text: 'ECharts 入门示例'
35.         },
36.         tooltip: {},
37.         legend: {
38.           data: ['销量']
39.         },
40.         xAxis: {
41.           data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
42.         },
43.         yAxis: {},
44.         series: [{
45.           name: '销量',
46.           type: 'bar',
47.           data: [5, 20, 36, 10, 10, 20]
48.         }]
49.       };
51.       // 调用 setOption 让图表渲染出来
52.       this.chartInstance.setOption(option);
53.     }
54.   }
55. };
56. </script>
58. <style scoped>
59. /* 可以按项目需要覆盖容器样式 */
60. </style>

复制代码

代码中的关键点如下：

ref 的名字要和 this.$refs 中访问的名字保持一致，这里使用 chartContainer。容器必须有明确宽度和高度，否则 ECharts 初始化后可能无法正常显示。

初始化动作放在 mounted 生命周期里执行，这样能保证 DOM 已经真实渲染完成，再调用 echarts.init 才安全。

option 是 ECharts 的核心配置对象。xAxis.data 定义类目轴的值，series 中的 type: 'bar' 决定图表类型为柱状图，series.data 与 xAxis.data 一一对应。yAxis 留空也能自动根据数据生成坐标刻度，更复杂的样式可参考官方文档逐一调整。

三、正确管理图表实例

示例中把图表实例保存在组件的 data 中，命名为 chartInstance。这样做的好处是：

initChart 和后续的更新方法都能访问同一个实例。

组件销毁时可以在生命周期钩子中调用 dispose 释放资源。

如果只在 initChart 内部声明局部变量，虽然第一次渲染没问题，但之后想要更新图表或销毁实例就会找不到引用，因此组件级保存实例是更规范的做法。

四、响应式更新图表数据

ECharts 实例的 setOption 方法既负责首次渲染，也负责后续的数据更新。当业务数据发生变化时，不需要重新初始化图表，只需要调用一次 setOption 并传入新的数据即可。

例如可以新增一个方法：

2. updateChart() {
3.   if (!this.chartInstance) {
4.     return;
5.   }
6.   this.chartInstance.setOption({
7.     series: [{
8.       name: '销量',
9.       type: 'bar',
10.       data: [12, 28, 41, 16, 32, 18]
11.     }]
12.   });
13. }

复制代码

调用 updateChart 后，原有柱状图会平滑过渡到新数据。注意：setOption 默认会合并配置，因此只需要提供变化的部分，其他配置项会保留。

五、组件销毁时的清理逻辑

Vue 3 中可以使用 beforeUnmount 或 unmounted 钩子执行清理工作。ECharts 实例内部会绑定浏览器事件和定时器，如果不主动 dispose，组件频繁创建销毁后容易造成内存占用过高。

在 beforeUnmount 中做如下判断即可：

2. beforeUnmount() {
3.   if (this.chartInstance) {
4.     this.chartInstance.dispose();
5.     this.chartInstance = null;
6.   }
7. }

复制代码

dispose 会销毁图表实例并释放相关 DOM 事件；将 chartInstance 置为 null 可以避免后续误调用。

六、适用场景

这个模式适合在 Vue 3 的普通页面、管理后台甚至大屏项目中直接使用。只要容器存在，mounted 中初始化一次，后续通过 setOption 更新数据，并在离开页面时销毁，就能稳定地提供图表能力。如果是更大型的项目，还可以把 echarts.init 封装成自定义 Hook 或独立工具函数，但核心的实例生命周期管理逻辑与此一致。