ECharts如何更新

在 ECharts 中，“更新”通常指数据变化后重新渲染图表。常见做法和场景如下：

一、最常用：setOption（推荐）

ECharts 的设计是增量更新，直接再次调用 setOption 即可。

// 初始化
const chart = echarts.init(document.getElementById('main'));

// 第一次渲染
chart.setOption({
  xAxis: { type: 'category', data: ['A', 'B', 'C'] },
  yAxis: {},
  series: [{ type: 'bar', data: [1, 2, 3] }]
});

// 数据更新
setTimeout(() => {
  chart.setOption({
    xAxis: { data: ['D', 'E', 'F'] },
    series: [{ data: [4, 5, 6] }]
  });
}, 2000);

✅ 特点：

• 不会销毁原图表
• 默认 合并更新（merge）
• 性能好，支持动画

二、完全替换（不合并）

如果你希望完全覆盖之前的配置：

chart.setOption(option, true);

第二个参数 true 表示 notMerge

三、动态更新数据（常见业务场景）

1️⃣ 定时刷新数据

setInterval(() => {
  chart.setOption({
    series: [{
      data: randomData()
    }]
  });
}, 1000);

2️⃣ 切换图表类型

chart.setOption({
  series: [{ type: 'line' }]
}, true); // 建议用 true

3️⃣ 用户交互后更新

button.onclick = () => {
  chart.setOption({
    series: [{ data: [10, 20, 30] }]
  });
};

四、窗口大小变化（resize）

图表容器大小变化时必须调用：

window.addEventListener('resize', () => {
  chart.resize();
});

五、销毁并重建（不推荐频繁使用）

chart.dispose();
chart = echarts.init(document.getElementById('main'));
chart.setOption(option);

⚠️ 一般只在组件卸载 / 页面切换时使用

六、Vue / React 中的更新

• Vue：watch 数据 → setOption
• React：useEffect / useRef

如果你是 Vue / React / 小程序 / 大屏项目，可以告诉我，我给你对应示例。

✅ 总结

如果你有具体代码或更新不生效的问题，可以直接贴出来。