Line折线图数据更新后视图没变化怎么办？

玉楠提问于 2026-03-08 20:45:20 阅读 12

组件

我在用 Vue + ECharts 做一个实时监控页面，Line 折线图初始化能正常显示，但后面通过接口拿到新数据后，调用了 chartInstance.setOption() 更新 series.data，控制台打印数据是对的，可图表就是不刷新，看起来还是老数据。

我试过加 notMerge: false 和 replaceMerge: ['series']，也试过先 clear() 再 setOption，都不行。是不是我哪里写错了？附上关键代码：

const option = {
  xAxis: { type: 'category', data: newData.xAxis },
  yAxis: { type: 'value' },
  series: [{
    type: 'line',
    data: newData.values
  }]
};
chartInstance.setOption(option, { notMerge: false, replaceMerge: ['series'] });

Line折线图

我来解答赞 1 收藏

反馈

2 条解答

Designer°乙涵 Lv1

懒人方案：直接在setOption前加个resize，这破问题我遇到过N次了：

chartInstance.resize();

chartInstance.setOption(option, { notMerge: true });

不行的话再加个nextTick：

await nextTick();

chartInstance.resize();

chartInstance.setOption(option, { notMerge: true });

ECharts就这德行，数据变了但DOM没反应过来，手动resize强制刷新下就好了。

2026-03-08 23:04

若惜~ Lv1

问题在于ECharts需要深拷贝数据。试试这样：

const option = JSON.parse(JSON.stringify({

  xAxis: { type: 'category', data: newData.xAxis },

  yAxis: { type: 'value' },

  series: [{

    type: 'line',

    data: [...newData.values] 

  }]

}));

chartInstance.setOption(option);

这破问题折腾了我半天才发现是引用问题，ECharts有时候会抽风不更新。

2026-03-08 21:01