データ遷移

Apache ECharts^TM は、データの追加、更新、削除時に位置、スケール、形状にトランジションを適用します。これにより、チャートがよりスムーズになり、データ間の関係がより明確に表示されます。多くの場合、開発者はアニメーションの使用方法を気にする必要はなく、単にsetOptionを使用してデータを更新するだけで、EChartsは前回のデータとの差異を見つけ、自動的に最適なトランジションアニメーションを適用します。

たとえば、次の例は、円グラフデータの時間経過に伴う更新でのトランジションを示しています。

function makeRandomData() {
  return [
    {
      value: Math.random(),
      name: 'A'
    },
    {
      value: Math.random(),
      name: 'B'
    },
    {
      value: Math.random(),
      name: 'C'
    }
  ];
}
option = {
  series: [
    {
      type: 'pie',
      radius: [0, '50%'],
      data: makeRandomData()
    }
  ]
};

setInterval(() => {
  myChart.setOption({
    series: {
      data: makeRandomData()
    }
  });
}, 2000);function makeRandomData() {
  return [
    {
      value: Math.random(),
      name: 'A'
    },
    {
      value: Math.random(),
      name: 'B'
    },
    {
      value: Math.random(),
      name: 'C'
    }
  ];
}
option = {
  series: [
    {
      type: 'pie',
      radius: [0, '50%'],
      data: makeRandomData()
    }
  ]
};

setInterval(() => {
  myChart.setOption({
    series: {
      data: makeRandomData()
    }
  });
}, 2000);

ライブ

トランジションの設定

データの追加と更新には異なるアニメーションが必要になることが多いため、たとえばデータ更新アニメーションを短くすることが期待されるため、EChartsは2つのアニメーション設定を区別します。

データの追加には、それぞれアニメーションの期間、イージング、遅延を設定するために、animationDuration、animationEasing、animationDelayを使用した enter アニメーションを適用します。
データの更新には、それぞれアニメーションの期間、イージング、遅延を設定するanimationDurationUpdate、animationEasingUpdate、animationDelayUpdateを使用した update アニメーションを適用します。

ご覧のとおり、update アニメーションの設定は、Updateサフィックスが付いた enter アニメーションの設定です。

ECharts で setOption を使用するたびに、データは最後に更新されたデータと比較され、比較結果に基づいて、データの追加、更新、削除の3つの状態が実行されます。この比較は、データのnameに基づいて行われます。たとえば、前回の更新で 'A'、'B'、'C' の3つのnamesがあり、新しい更新で 'B'、'C'、'D' になった場合、データ 'B'、'C' は更新され、データ 'A' は削除され、データ 'D' が追加されます。初回にsetOptionを使用する場合、古いデータがないため、すべてのデータが追加されます。ECharts は、3つの状態に応じて、それぞれ enter アニメーション、update アニメーション、leave アニメーションを適用します。

これらの設定はすべて、すべてのシリーズおよびコンポーネントのoptionの最上位レベルで設定するか、各シリーズごとに個別に設定できます。

アニメーションをオフにしたい場合は、option.animationをfalseに設定するだけで済みます。

アニメーション期間

animationDurationとanimationDurationUpdateは、アニメーションの期間をms単位で設定するために使用されます。アニメーション期間を長く設定すると、ユーザーはトランジションアニメーションの効果をより明確に確認できますが、時間が長すぎると、アニメーションが完了するのを待つ間にユーザーがイライラする可能性があることに注意する必要があります。

0に設定するとアニメーションがオフになります。これは、enter アニメーションまたは update アニメーションのみをオフにする場合に、対応する設定を個別に0に設定することで実現できます。

アニメーションイージング

animationEasingおよびanimationEasingUpdate設定項目は、アニメーションのイージング関数を設定するために使用されます。これは、アニメーション時間を入力し、アニメーションの進捗状況を出力する関数です。

(t: number) => number;

'cubicIn'や'cubicOut'などの一般的なアニメーションイージング関数は ECharts に組み込まれており、直接使用できます。

組み込みのイージング関数。

アニメーション遅延

animationDelayとanimationDelayUpdateは、アニメーション遅延が開始する時間を設定するために使用されます。通常、異なるデータに異なる遅延を設定して、アニメーションをずらす効果を実現するために、コールバック関数を使用します。

