數據可視化在過去的幾年中得到了長足的發展。開發者對於可視化產品的期待不再是簡單的圖表創建工具，而在交互、性能、數據處理等方面有了更高級的需求。

Apache ECharts 始終致力於讓開發者以更方便的方式創造靈活豐富的可視化作品。在最新推出的Apache ECharts 5，我們著力加強了圖表的敘事能力，讓開發者可以以更簡單的方式，講述數據背後的故事。

“表·達”是Apache ECharts 5 的核心，通過五大模塊、十五項特性的全面升級，圍繞可視化作品的敘事表達能力，讓圖“表”更能傳“達”數據背後的故事，幫助開發者更輕鬆地創造滿足各種場景需求的可視化作品。

Apache ECharts 5 將於2021.01.28 20:00 進行線上發布會。屆時，將由眾多Apache ECharts PMC 和Committers 為大家詳細介紹ECharts 5 的新功能，幫助大家快速上手擁有強大敘事能力的Apache ECharts 5！

趕緊關注直播間，設個⏰一起來學習吧！

下面，我們來簡略了解下Apache ECharts 5 的新功能。

動態敘事

動畫對於人類認知的重要性不言而喻。在之前的作品中，我們會通過初始化動畫和過渡動畫幫助用戶理解數據變換之間的聯繫，讓圖表的出現和變換顯得不那么生硬。這次，我們更是大幅度增強了我們的動畫敘事能力，。希望能夠進一步發揮動畫對於用戶認知的幫助作用，借助圖表的動態敘事功能，幫助用戶更容易理解圖表背後表達的故事。

動態排序圖

Apache ECharts 5 新增支持動態排序柱狀圖（bar-racing）以及動態排序折線圖（line-racing），幫助開發者方便地創建帶有時序性的圖表，展現數據隨在時間維度上的變化，講述數據的演變過程。

動態排序圖展現了不同的類目隨著時間衍變在排名上的改變。而開發者只需要通過幾行簡單的配置項在ECharts 中開啟這樣的效果。

自定義系列動畫

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

想像一下，用這些動態效果，你可以創造出多麼令人稱奇的可視化作品！

視覺設計

視覺設計的作用並不僅僅是為了讓圖表更好看，更重要的是，符合可視化原理的設計可以幫用戶更快速地理解圖表想表達的內容，並且盡可能消除不良設計帶來的誤解。

默認設計

我們發現，有很大一部分開發者使用了ECharts 默認的主題樣式，因而設計優雅、符合可視化原理的默認主題設計是非常重要的。在Apache ECharts 5 中，我們重新設計了默認的主題樣式，針對不同的系列和組件分別做了優化調整。以主題色為例，我們考量了顏色之間的區分度、與背景色的對比度、相鄰顏色的和諧度等因素，並且確保色覺辨識障礙人士也能清楚地區分數據。

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

對於有進一步需要高對比度的場景，我們額外提供了高對比度主題樣式，開發者可以方便地為需要特殊幫助的人群提供特殊的樣式。

對於dataZoom，時間軸等交互組件，我們也設計了全新的樣式並且提供了更好的交互體驗：

標籤

標籤是圖表中的核心元素之一，清晰而明確的標籤可以幫助用戶對數據有更準確的理解。 Apache ECharts 5 提供了多種新的標籤功能，讓密集的標籤能清晰顯示、準確表意。

Apache ECharts 5 可以通過一個配置項開啟自動隱藏重疊的標籤。對於超出顯示區域的標籤，可以選擇自動截斷或者換行。密集的餅圖標籤，現在有了更美觀的自動排布。

這些功能可以幫助避免文字過於密集影響可讀性。並且，無需開發者編寫額外的代碼就能默認生效，大大簡化了開發者的開發成本。

我們也提供了多個配置項來讓開發者主動控制標籤的佈局策略，例如標籤拖動、整體顯示在畫布邊緣，用引導線和圖形元素連接，並且仍可聯動高亮表達關聯關係。

新的標籤功能可以讓你在移動端這樣局限的空間內也可以有很優雅的標籤展示：

