資料轉換

Apache EChartsTM 會在新增、更新和移除資料時，對位置、縮放和形狀應用轉換。這會使圖表更加平滑，並更好地顯示資料之間的關係。通常開發人員不需要擔心如何使用動畫，只需使用 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);
即時

轉換的設定

由於新增和更新資料通常需要不同的動畫，例如，我們希望資料更新動畫時間較短，ECharts 會區分兩種動畫設定。

  • 對於新增資料，我們應用進入動畫，使用 animationDuration、animationEasing 和 animationDelay 分別設定動畫的持續時間、緩和效果和延遲。
  • 對於更新資料，我們將應用更新動畫，使用 animationDurationUpdate、animationEasingUpdate 和 animationDelayUpdate 分別設定動畫的持續時間、緩和效果和延遲。

如您所見，更新動畫設定是具有 Update 後綴的進入動畫設定。

每次在 ECharts 中使用 setOption 時，資料都會與上次更新的資料進行比較，並根據比較結果對資料執行三種狀態：新增、更新和移除。此比較是基於資料的 name 進行的，例如，如果上次更新有三個 names 分別為 'A'、'B'、'C'，而新的更新變成了 'B'、'C'、'D'，則資料 'B'、'C' 將被更新，資料 'A' 將被移除，資料 'D' 將被新增。如果是第一次 setOption，由於沒有舊資料，所有資料都會被新增。根據這三種狀態，ECharts 將分別應用進入動畫、更新動畫和離開動畫。

所有這些設定都可以在 option 的頂層設定，適用於所有系列和元件，或分別用於每個系列。

如果我們想要關閉動畫，只需將 option.animation 設定為 false 即可。

動畫持續時間

animationDuration 和 animationDurationUpdate 用於設定動畫的持續時間，單位為 毫秒。設定較長的動畫持續時間可讓使用者更清楚地看到轉換動畫的效果，但我們也需要注意，時間過長可能會讓使用者在等待動畫完成時失去耐心。

設定為 0 將關閉動畫，這可以透過在我們只想關閉進入動畫或更新動畫時，將相應的設定單獨設定為 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;
  }
};
即時

動畫的效能最佳化

當資料量特別大時，執行動畫可能會出現效能問題，因此我們可以設定 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 pissang