ECharts 5 中的新功能

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

Apache ECharts 一直致力於讓開發人員更容易建立靈活且豐富的視覺化效果。在最新的 Apache ECharts 5 版本中，我們著重於增強圖表的敘事性，讓開發人員能以更簡單的方式講述資料背後的故事。

「Apache ECharts 5 的核心是「展現，而非敘述」，這是圍繞視覺化敘事性的五個主題和 15 個功能的全面升級，讓圖表能更好地講述資料背後的故事。它幫助開發人員更輕鬆地建立符合各種情境需求的視覺化效果。

敘事性

動畫對人類認知的重要性怎麼強調都不為過。在我們之前的工作中，我們使用初始化動畫和過渡動畫來幫助使用者理解資料轉換之間的關聯，使圖表的外觀和轉換看起來不那麼生硬。這次，我們甚至更顯著地增強了動畫功能。我們希望進一步利用動畫的作用來幫助使用者的認知，並幫助他們透過圖表的動態敘事功能更容易地理解圖表背後的故事。

長條圖/折線圖競賽

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

動態排序圖表顯示不同類別在排名中隨時間的推移。開發人員可以使用幾行簡單的設定程式碼在 ECharts 中啟用此效果。

自訂序列動畫

除了動態排序圖表外，Apache ECharts 5 在自訂序列中提供了更豐富且更強大的動畫，支援標籤值文字的插值動畫、圖形的變形、組合、分離和其他效果的過渡動畫。

想像一下，您可以使用這些動態效果創造出多麼驚人的視覺化效果！

視覺設計

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

整體設計

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

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

對於折線圖，y 軸 (value 軸) 的軸線和軸刻度預設會隱藏，這是一種直觀的樣式變更。看看下圖，左邊是 v4 中折線圖的預設樣式，右邊是 v5 中的新樣式。事實上，我們僅透過分割線就可以知道這些值，因此我們希望隱藏不必要的元素，以更清晰的方式傳遞圖表訊息。

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

標籤

標籤是圖表的核心元素之一，清晰明確的標籤有助於使用者更準確地理解資料。Apache ECharts 5 提供了各種新的標籤功能，允許清楚顯示密集標籤並準確表示。

Apache ECharts 5 可以透過設定項目啟用自動隱藏重疊標籤。對於超出顯示區域的標籤，您可以選擇自動截斷或換行。密集的圓餅圖標籤現在具有更美觀的自動佈局。

這些功能有助於避免文字過於密集而影響可讀性。而且，開發人員無需編寫額外的程式碼即可讓它們預設生效，從而大大簡化了開發人員的開發成本。

我們還提供了幾個設定選項，讓開發人員可以主動控制標籤的佈局策略，例如標籤拖曳、在畫布邊緣整體顯示、與引導線和圖形元素連接，並且仍然連結以突出顯示相關關係。

新的標籤功能可讓您即使在有限的行動空間中也能呈現非常清晰的標籤

時間軸

Apache ECharts 5 帶來了適合表達時間戳記刻度的時間軸。時間軸的預設設計更突出了重要資訊，並提供了更靈活的自訂功能，讓開發人員可以根據不同的需求調整時間軸的標籤內容。

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

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

提示框

提示框是最常用的視覺化元件之一，可幫助使用者互動式地了解資料的詳細資訊。在 Apache ECharts 5 中，我們最佳化了提示框的樣式，透過調整字體樣式、顏色、指向圖形的箭頭、遵循圖形顏色的邊框顏色和其他功能，使提示框的預設顯示優雅而清晰。富文本的渲染邏輯已得到改進，以確保顯示與 HTML 方式一致，允許使用者選擇不同的技術解決方案以在不同的情境中實現相同的效果。

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

儀表盤

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

不同樣式的儀表盤指標。

這些升級不僅讓開發人員可以使用更簡單的設定項目實現很酷的效果，還帶來了更豐富的自訂功能。

圓角

Apache ECharts 5 支援圓餅圖、旭日圖和樹狀圖的圓角。不要低估圓角設定的簡單性，但將它們與其他效果結合起來可以建立更個人化的視覺化效果。

互動性

視覺化的互動性有助於使用者探索作品並加深對圖表主要觀點的理解。

多狀態

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

這次在 Apache ECharts 5 中，我們在原始滑鼠懸停突出顯示中新增了模糊其他不相關元素的新效果，以便可以專注於目標資料。

舉例來說，在這個長條圖範例中，當滑鼠懸停在某個系列上時，其他不相關的系列會淡出，從而更清楚地突顯所關注系列中的數據比較。在具有更複雜數據結構的圖表（例如關聯圖、樹狀圖、旭日圖、桑基圖等）上，也可以透過淡出不相關的元素來查看數據之間的關聯。此外，現在可以在 blur 中設定顏色、陰影和其他可以在 emphasis 中設定的樣式。

此外，我們在所有系列中新增了點擊選取功能，這項互動先前僅在少數系列（例如圓餅圖和地圖）中提供，讓開發人員可以將其設定為單選或多選模式，並監聽 selectchanged 事件以取得所有選取的形狀以進行進一步處理。與 emphasis 和 blur 一樣，選取樣式也可以在 select 中設定。

效能改進

髒矩形渲染

Apache ECharts 5 新增了對髒矩形渲染的支援，以解決大型場景中僅有局部變更時的效能瓶頸。當使用 Canvas 渲染器時，髒矩形渲染技術會偵測並僅更新視圖中已變更的部分，而不是讓任何變更都導致整個畫布的完整重繪。這有助於提高某些特殊情境下的渲染幀率，例如滑鼠頻繁觸發多次圖形突出顯示的場景。過去，對於此類場景，會使用額外的 Canvas 圖層來優化效能，但這種方法並非適用於所有場景，且對於複雜的樣式效果不佳。髒矩形渲染在效能和顯示正確性方面都做得很好。

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

您可以在新的範例頁面上啟用髒矩形優化來查看效果。

即時時間序列數據的折線圖效能優化

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

Apache ECharts 5 在這些場景中深入優化了 CPU 消耗、記憶體使用量和初始化時間，使得能夠針對數百萬條數據進行即時更新（每次更新少於 30 毫秒），甚至在 1 秒內渲染數千萬條數據，且記憶體使用量低且工具提示互動順暢。

開發體驗

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

數據集

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 中與大家再次相見！