Apache ECharts 5 震撼發佈：五大模塊，十五項新特性全面升級！

 

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

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 相見！