Vue响应式数据不会自动触发Echarts重绘，需手动调用setOption并确保配置为新引用；初始化须在onMounted中执行echarts.init，销毁须在onBeforeUnmount中调用dispose；容器需设宽高，更新时推荐完全替换配置并传true参数。
Vue响应式数据本身不会自动驱动Echarts重绘，关键在于主动触发setOption并确保配置对象的引用或内容变化能被Echarts正确识别。不靠“数据变了图表就动”，而要靠“数据变→生成新配置→手动更新”这一闭环。
确保图表配置是响应式的，并每次更新都用新引用
Echarts不监听Vue响应式对象的深层变更，所以不能只改options.series[0].data就指望图表刷新。推荐做法：
- 用
ref包裹整个配置对象，更新时直接赋值一个全新对象：chartOptions.value = { ...old, series: [{ data: newData }] } - 若结构复杂、频繁修改，可用
reactive配合watch监听关键字段（如series、xAxis.data），并在回调中调用chart.setOption(chartOptions.value, true) - 避免在原对象上直接修改数组项或嵌套属性，比如
chartOptions.value.series[0].data.push(x)——这大概率不会触发更新
初始化和销毁必须绑定组件生命周期
Echarts实例依赖真实DOM，且不自动清理，漏掉这步极易导致白屏、内存泄漏或跨路由图表错乱：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 在
onMounted中获取容器ref（如<div ref="chartRef"></div>），再调用echarts.init(chartRef.value) - 务必在
onBeforeUnmount中执行chart.dispose()，否则下次进入可能初始化失败 - 容器必须有明确宽高（如
height: 400px或height: 50vh），否则渲染区域为0，图表不可见
数据更新后，必须手动调用setOption并传对参数
不要依赖v-chart :option="xxx"的响应式绑定自动刷新——vue-echarts组件内部虽做了封装，但底层仍是调用setOption，逻辑没变：
- 异步数据加载完成后，先生成完整新配置（建议封装成
genOptions(data)函数），再执行chart.setOption(newOptions, true)，true表示不合并、完全替换，避免旧状态残留 - 若需保留动画、tooltip交互等状态，可启用合并模式：
chart.setOption(newOptions, false)，但此时必须保证newOptions是新引用，否则Echarts diff会跳过更新 - 在
watch中更新时，加一层nextTick或判断chart?.isDisposed() === false，防止setOption调用在实例创建前
进阶：封装useEcharts组合式函数统一管理
把初始化、响应式绑定、销毁、resize适配抽成自定义Hook，大幅提升复用性和可维护性：
- 接收容器ref和初始配置，返回
chart实例和setOptions方法 - 内部自动注册
onMounted/onBeforeUnmount，并支持window.resize监听与节流 - 可选传入数据源和生成函数，例如：
useEcharts(chartRef, rawData, genOptions)，内部自动watch并调用setOption - 搭配
autoresize属性（<v-chart :autoresize="true"></v-chart>）可进一步简化窗口缩放处理
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
