ECharts 5 新特性

在過去的幾年裡，資料視覺化已經取得了長足的進步。開發者不再期望視覺化產品只是簡單的圖表建立工具，而是在互動、效能、資料處理等方面有了更高階的需求。

Apache ECharts 一直致力於讓開發者更輕鬆地建立靈活、豐富的視覺化作品。在最新發布的 Apache ECharts 5 中，我們著重增強了圖表的敘事能力，讓開發者能夠以更簡單的方式講述資料背後的故事。

Apache ECharts 5 的核心是“Show, do not tell”，圍繞視覺化的敘事能力，對五個模組、十五項特性進行了全面升級，讓圖表更好地講述資料背後的故事。它幫助開發者更輕鬆地建立滿足各種場景需求的視覺化作品。

敘事性

動畫對於人類認知的重要性不言而喻。在我們以往的工作中，我們使用初始化動畫和過渡動畫來幫助使用者理解資料變換之間的聯絡，使得圖表的出現和變換不那麼僵硬。這次，我們更是大幅增強了我們的動畫能力。我們希望能夠進一步發揮動畫在幫助使用者認知方面的作用，藉助圖表的動態敘事功能，幫助他們更輕鬆地理解圖表背後的故事。

動態排序圖

Apache ECharts 5 新增了對動態排序柱狀圖和動態排序折線圖的支援，以幫助開發者輕鬆建立顯示資料隨時間變化的時間序列圖表，並講述資料的演變過程。

動態排序圖展示了不同類別在排名中隨時間的變化。開發者只需幾行簡單的配置程式碼，就可以在 ECharts 中啟用這種效果。

自定義系列動畫

除了動態排序圖，Apache ECharts 5 在自定義系列中提供了更豐富、更強大的動畫，支援標籤數值文字的插值動畫，以及圖形元素的變形（morph）、合併（combine）、分離（separate）等效果的過渡動畫。

想象一下，利用這些動態效果，你能創造出多麼驚豔的視覺化作品！

視覺設計

視覺設計的作用不僅僅是讓圖表更好看，更重要的是，符合視覺化原則的設計可以幫助使用者更快地理解圖表想要表達的內容，並儘可能消除因不良設計可能帶來的誤解。

整體設計

我們發現，很大一部分開發者使用的是 ECharts 的預設主題樣式，因此，擁有一套優雅的預設主題設計至關重要。在 Apache ECharts 5 中，我們重新設計了預設主題樣式，針對不同的圖表和元件進行了最佳化。例如，我們考慮了顏色之間的區分度、與背景色的對比度、與相鄰顏色的和諧度等因素，並確保色盲人士也能清晰地分辨資料。

讓我們以最常用的柱狀圖為例，看看新版的淺色和深色主題樣式。

對於折線圖，一個直觀的樣式變化是 y 軸（數值軸）的軸線和刻度線預設被隱藏了。看下圖，左邊是 `v4` 版本中折線圖的預設樣式，右邊是 `v5` 的新樣式。實際上，我們僅透過分割線就已能大致瞭解數值，因此我們希望能隱藏不必要的元素，以更清晰的方式傳遞圖表資訊。

對於資料區域縮放、時間軸等互動元件，我們也設計了新的樣式，並提供了更好的互動體驗。

時間軸

Apache ECharts 5 帶來了一個適合表達時間戳刻度的時間軸。時間軸的預設設計更突出地顯示了重要資訊，並提供了更靈活的定製能力，讓開發者可以根據不同需求定製時間軸的標籤內容。

首先，時間軸不再像以前那樣絕對均勻地分割，而是會選擇更有意義的點，如年、月、日和整點來顯示，並且可以同時顯示不同層級的刻度。標籤的 `formatter` 支援時間模板（例如 `{yyyy}-{MM}-{dd}`），並且可以為不同時間粒度的標籤指定不同的 `formatter`，這可以與富文字標籤結合，創造出引人注目且多樣的時序效果。

在不同 dataZoom 粒度下時間刻度的顯示。

Tooltip 是最常用的視覺化元件之一，幫助使用者互動式地瞭解資料細節。在 Apache ECharts 5 中，我們優化了 tooltip 的樣式，透過調整字型樣式、顏色、指向圖形的箭頭、邊框顏色跟隨圖形顏色等特性，使 tooltip 的預設顯示更加優雅和清晰。改進了富文字的渲染邏輯，確保其顯示方式與 HTML 保持一致，讓使用者可以在不同場景下選擇不同的技術方案來實現相同的效果。

除此之外，這次我們還增加了在提示框中按數值大小或類目順序對列表進行排序的功能。

儀表盤

我們看到社群使用者建立了很多炫酷的儀表盤圖，但它們的配置方式通常複雜且取巧。因此，我們升級了儀表盤，支援使用圖片或向量路徑繪製指標、錨點配置、進度條、圓角效果等。

不同樣式的儀表盤指標。

這些升級不僅讓開發者能夠用更簡單的配置項實現酷炫的效果，也帶來了更豐富的定製能力。

圓角

Apache ECharts 5 支援為餅圖、旭日圖和矩形樹圖設定圓角。不要小看這簡單的圓角配置，將它們與其他效果結合，可以創造出更具個性的視覺化作品。

互動性

視覺化的互動性幫助使用者探索作品並加深對圖表主旨的理解。

多狀態

在 ECharts 4 中，有兩種互動狀態：`emphasis` 和 `normal`。當滑鼠懸停時，圖形會進入 `emphasis` 狀態以區分資料。

這次在 Apache ECharts 5 中，我們在原有的滑鼠懸停高亮的基礎上，新增了**模糊**其他不相關元素的效果，從而使目標資料得以聚焦。

