動態排序柱狀圖

動態排序柱狀圖（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