動的な並べ替え棒グラフ

棒グラフレースは、データのランキングの時間経過による変化を示すチャートで、ECharts 5 からデフォルトでサポートされています。

棒グラフレースは通常、横棒を使用します。縦棒を使用したい場合は、このチュートリアルでX軸とY軸を逆にするだけです。

  1. 棒グラフシリーズのrealtimeSortをtrueに設定して、棒グラフレースを有効にします
  2. yAxis.inverseをtrueに設定して、長いバーが上部に表示されるようにします
  3. 最初の棒の並び替えアニメーションでは、yAxis.animationDurationを300に設定することをお勧めします
  4. 後の棒の並び替えアニメーションでは、yAxis.animationDurationUpdateを300に設定することをお勧めします
  5. 表示する棒の数をnとすると、yAxis.maxをn - 1に設定します。それ以外の場合は、すべての棒が表示されます
  6. データの最大値がX軸の最大値として使用されるように、xAxis.maxを'dataMax'に設定することをお勧めします。
  7. リアルタイムのラベル変更が必要な場合は、series.label.valueAnimationをtrueに設定します
  8. 最初のアニメーションが0から開始しないように、animationDurationを0に設定します。それ以外の場合は、animationDurationUpdateと同じ値を設定します
  9. アニメーションの更新期間には、animationDurationUpdateを3000に設定することをお勧めします。これは、setOptionを呼び出す頻度と同じにする必要があります
  10. animationDurationUpdateの頻度でsetIntervalを使用して、次の時間のデータに更新するために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でこのページを編集

Ovilia Oviliapissang pissangShofol Shofol