ECharts组件封装教程：Vue3中的实践与探索

在日常的前端开发中，ECharts 作为一款强大且易用的图表库，被广泛应用于数据可视化场景。为了更好地在 Vue3 项目中复用 ECharts 功能，我们可以将其封装成一个组件。本文将带大家一步步实现 ECharts 的 Vue3 组件封装，并演示如何在父组件中调用和使用。

一、封装 ECharts 组件

 废话不多说，先奉上组件代码精华

<template><div class="chart" ref="echartsRef"></div>
</template><script setup>
import { ref, onUnmounted, nextTick } from "vue";
import * as echarts from "echarts";// ref 用于挂载 DOM 容器
const echartsRef = ref(null);
let chartInstance = null; // 存储 ECharts 实例
let observer = null; // 用于监听屏幕尺寸变化的 ResizeObserver// 用于触发父组件事件
const emit = defineEmits(["chartEvent"]);// 组件销毁时清理资源
onUnmounted(() => {if (!observer) return;// 移除 ResizeObserver 监听，防止内存泄露observer.unobserve(chartInstance.getDom());if (!chartInstance) return;// 销毁 ECharts 实例chartInstance.dispose();
});// 初始化图表
function initChart(options &#