Apache ECharts动态数据图表能否实现平滑滚动（非Shift/Push）效果？

ECharts没有官方提供类似Chart.js的chartjs-plugin-streaming插件，但完全可以通过数据平滑偏移+坐标轴动画实现自然流动的动态效果，替代生硬的shift()和push()操作。以下是具体实现方案和可测试的示例：

核心实现逻辑 #

• 不让旧数据直接被删除，而是让所有已有数据点沿着X轴向左平滑偏移
• 动态调整X轴的显示范围，让视图始终跟随最新数据，旧数据自然移出视野
• 配合ECharts内置的动画配置，让数据移动和坐标轴更新过渡更自然

可直接测试的代码示例 #

可将以下代码复制到ECharts官方演示站点的编辑器中运行：

var myChart = echarts.init(document.getElementById('main'));

// 初始化数据容器与参数
var xData = [];
var yData = [];
var currentX = 0;
var viewWindow = 10; // 控制图表显示的数据范围

// 生成初始数据
for (var i = 0; i < viewWindow; i++) {
  xData.push(currentX);
  yData.push(Math.random() * 100);
  currentX++;
}

var option = {
  xAxis: {
    type: 'value',
    min: 'dataMin',
    max: 'dataMax',
    axisUpdateAnimation: true // 开启坐标轴更新动画，避免跳变
  },
  yAxis: {
    type: 'value',
    min: 0,
    max: 100
  },
  series: [{
    type: 'line',
    data: yData,
    animation: true,
    animationDuration: 300, // 匹配数据更新频率的动画时长
    smooth: true // 折线平滑处理，增强流动感
  }]
};

myChart.setOption(option);

// 模拟实时数据流入
setInterval(function() {
  // 所有旧数据X轴值减1，实现向左偏移
  xData = xData.map(x => x - 1);
  // 添加新数据点
  xData.push(currentX);
  yData.push(Math.random() * 100);
  currentX++;

  // 裁剪视野外的旧数据，避免内存占用过高
  var validStartIndex = xData.findIndex(x => x >= currentX - viewWindow);
  if (validStartIndex > 0) {
    xData = xData.slice(validStartIndex);
    yData = yData.slice(validStartIndex);
  }

  // 更新图表
  myChart.setOption({
    series: [{ data: yData }]
  });
}, 1000);

关键配置说明 #

• axisUpdateAnimation: true：开启坐标轴的平滑更新动画，让X轴跟随数据移动时没有突兀的跳变
• smooth: true：让折线过渡更流畅，强化数据流动的视觉感受
• 数据裁剪逻辑：定期移除超出显示范围的旧数据，既能保持性能，又不影响流动效果
• animationDuration：调整动画时长匹配数据更新频率，确保动画连贯不卡顿

内容的提问来源于stack exchange，提问作者김진현