例如，在這個條形圖示例中，當滑鼠懸停在一個系列上時，其他不相關的系列會淡出，從而更清晰地突出所聚焦系列的資料對比。在關係圖、樹圖、旭日圖、桑基圖等資料結構更復雜的圖表上，也可以透過淡出不相關元素來觀察資料之間的聯絡。此外，可以在 `emphasis` 中設定的顏色、陰影等樣式，現在也可以在 `blur` 中設定。

此外，我們為所有系列添加了**點選選中**功能，這是一種以前只在少數系列如圖餅圖和地圖中可用的互動方式，允許開發者將其設定為單選或多選模式，並監聽 `selectchanged` 事件以獲取所有選中的圖形進行進一步處理。與 `emphasis` 和 `blur` 一樣，選中樣式也可以在 `select` 中配置。

效能提升

髒矩形渲染

Apache ECharts 5 新增了對髒矩形渲染的支援，以解決只有區域性變化的大場景下的效能瓶頸。當使用 Canvas 渲染器時，髒矩形渲染技術會檢測並只更新檢視中發生變化的部分，而不是任何變化都導致整個畫布的重繪。這有助於在某些特殊場景下提高渲染幀率，例如滑鼠頻繁觸發大量圖形高亮的場景。過去對於這類場景，通常使用額外的 Canvas 層來最佳化效能，但這種方法並不適用於所有場景，且對於複雜樣式效果不佳。髒矩形渲染很好地兼顧了效能和顯示正確性。

髒矩形的視覺化演示，紅色框區域為該幀重繪的區域。

你可以在新的示例頁面上啟用髒矩形最佳化來檢視效果。

即時時序資料折線圖效能最佳化

此外，大資料量折線圖的效能也得到了顯著提升。我們經常會遇到需要高效能繪製大量即時時序資料的需求，這些資料每隔幾百或幾十毫秒就會更新一次。

Apache ECharts 5 在這些場景下深度優化了 CPU 消耗、記憶體佔用和初始化時間，實現了百萬級資料的即時更新（每次更新小於 30ms），甚至千萬級資料也能在 1s 內完成渲染，記憶體佔用低，且 tooltip 互動流暢。

開發體驗

我們希望如此強大的視覺化工具能被更多開發者以更簡單的方式使用，因此開發者體驗對我們來說也是一個非常重要的方面。

資料集

ECharts 5 增強了資料集的資料轉換能力，讓開發者能以簡單的方式實現篩選、排序、聚合、直方圖、簡單聚類、迴歸等常見的資料處理。開發者可以統一且宣告式地使用這些功能，輕鬆實現常見的資料操作。

國際化

ECharts 原有的國際化實現方式是根據不同語言引數打包成不同的發行檔案。這種方式下，動態語言和主程式碼繫結在一起，使用 ECharts 時切換語言的唯一方法是重新載入不同語言版本的 ECharts 發行版。

因此，從 Apache ECharts 5 開始，動態語言與主程式碼分離。要切換語言，只需載入對應的語言包，使用 `registerLocale` 函式像掛載主題一樣掛載語言物件，然後重新初始化即可完成語言切換。

// import the lang object and set when init
echarts.registerLocale('DE', lang);
echarts.init(DomElement, null, {
  locale: 'DE'
});

TypeScript 重構

為了能更安全、更高效地持續重構和開發新功能，我們從使用 TypeScript 重寫程式碼開始 Apache ECharts 5 的開發。TypeScript 帶來的強型別讓我們有信心在 ECharts 5 的開發過程中大刀闊斧地重構程式碼，以實現更激動人心的功能。

對於開發者來說，我們也可以直接從 TypeScript 程式碼生成更好、更符合程式碼的 `DTS` 型別定義檔案。在此之前，ECharts 的型別定義檔案一直由社群開發者維護併發布到 DefinitelyTyped，這是一項繁重的工作，感謝你們的貢獻。

此外，如果開發者按需引入元件，我們提供了一個 `ComposeOption` 型別方法，可以組合出一個只包含所引入元件的配置項型別，這能帶來更嚴格的型別檢查，幫助你提前發現未引入的元件型別。

無障礙

Apache ECharts 一直非常重視無障礙設計，我們希望圖表傳達的資訊能被平等地獲取。我們也希望圖表開發者能以極低的開發成本實現這一點，從而讓開發者更願意支援無障礙化。

在上一個大版本中，我們支援了根據不同圖表型別和資料自動智慧生成圖表描述，讓開發者可以非常容易地支援圖表的 DOM 描述資訊。在 ECharts 5 中，我們也做了更多的無障礙改進，以幫助視障人士更好地理解圖表內容。

主題顏色

在設計新的預設主題時，我們考慮了無障礙性，我們反覆測試了顏色的亮度和色值，以幫助無障礙使用者清晰地識別圖表資料。

此外，對於有進一步無障礙需求的開發者，我們還提供了專門的高對比度主題，用對比度更高的顏色來進一步區分資料。

貼花圖案

ECharts 5 還提供了一個新的貼花功能，透過使用圖案來輔助顏色表示，幫助使用者進一步區分資料。

此外，貼花圖案在其他一些場景下也很有幫助，例如：在只有單色或極少顏色的報紙、書籍等印刷品中幫助更好地區分資料；使用圖形元素幫助使用者更直觀地理解資料。

總結

除了上述功能外，Apache ECharts 在大量細節上進行了改進，以幫助開發者更輕鬆地創建出預設效果好、配置靈活、能用圖表講述資料背後故事的作品。

感謝所有使用 ECharts，甚至參與社群貢獻的開發者，是你們讓 Apache ECharts 5 成為可能。我們將以更大的熱情投入到未來的開發中，我們 6.0 再見！

貢獻者在 GitHub 上編輯此頁

pissang plainheart timonla