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 &#