echarts 二次渲染配置被覆盖的根源是 setoption 默认合并而非替换，解决关键是设 notmerge = true；浅拷贝仅因未切断引用导致脏数据，需深拷贝或重建配置，并配合 dispose 清理实例。

ECharts 二次渲染时配置项被覆盖，根本原因常不是“浅拷贝”本身，而是 setOption 默认行为——合并而非替换。所谓“浅拷贝导致覆盖”，其实是误读；真正出问题的是没切断与旧配置的引用关联，又没告诉 ECharts “这次要彻底换掉，别合并”。

关键：notMerge = true 是核心解法

setOption 默认会把新 option 合并进已有配置（notMerge = false）。比如旧图表有 3 条 series，新数据只传 2 条，ECharts 会保留第 3 条——看起来像“残留”，实则是合并逻辑生效。

解决方法很简单：强制不合并。

• 调用 chart.setOption(newOption, true) —— 第二个参数设为 true，即 notMerge = true
• 这样 ECharts 就会丢弃旧配置，完全用 newOption 替代，不再做字段级合并
• 适用于 Vue/React 中 props 或响应式数据变更后重新渲染的场景

为什么“浅拷贝”容易踩坑？

当你的 newOption 是从原始配置对象直接展开或浅拷贝得来（如 {...baseOption} 或 Object.assign({}, baseOption)），series、xAxis 等嵌套对象仍指向同一内存地址。如果后续代码修改了这个 series 数组（比如 push 新数据），原始 baseOption 也被改了——下次再用它生成 newOption，就带上了脏数据。

ECharts Master

ECharts 图表大师。根据用户数据和业务上下文，自动设计并生成专业的 ECharts 可视化图表。使用场景：(1) 用户提供表格/JSON/CSV 数据需要可视化，(2) 用户说"帮我做个图"、"画个图表"，(3) 需要将查询结果可视化展示。

下载

• 避免方式：对 series、data 等动态部分做深拷贝，或每次从干净模板重建
• 推荐写法：newOption = JSON.parse(JSON.stringify(baseOption))（简单数据结构可用）
• 更稳妥：用结构化方式构造 option，不复用含 data 的完整对象

补充两个高频配合动作

仅靠 notMerge=true 有时还不够，尤其在组件反复挂载/销毁时：

• 销毁实例前调用 chart.dispose()：防止旧实例残留影响新初始化
• 清空 DOM 属性 _echarts_instance_：Vue 中若容器复用，需手动移除该属性，否则 init 会复用旧实例

Vue 场景下的典型处理模式

在 watch 或 onUpdated 中响应数据变化时，应确保：

• option 构造是“全新创建”，不复用含 data 的旧引用
• setOption 明确传入 true（notMerge）
• 必要时，在 unmounted 钩子中执行 chart?.dispose()