动态排序柱状图

动态排序柱状图（Bar Race Chart）是一种随着时间动态展示数据排名变化的图表。ECharts 从 5.0 版本开始内置支持动态排序图。

动态排序柱状图通常使用水平条形图。如果你想使用垂直的，只需要将本教程中的 X 轴和 Y 轴对调即可。

  1. 将柱状图系列的 realtimeSort 设置为 true 来开启动态排序效果
  2. 将 yAxis.inverse 设置为 true，使得数值大的柱子排在上面
  3. 建议将 yAxis.animationDuration 设置为 300，作为初次柱条排序动画的时长
  4. 建议将 yAxis.animationDurationUpdate 设置为 300，作为后续柱条排序动画的时长
  5. 将 yAxis.max 设置为 n - 1，其中 n 是需要展示的柱子数量；否则，所有柱子都会被显示
  6. 建议将 xAxis.max 设置为 'dataMax'，这样 X 轴的范围会取数据的最大值
  7. 如果需要实时更新标签的数值，可以将 series.label.valueAnimation 设置为 true
  8. 将 animationDuration 设置为 0，这样初次动画不会从 0 开始；如果你希望从 0 开始，可以将其设置为和 animationDurationUpdate 相同的值
  9. 建议将 animationDurationUpdate 设置为 3000，作为数据更新动画的时长，这个值应该和调用 setOption 的频率相同
  10. 通过 setInterval，以 animationDurationUpdate 的频率，调用 setOption 来更新下一时刻的数据

示例

一个完整的示例

var data = [];
for (let i = 0; i < 5; ++i) {
  data.push(Math.round(Math.random() * 200));
}

option = {
  xAxis: {
    max: 'dataMax'
  },
  yAxis: {
    type: 'category',
    data: ['A', 'B', 'C', 'D', 'E'],
    inverse: true,
    animationDuration: 300,
    animationDurationUpdate: 300,
    max: 2 // only the largest 3 bars will be displayed
  },
  series: [
    {
      realtimeSort: true,
      name: 'X',
      type: 'bar',
      data: data,
      label: {
        show: true,
        position: 'right',
        valueAnimation: true
      }
    }
  ],
  legend: {
    show: true
  },
  animationDuration: 0,
  animationDurationUpdate: 3000,
  animationEasing: 'linear',
  animationEasingUpdate: 'linear'
};

function run() {
  var data = option.series[0].data;
  for (var i = 0; i < data.length; ++i) {
    if (Math.random() > 0.9) {
      data[i] += Math.round(Math.random() * 2000);
    } else {
      data[i] += Math.round(Math.random() * 200);
    }
  }
  myChart.setOption(option);
}

setTimeout(function() {
  run();
}, 0);
setInterval(function() {
  run();
}, 3000);
在线示例

贡献者 在 GitHub 上编辑此页

OviliapissangShofol