時間軸

Apache ECharts 5 帶來了適於表達時間標籤刻度的時間軸。時間軸的默認設計更突出重要的訊息，並且提供了更靈活的定制化能力，讓開發者根據不同的需求定制時間軸的標籤內容。

首先，時間軸不再如之前般絕對平均分割，而是選取年、月、日、整點這類更有意義的點來展示，並且能同時顯示不同層級的刻度。標籤的formatter支持了時間模版（例如{yyyy}-{MM}-{dd} ），並且可以為不同時間粒度的標籤指定不同的formatter ，結合已有的富文本標籤，可以定制出醒目而多樣的時間效果。

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

提示框

提示框（Tooltip）是一種最常用的可視化組件，可以幫助用戶交互式地了解數據的詳細訊息。在Apache ECharts 5 中，我們對提示框的樣式進行了優化，通過對字體樣式，顏色的調整，新增加箭頭，跟隨圖形顏色的邊框色等功能，讓提示框的默認展示優雅又清晰。並且改進了富文本的渲染邏輯，確保顯示效果與HTML 方式一致，讓用戶在不同場景下可以選擇不同的技術方案實現同樣的效果。

除此之外，我們這次也加上了提示框內的列表按照數值大小或者類目順序排序的功能。

儀錶盤

我們看到社區用戶創建了很多酷炫的儀錶盤圖表，但是他們的配置方式往往比較複雜而取巧。因此，我們對儀錶盤的功能作了全面升級，支持了圖片或者矢量路徑繪製指針、也支持了錨點（anchor）配置項、進度條（progress）、圓角效果等等配置項。

不同樣式的儀錶盤指針：

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

扇形圓角

圓角可以帶來更美觀而柔和的視覺，也能夠賦予更多的創造力。 Apache ECharts 5 支持了餅圖、旭日圖、矩形樹圖的扇形圓角。可不要小看了簡單的圓角配置項，合理地搭配其他的效果，就可以形成更具個性的的可視化作品。

交互能力

可視化作品的交互能力幫助用戶探索了解作品，加深對於圖表主旨的理解。

狀態管理

在ECharts 4 中有高亮（emphasis）和普通（normal）兩個交互的狀態，在鼠標移到圖形上的時候會進入高亮狀態以區分該數據，開發者可以分別設置這兩個狀態的顏色，陰影等樣式。

這次在Apache ECharts 5中，我們在原先的鼠標hover高亮的基礎上，新增加了淡出其它非相關元素的效果，從而可以達到聚焦目標數據的目的。

比如在這個柱狀圖的例子中，鼠標移到一個系列上的時候，其它非相關的系列就會淡出，從而可以更清晰的突出聚焦系列中數據的對比。在關係圖，樹圖，旭日圖，桑基等更複雜數據結構的圖上，也可以通過淡出非相關元素來觀察數據之間的聯繫。而且顏色，陰影等在高亮（emphasis）中可以設置的樣式，現在也可以在淡出（blur）狀態中設置了。

除此之外，我們為所有系列還添加了點擊選中這個之前只有在餅圖、地圖等少數係列中才能開啟的交互，開發者可以設置為單選或多選模式，並且通過監聽selectchanged事件獲取到選中的所有圖形然後進行更進一步的處理。與高亮和淡出一樣，選中的樣式也可以在select中配置。

性能提升

臟矩形渲染

Apache ECharts 5 新支持了臟矩形渲染，解決只有局部變化的場景下的性能瓶頸。在使用Canvas 渲染器時，臟矩形渲染技術探測並只更新視圖變化的部分，而不是任何變動都引起畫布完全重繪。這能在一些特殊場景下幫助提高渲染幀率，例如在圖形很多時候，鼠標頻繁觸發一些圖形高亮的場景。以往這類場景，會使用額外的Canvas 層以優化性能，但是這種方式不是所有場景都通用，而且對於復雜的樣式的效果並不理想。臟矩形渲染很好地同時滿足了性能和顯示正確。

臟矩形的可視化演示，紅色框選部分為該幀重繪區域：

