网站后台访问权限设置,有空间有域名怎么做网站,wordpress 免费摄影主题,旅游搜索网站开发在日常的前端开发中，ECharts 作为一款强大且易用的图表库，被广泛应用于数据可视化场景。为了更好地在 Vue3 项目中复用 ECharts 功能，我们可以将其封装成一个组件。本文将带大家一步步实现 ECharts 的 Vue3 组件封装，并演示如何在父组件中调用和使用。
一、封装 ECharts 组…在日常的前端开发中，ECharts 作为一款强大且易用的图表库，被广泛应用于数据可视化场景。为了更好地在 Vue3 项目中复用 ECharts 功能，我们可以将其封装成一个组件。本文将带大家一步步实现 ECharts 的 Vue3 组件封装，并演示如何在父组件中调用和使用。
一、封装 ECharts 组件
废话不多说，先奉上组件代码精华
templatediv class="chart" ref="echartsRef"/div
/templatescript 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 #
