计算属性让 ECharts 配置真正“活”起来——根据响应式数据自动组装、实时更新，避免手动 setOption，确保图表与业务状态严格同步；可拆分细粒度 computed 按需组合，支持空/加载/错误状态响应式处理，且必须保持纯净无副作用。
计算属性能让你的 Echarts 配置真正“活”起来——它不是把 options 写死，而是根据响应式数据自动组装、实时更新，既避免手动调用 setOption 的繁琐，又确保图表与业务状态严格同步。
用 computed 动态生成完整 option 对象
把整个 option 定义在 computed 中，所有依赖的数据（如筛选后的列表、汇总指标、时间范围）一变，option 自动重算。Vue 会缓存结果，只有依赖变化时才重新执行，比每次 watch + setOption 更高效、更可靠。
例如：
- 从
filteredData计算柱状图的series.data和xAxis.data - 根据
currentMetric切换yAxis.name和tooltip.formatter - 用
loading状态控制title.text后缀（如 “加载中…”）
拆分配置项，按需组合复用
不要把所有配置堆在一个大 computed 里。可拆成多个细粒度的计算属性，比如 chartTitle、chartSeries、chartTooltip，再在主 chartOption 中合并。这样逻辑清晰、便于测试，也方便在多个图表间复用某一部分（如统一的时间轴格式或主题色）。
关键点：
ECharts Master
下载
ECharts 图表大师。根据用户数据和业务上下文，自动设计并生成专业的 ECharts 可视化图表。使用场景：(1) 用户提供表格/JSON/CSV 数据需要可视化，(2) 用户说"帮我做个图"、"画个图表"，(3) 需要将查询结果可视化展示。
- 每个子 computed 只关注单一职责，不耦合其他维度
- 主 option 使用展开运算符（
{...chartTitle, ...chartSeries}）拼接，避免深层嵌套修改风险 - 对可能为 null/undefined 的字段做兜底（如
legend: legendConfig || { show: false }）
响应式处理异步数据与空状态
计算属性天然支持异步依赖的“等待”逻辑——只要数据源是响应式的（比如 ref([]) 或 store.state.data），computed 就会在数据到达后立即更新 option。你无需手动判断 if (data.length)，直接在 computed 内写条件逻辑即可。
常见做法：
- 空数据时返回精简版 option：隐藏 series、显示 placeholder 标题、禁用动画
- 加载中时设置
graphic渲染 loading 图标，或用title.subtext提示 - 错误状态单独分支，展示错误信息并禁用交互（
toolbox: { show: false }）
避免副作用，保持计算属性纯净
computed 应只做“读取+组合”，绝不调用 myChart.setOption()、不修改外部 ref、不发请求。副作用必须移入 watch 或生命周期钩子。否则会导致渲染不一致、重复执行、甚至无限循环。
正确姿势：
-
❌ 错误：在 computed 里调用
chartRef.value?.setOption(...) -
✅ 正确：watch
chartOption，变化时调用setOption，且加immediate: true确保初始渲染 - 用
shallowRef或markRaw包裹 Echarts 实例，防止被 Vue 响应式代理干扰性能
