Vue3中Echarts需手动调用setOption更新图表，确保传入新引用对象或启用合并模式；须在onMounted初始化、onBeforeUnmount销毁实例，并封装useEcharts组合式函数提升复用性。
Vue3 的响应式数据本身不会自动触发 Echarts 图表重绘，关键在于手动调用 chart.setOption() 并确保选项对象是“新引用”或内部数据真正变化，同时避免直接修改原 options 引用导致响应失效。
用 ref 或 reactive 包裹图表配置，并监听变化
Echarts 不会监听 Vue 响应式对象的深层变化，所以不能只靠 watch 监听整个 options 对象——它可能因浅层引用未变而跳过更新。推荐做法是：
- 把
options用ref包裹（适合简单场景），每次更新都赋一个新对象：chartOptions.value = { ...old, series: [...newSeries] } - 若结构复杂，可用
reactive+watch深度监听关键字段（如series、data），并在回调中调用chart.setOption(chartOptions.value, true) -
注意：传
true作为第二个参数可启用“合并模式”，避免清空动画和交互状态
在 onMounted 中初始化图表，并绑定容器生命周期
Echarts 实例必须挂载到真实 DOM 节点上，且需在组件卸载时销毁，否则内存泄漏 + 多次 init 导致图表错乱：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 用
onMounted获取容器 ref（如<div ref="chartRef"></div>），再调用echarts.init(chartRef.value) - 用
onBeforeUnmount调用chart.dispose()，防止重复 init 或跨路由残留 - 确保容器有明确宽高（如 CSS 设置
width: 100%; height: 400px;），否则图表渲染为空白
响应式数据更新后，主动触发 setOption
不要依赖“数据变了图表就自动刷新”——Echarts 是纯 JS 库，与 Vue 响应系统无集成。正确流程是：
立即学习“前端免费学习笔记（深入）”；
- 当业务数据（如 API 返回的 list）更新后，先生成新的 options 配置（建议封装成函数，如
genChartOptions(data)） - 再执行
chart.setOption(newOptions, true)；若需过渡动画，可加第三个参数{ notMerge: false, lazyUpdate: false } - 若数据是异步加载，确保在
chart实例已创建后再调用setOption，可用nextTick或判断chart?.isDisposed() === false
进阶：封装可复用的组合式函数 useEcharts
把初始化、响应式绑定、销毁逻辑抽成自定义 Hook，提升复用性：
- 接收容器 ref 和初始 options，返回
setOptions方法和chart实例 - 内部自动处理
onMounted/onBeforeUnmount，并支持手动resize()（适配窗口变化） - 可配合
watch自动响应传入的数据源，例如：useEcharts(chartRef, { data }, (data) => genOptions(data))
