图表初始化必须在 onMounted，销毁必须在 onBeforeUnmount；因 setup/created 时 DOM 未生成，ref 为空会导致初始化失败；onMounted 确保元素存在，onBeforeUnmount 可清理定时器、事件监听和实例，防止内存泄漏与异常。
图表实例的初始化和销毁必须严格匹配 DOM 的可用性与组件的存续状态，否则容易出现“操作已移除元素”或“内存泄漏”。核心原则是：初始化在 onMounted，销毁在 onBeforeUnmount。
为什么不能在 setup 或 created 里初始化图表？
setup 和 created 阶段 DOM 尚未生成，document.getElementById 或 ref 对应的元素为 null。ECharts、Chart.js 等库初始化时需要真实容器节点，强行调用会报错或静默失败。
onMounted 是唯一安全的初始化时机
此时组件已完成挂载，ref 已绑定到真实 DOM 元素，可放心传入图表库：
- 用
ref获取容器（如<div ref="chartRef"></div>） - 在
onMounted中检查chartRef.value是否存在 - 存在则调用
echarts.init(chartRef.value)或new Chart(...) - 建议将图表实例保存为
let chartInstance = ref(null)，便于后续复用或销毁
onBeforeUnmount 是必须执行的销毁位置
组件卸载前，图表实例仍持有 DOM 引用、定时器（如 ECharts 的轮播）、事件监听器。不清理会导致：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
- 内存泄漏（实例无法被 GC 回收）
- 定时器继续运行，触发已销毁组件的回调（报错或异常渲染）
- 窗口 resize 事件持续触发，影响性能
正确做法是在 onBeforeUnmount 中：
- 调用
chartInstance.value?.dispose()（ECharts） - 或
chartInstance.value?.destroy()（Chart.js） - 手动清除
window.addEventListener('resize', ...)等全局监听 - 清空定时器：
clearInterval(timerId)
更新图表数据时注意避免重复初始化
响应式数据变化后，通常只需调用 setOption 或 update，而不是重新 init：
- 确保图表实例已存在（
chartInstance.value不为 null）再更新 - 不要在
onUpdated中调用 init —— 它会在每次响应式更新后执行，极易造成重复实例化 - 若需响应 props 变化，推荐用
watch监听关键数据，有变化再setOption