var xAxisData = [];
var data1 = [];
var data2 = [];
for (var i = 0; i < 100; i++) {
  xAxisData.push('A' + i);
  data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
  data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5);
}
option = {
  legend: {
    data: ['bar', 'bar2']
  },
  xAxis: {
    data: xAxisData,
    splitLine: {
      show: false
    }
  },
  yAxis: {},
  series: [
    {
      name: 'bar',
      type: 'bar',
      data: data1,
      emphasis: {
        focus: 'series'
      },
      animationDelay: function(idx) {
        return idx * 10;
      }
    },
    {
      name: 'bar2',
      type: 'bar',
      data: data2,
      emphasis: {
        focus: 'series'
      },
      animationDelay: function(idx) {
        return idx * 10 + 100;
      }
    }
  ],
  animationEasing: 'elasticOut',
  animationDelayUpdate: function(idx) {
    return idx * 5;
  }
};var xAxisData = [];
var data1 = [];
var data2 = [];
for (var i = 0; i < 100; i++) {
  xAxisData.push('A' + i);
  data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
  data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5);
}
option = {
  legend: {
    data: ['bar', 'bar2']
  },
  xAxis: {
    data: xAxisData,
    splitLine: {
      show: false
    }
  },
  yAxis: {},
  series: [
    {
      name: 'bar',
      type: 'bar',
      data: data1,
      emphasis: {
        focus: 'series'
      },
      animationDelay: function(idx) {
        return idx * 10;
      }
    },
    {
      name: 'bar2',
      type: 'bar',
      data: data2,
      emphasis: {
        focus: 'series'
      },
      animationDelay: function(idx) {
        return idx * 10 + 100;
      }
    }
  ],
  animationEasing: 'elasticOut',
  animationDelayUpdate: function(idx) {
    return idx * 5;
  }
};

ライブ

アニメーションのパフォーマンス最適化

データ量が特に多い場合、アニメーションを実行するとパフォーマンス上の問題が発生する可能性があるため、animation: falseを設定してアニメーションをオフにすることができます。

データ量が動的に変化するチャートの場合は、animationThreshold設定を使用することをお勧めします。これにより、キャンバス内のグラフ数がこのしきい値を超えると、EChartsが自動的にアニメーションをオフにして描画パフォーマンスを向上させることができます。これは多くの場合経験的な値であり、EChartsは通常、数千のグラフをリアルタイムでレンダリングできます（デフォルト値も2000として指定されています）。ただし、チャートが複雑な場合、またはユーザー環境が厳しく、ページで同時に他の複雑なコードが多数実行されている場合は、アプリケーション全体の滑らかさを確保するために、この値を下方調整することが適切な場合があります。

アニメーションの終了をリッスンする

アニメーションを使用しない場合、現在のレンダリング結果を取得したい場合があります。ECharts はsetOptionの後にレンダリングを直接実行し、getDataURLメソッドを使用してレンダリング結果を同期的に取得できます。

const chart = echarts.init(dom);
chart.setOption({
  animation: false
  //...
});
// can be executed directly and synchronously
const dataUrl = chart.getDataURL();

ただし、チャートがアニメーション化されている場合、すぐにgetDataURLを実行すると、アニメーションの開始時の画像が返され、最終結果は返されません。したがって、アニメーションが終了したタイミングを知ってからgetDataURLを実行して結果を取得する必要があります。

アニメーションの期間がわかっている場合は、より簡単で強引な方法として、アニメーションの期間に応じてsetTimeoutを使用して実行を遅らせることができます。

chart.setOption({
  animationDuration: 1000
  //...
});
setTimeout(() => {
  const dataUrl = chart.getDataURL();
}, 1000);

または、ECharts が提供するrenderedイベントを使用して、ECharts がアニメーションを完了し、レンダリングを停止したことを判断できます。

chart.setOption({
  animationDuration: 1000
  //...
});

function onRendered() {
  const dataUrl = chart.getDataURL();
  // ...
  // This event will also be triggered if there is a subsequent interaction and the interaction is redrawn, so it needs to be removed when you're done using it
  chart.off('rendered', onRendered);
}
chart.on('rendered', onRendered);

貢献者 GitHubでこのページを編集

pissang