ECharts 5.4.0柱状图X轴更新时从0重绘问题求助

核心原因 #

ECharts 5.x对category轴的数据匹配逻辑做了优化，默认通过数据的「唯一标识」而非数组索引关联新旧数据。当直接替换X轴的日期字符串数组时，新日期项与旧项完全不同，ECharts会将其视为全新数据集，触发柱子从0开始的重新渲染动画；而ECharts 4.x默认依赖数组索引匹配，因此不会出现该问题。

解决方案 #

1. 给数据项绑定唯一标识（推荐） #

将series的data改为对象数组，每个对象包含name（对应X轴日期）和value，同时通过encode指定X轴与name关联。这样ECharts会通过name匹配新旧数据，相同name的柱子保留原有高度，仅更新数值；新增/移除的name才会触发对应动画。

// 初始化图表配置
const option = {
  xAxis: {
    type: 'category',
    data: ['14:57:51', '17:57:51', '20:57:51', '23:57:51', '02:57:51', '05:57:51', '08:57:51', '11:57:51']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [
        { name: '14:57:51', value: 120 },
        { name: '17:57:51', value: 200 },
        { name: '20:57:51', value: 150 },
        { name: '23:57:51', value: 80 },
        { name: '02:57:51', value: 70 },
        { name: '05:57:51', value: 110 },
        { name: '08:57:51', value: 130 },
        { name: '11:57:51', value: 90 }
      ],
      type: 'bar',
      encode: { x: 'name' } // 绑定X轴与data中的name字段
    }
  ]
};

// 5秒一次的更新逻辑
function updateChart() {
  const currentTime = new Date().toTimeString().slice(0, 8);
  // 移除最早的X轴数据和对应series数据
  option.xAxis.data.shift();
  option.xAxis.data.push(currentTime);
  option.series[0].data.shift();
  // 新增最新时间的数值（模拟业务数据，替换为你的实际数据）
  option.series[0].data.push({ name: currentTime, value: Math.floor(Math.random() * 100 + 70) });
  myChart.setOption(option);
}

setInterval(updateChart, 5000);

2. 精准控制更新动画 #

通过配置series的动画参数，关闭初始渲染动画，仅保留更新时的平滑过渡动画，适用于不需要绑定唯一标识、仅调整动画表现的场景：

series: [
  {
    data: [...],
    type: 'bar',
    animationDuration: 0, // 关闭初始渲染的从0动画
    animationDurationUpdate: 500, // 更新时的动画时长
    animationEasingUpdate: 'cubicOut' // 平滑的动画曲线
  }
]

3. 使用replaceMerge参数指定更新规则 #

调用setOption时，通过replaceMerge参数告诉ECharts仅替换X轴和series的data部分，而非整个配置，确保ECharts保留原有柱子的状态：

function updateChart() {
  const currentTime = new Date().toTimeString().slice(0, 8);
  // 生成新的X轴数据和series数据（滚动移除最早项）
  const newXData = [...option.xAxis.data.slice(1), currentTime];
  const newSeriesData = [...option.series[0].data.slice(1), Math.floor(Math.random() * 100 + 70)];
  
  myChart.setOption(
    {
      xAxis: { data: newXData },
      series: [{ data: newSeriesData }]
    },
    { replaceMerge: ['xAxis', 'series'] } // 指定仅合并更新X轴和series
  );
}

setInterval(updateChart, 5000);

内容的提问来源于stack exchange，提问作者Galya Ts.