大家在新的範例頁面選擇開啟臟矩形優化就可以看到該效果。

實時時序數據的折線圖性能優化

除此之外，海量數據下折線圖的性能也有了大幅度的性能提升。我們經常碰到大量的實時時序數據的高性能繪製的需求，這些數據可能需要幾百或者幾十毫秒更新一次。

Apache ECharts 5 對這些場景下的CPU 消耗、內存佔用、初始化時間都進行了深度的優化，使得百萬量級的數據也能做到實時的更新（每次更新耗時少於30ms），甚至對於千萬級的數據，也可以在1s 內渲染完，並且保持很小的內存佔用以及流暢的提示框（tooltip）等交互。

開發體驗

我們希望如此強大的可視化工具可以被更多開發者以更簡單的方式使用，因而開發者的開發體驗也是我們非常關注的方面。

數據集

ECharts 5 加強了數據集的數據轉換能力，讓開發者可以使用簡單的方式實現常用的數據處理，如：數據過濾（filter）、排序（sort）、聚合（aggregate）、直方圖（histogram）、簡單聚類（clustering）、回歸線計算（regression）等。開發者可以用統一的聲明式方式來使用這些功能，可以方便地實現常用的數據操作。

國際化

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 重構

在近8 年的時間裡，Apache ECharts 已經發展成一個非常複雜的可視化庫了，為了後續可以更安全高效的進行重構和新功能的開發，我們在Apache ECharts 5 的開發之初，使用TypeScript 對代碼進行了重寫，TypeScript 所帶來的強類型讓我們更有信心地在ECharts 5 開發的時候對代碼進行大刀闊斧的重構以實現更多令人激動人心的特性。

對於開發者，我們也可以從TypeScript代碼直接生成更好更符合代碼的DTS類型描述文件。在此之前，ECharts的類型描述文件一直是由社區開發者幫我們維護並發佈到DefinityTyped ，這個有著不小的工作量，非常感謝大家的貢獻。

除此之外，如果開發者的組件是按需引入的，我們還提供了一個ComposeOption類型方法，可以組合出一個只包含了引入組件的配置項類型，可以帶來更嚴格的類型檢查，幫助你提前檢測到未引入的組件類型。

可訪問性

Apache ECharts 一直非常重視無障礙設計，我們希望讓視覺障礙人士也能平等了解圖表傳遞的訊息。並且也希望圖表的開發者能以極低的開發成本實現這一點，因而有利於讓開發者更願意為視覺障礙人士提供支持。

在上一個大版本中，我們支持了根據不同的圖表類型和數據自動一鍵智能生成圖表描述的功能，幫助開發者非常方便地支持圖表的DOM 描述訊息。在ECharts 5 中，我們也做了更多提高可訪問性的設計，幫助視覺障礙人士更好地理解圖表內容。

主題配色

我們在設計新版默認主題樣式的時候，將無障礙設計作為一個重要的考量依據，對顏色的明度和色值都進行反複測試，幫助視覺辨識障礙用戶清楚地識別圖表數據。​

並且，針對有更進一步無障礙需求的開發者，我們還提供了特殊的高對比度主題，以更高對比度顏色的主題將數據作進一步區分。

貼花圖案

ECharts 5 還新增提供了貼花的功能，用圖案輔助顏色表達，進一步幫助用戶區分數據。

此外，貼花圖案還能在一些其他的場景下提供幫助，比如：在報紙、書籍之類只有單色或者非常少的顏色的印刷品中，幫助更好地區分數據；用圖形元素方便用戶對數據產生更直觀的理解等。

小結

除了以上介紹的功能，Apache ECharts 還在非常多的細節中做了改進，幫助開發者更輕鬆地創建默認好用、配置靈活的圖表，用圖表講述數據背後的故事。

如果想要了解更多細節，一定不要錯過Apache ECharts 5官方發布會哦！

感謝所有使用過ECharts，甚至參與過社區貢獻的開發者，正是你們才使得Apache ECharts 5 成為可能。我們會以更大的熱情投入到未來的開發中，Apache ECharts 也會以更大的誠意和大家在6 相見！