可視化了解一下？ECharts 4.0最全技術攻略

科技 04-08

2018 年 1 月 16 日，百度 EFE團隊正式發布了旗下知名開源產品 ECharts 的最新大版本 4.0，新版本在產品的性能、功能、易用性等各個方面進行了全面提升，標誌著百度在可視化領域又一突破性里程碑的到來。

3月 31日，由百度開發者中心主辦、極客邦科技承辦、百度創新中心贊助的第 77期百度技術沙龍邀請了來自百度高級技術經理祖明、百度資深前端研發工程師宿爽、百度高級前端研發工程師張雯莉、百度高級前端研發工程師王俊婷、百度資深前端研發工程師沈毅和百度高級前端研發工程師李德清六位講師，從 ECharts 的產品特性、技術實現、可視化實踐、開源社區建設等四個維度出發，全面介紹如何更好運用 ECharts 來讓用戶洞察數據，為聽眾帶來一場深入了解 ECharts的分享盛宴。

ECharts開源之路

百度高級技術經理祖明做了開場演講，他首先介紹了百度開源的 ECharts項目的發展史，在 2013年 6月 ECharts 1.0 發布到 2018年 1月 ECharts 4.0 發布的四年時間裡，ECharts項目累計迭代了 64個版本，Github 關注數達到 26,530，受到了來自業界權威的關注和廣泛好評。

2013年 6月，ECharts 發布 1.0版本；2014年 6月，ECharts發布 2.0版本，在 1.0的基礎上使性能有 3+倍的提升，增加直角系全圖表，支持大規模數據，新增時間軸、儀錶盤、漏斗圖、異變地圖並且支持 svg擴展；隨後，團隊根據前端技術發展的趨勢及用戶的需求，對 ECharts整體的技術架構進行了極大的重構優化，在 2016年 1月發布了 ECharts 3.0，3.0無論在功能上、性能上、包括產品的樣式與交互都有著極大的提升。

今年的 1月 16日，ECharts 4.0橫空出世，八項新特性，讓產品更上一個台階，ECharts 4.0 希望打造一款能讓更多的人在更多的場景都能享受到數據可視化帶來的價值，幫助人們探索世界、了解真實。

ECharts 4.0 最大的亮點是帶來了 8 項堪稱「黑科技」的全新特性：

千萬級數據可視化渲染能力

SVG + Canvas 雙引擎

全新旭日圖

數據與樣式分離

更扁平的配置項

無障礙訪問支持

微信小程序支持

PowerPoint 插件

ECharts的未來

近日，全球著名開源社區 Apache基金會宣布「百度開源的 ECharts項目全票通過進入 Apache孵化器」。這是百度第一個進入國際頂級開源社區的項目，也標誌著百度開源正式進入開源發展的快車道。在未來，ECharts團隊會持續維護，希望有更多的人來加入，為開發者提供更好的體驗。

ECharts 4.0 核心特性解析

ECharts的成功和廣泛應用，必然離不開其顛覆性的功能設計和技術特徵。ECharts資深研發工程師宿爽和張雯莉以 ECharts 4.0新的技術特徵為起點，介紹新版本在大數據渲染、數據集、跨平台、無障礙訪問等多個技術特性的使用場景和設計原理。

大數據量渲染

大數據量渲染在本文中指的是千到千萬的數據在瀏覽器中的渲染和交互，ECharts4.0在優化這些事情上下了很大的功夫。數據可視化以瀏覽器作為一個重要的輸出方式，但瀏覽器在性能上有一定的限制。主要為以下幾個方面：

程序執行的時長。在瀏覽器裡面，JS的執行會阻塞渲染和用戶交互的響應。

內存的佔用。大數據的運算可能會引起瀏覽器崩潰，也有可能會因 GC開銷過大導致運行不流暢。

網路載入。對於百兆千兆的數據，文件體積有可能數十甚至上百 MB，如果在網路上展示，則不能在數據全部下載完成才開始渲染。

ECharts 對這些做了一系列優化，包括：基於場景特點的優化、程序層面的優化、用戶感官的優化、載入的優化：

基於場景特點的優化

以圖形的簡化為例，講述了 ECharts 是如何基於場景特點進行優化。如下圖是一個 K線圖，每個圖形的複雜結構在渲染時會比繪製簡單圖形需要更長的時間，導致大數據量時的交互卡頓。而當實際縮放到一定程度時，將這些圖形簡化成線，則會較大提高渲染效率。

程序層面的優化

主要從程序結構和代碼表達入手，從而優化程序運行效率。

例如合併路徑，在處理大數據量的時候，主要使用 Canvas。Canvas提供的 API比較底層，需要進行抽象後才能構築複雜的、易維護的應用。ECharts的底層庫 Zrender，用面向對象的方式把被渲染和管理的實體抽象成為圖形元素，每個圖形元素自己負責自己的渲染。抽象的弊端是犧牲了一定性能：渲染時因為每個圖形渲染都要先調用 Canvas API設置樣式，然後構建路徑，頻繁的狀態切換帶來了性能的損失。所以可以對大數據的場景，合併圖形元素，設置一次樣式，構建所有路徑。

另外關於內存的使用，程序的 GC時間過長可能會導致渲染的卡頓。

如下面的截圖，瀏覽器花了 5毫秒的時間進行了 10兆的 Minor GC，時間聽起來不長，實際上如果能保證不卡頓，每一幀的允許時間只有幾十毫秒，那麼 GC消耗的時間就比較可觀了。優化手段，可以是重用對象，減少老生代大對象的頻繁回收。也可以使用 Typed Array或定長 Array，從而降低內存佔用、減少 reallocation。但是帶來的麻煩就是，需要自己管理 array length、擴容、以及手動把多維度數組降為一維。

因此，程序層級的優化是通用的，但是會導致可讀性的破壞，程序魯棒性的降低，所以，這種優化只在必要時使用。

用戶感觀的優化

看如下 ECharts3的渲染流程圖，最左邊是原始的數據，經過從左到右的過程，進行處理數據，布局，渲染，最後畫到屏幕上面。如果出現了交互，就需要重新布局，重新渲染，重走這個過程。在大數據下，整體流程全走完的時間是很可觀的。當時間難於減少時，經常的思路就是流，或者說漸進增量的渲染。

如下是 ECharts4的一個管線圖，最左邊是原始數據，會被 ECharts自動分片，每一個 Chunk從左到右走完整的渲染流程，走完後直接在 SVG或者 Canvas中被渲染出來。然後按時間線往下，下一個 Chunk繼續走。這樣將任務分片進行而非整塊阻塞，使用戶覺得並沒有卡頓。

數據載入的優化

對於百兆千兆的數據，文件體積有可能數十甚至上百 MB。

優化的手段，首先是可以使用 Typed Array直接存成二進位文件而非文本文件，這樣能極大的壓縮數據文件的體積。ECharts已支持直接使用 Typed Array傳入數據。

另外，如果在網路上展示，不宜在數據全部下載完成才開始渲染，ECharts支持了增量渲染後，使用者可以將文件分片載入，載入的文件直接傳入 ECharts進行渲染。

數據集

數據集為數據輸入方式提供了一個新的選項：直接傳入二維表（二維數組或者對象數組）形式的數據，然後通過配置視覺映射（即，哪些行哪些列映射到哪些軸、顏色等）來得到可視化結果。這比較符合數據可視化製作和探索的操作思路：基於一份數據，改變映射規則，發現信息。這也方便了數據和樣式的分別管理，從而易於程序開發。

跨平台圖形介面

什麼是跨平台的圖形介面？

對於一個 2D的圖形介面而言，通常包括矩形、圓形、路徑等這樣一些圖形元素，而圖形元素又包括屬性，並且圖形元素和元素之間可以進行相互的組合，進行遮罩處理等。我們說 ECharts支持跨平台，指的是哪些平台呢？我們考慮了以下幾個方面：首先是瀏覽器，瀏覽器是基於不同的方式進行渲染的，比如 Canvas，SVG，VML，這樣的場景下不同的解析度我們可能希望使用不同的布局方式，通過響應式的方式使得空間的利用更加合理。對於特殊平台，比如說像服務端的渲染以及微信小程序端，也對它進行了兼容。除此之外，還對盲人使用的朗讀設備進行無障礙訪問的設置。

為什麼需要跨平台的圖形介面？

對於用戶，他其實並不關心這個圖表是用 Canvas做的，還是 SVG做的。對他而言，良好的體驗才是最重要的，他只希望能夠看到正常的圖表，並且有良好體驗的圖形渲染結果。至於這個圖形是如何渲染的，他並不關心。而對於開發者而言，他則需要將所有的平台一一實現。

基於這樣的場景，就需要對不同的平台進行兼容，並且不同的平台有些設備存在一些性能上的差異。

ECharts解決方案——ZRender 提供三種渲染器

ECharts使用的是 ZRender底層渲染器。ZRender提供了三種渲染器，分別是 Canvas，SVG和 VML。它對上提供了一種渲染平台無關的圖形介面，對下封裝兼容不同平台的實現演算法。

1、如何支持多種渲染方式？

百度高級前端工程師羨轍舉例說明。首先聲明一個矩形，只需要告訴它 X坐標，Y坐標，寬度以及高度信息，它的渲染引擎就會根據具體的渲染平台去做不同的渲染底層的實現，底層是一個叫路徑代理 PathProxy的類，它會負責記錄這個底層的繪製指令。根據不同的渲染器，底層進行不同的實現。通過這樣的一種方式，不但可以使用一種統一的方式，還可以對於不同的渲染器進行渲染。它還有一個好處是，假設使用 Web Worker進行批量化渲染，也可以根據這個數組實現渲染。

2、如何支持事件處理

為了不同的渲染器有相同的事件處理機制，我們對整個圖表容器綁定了事件。也就是說，對於 SVG、VML 而言，我們不對其 DOM 樹下的每個元素綁定事件。這樣就能和 Canvas 有一套統一的事件處理機制。

在判斷事件將被哪個圖形元素響應的時候，我們會反向循環渲染列表，也就是先判斷滑鼠是否在位於屏幕前面的圖形內。判斷的時候，會先將滑鼠坐標變換到圖形坐標系。這是因為圖形可能是經過平移旋轉縮放的，甚至圖形與圖形之間還可能有組合的變換。將滑鼠變換到圖形坐標系後，我們就可以知道兩者的相對關係，然後先根據包圍盒做粗略的判斷，再根據路徑做精確的判斷。如果滑鼠在該圖形內，則讓這個圖形進行事件分發與冒泡，如果不在，則對位於屏幕後方的元素一一判斷。

3、SVG渲染如何部分更新

Canvas 在渲染的時候會完全重繪，但是它的效率很高。而對於 SVG 而言，比如有一千個點的散點圖，在 DOM 中就有一千個對應的節點。如果每一幀都需要將所有 DOM 元素刪除再重新添加，那麼效率是很低的。

因此，我們維護一個渲染對象列表，每幀將新的渲染對象列表與上一幀的進行 diff，獲得新增、修改、刪除的渲染對象列表，再根據列表對 DOM 相關節點進行調整。

4、SVG渲染如何優化效率

以漸變為例，採用復用漸變定義的實現方式

定義一個 SVG 中中可復用元素的類

漸變、遮罩、陰影等繼承該類

每一個漸變對象共享一個

DOM 節點

更新渲染對象的時候

檢查漸變對象是否生成過 DOM 節點

如果有，則將 fill 或 stroke 設為該 DOM id 對應的 url

如果沒有，則生成一個新的 DOM，並在漸變對象中引用

更新渲染對象的時候

渲染前將所有漸變標記為未被使用

新增或更新對象時，如果有漸變，將其標記為已使用

更新漸變屬性（顏色、位置等）

渲染後未被使用的漸變 DOM 將從中移除

ECharts解決方案——響應式設計支持

ECharts支持三種定位方式：

像素、百分比、位置描述定位

除此之外 ECharts還實現了一種響應式的布局方式，也就是可以將圖表在不同分辨下，使用不同的配置以及布局。這個是如何實現的，看下方右邊這張圖，它由兩部分組成，一個是 baseOption，一個是 media。baseOption說的是對所有解析度都會採用的配置項，而 media是一個數組，它的每一項包括代表了一個解析度的配置情況。每一項包括一個 query和一個 option，query是對每一個解析度採取這個配置，option是在這個解析度下使用哪個配置項。query可以包括它的寬度，高度以及長寬比，並且可以使用最大最小值。

ECharts解決方案——特殊平台及特殊設備

特殊平台的處理

判斷平台

兼容特定方法

無障礙訪問

根據圖表內容生成描述

提供模板供開發者修改

對於盲人朗讀設備使用的無障礙訪問，W3C制定了無障礙互聯網應用規範集的標準。它的目的就是使網頁內容和應用能夠被更多的殘障人士訪問。對於 ECharts而言，希望實現的效果是根據一張圖，生成關於這個圖的數據，並且這個描述不是用戶寫的，而是根據它的配置項來自動生成的。它會綁定在一個屬性 aria-label 上，這個屬性會被盲人的朗讀設備識別並且進行朗讀。但是也會遇到很多難點：不同圖表類型的描述方式不同、不同數量、不同形式數據的描述、生成的描述需符合語法規範、需要簡明扼要地表達圖表內容以及需要支持不同語言。那最終是怎麼實現的呢？ECharts實現了一套基於模板塊的方法，對於不同的圖表類型、數據量、數據形式使用不同的模板，不同的語言也可以由用戶自定義模板。

ECharts教你如何選擇和設計你的圖表

基於可視化理論以及 ECharts的數據可視化設計規範和項目經驗，百度高級前端研發工程師王俊婷為大家詳細的闡述了如何根據不同需求及目的來選擇正確的可視化圖表類型，以及如何正確合理的使用圖表來展現數據。結合實際行業案例總結了數據可視化作品設計的方法和原則，從而幫助大家獲得更好的數據展現效果。

選擇合適的圖表

圖表是為數據服務的，數據類型決定了可選擇的圖表類型。我們首先要從數據本身入手，選擇可滿足其展示需求的圖表類型。按照每個圖表類型的功能及適合的數據類型，將圖表分為比較、關係、佔比、分布、趨勢五大類，並且對每個功能類型所對應的圖表做了總結展示。

聚焦重點

利用一些技術和設計手段，讓用戶的注意力集中在可視化作品中最重要的區域，可以利用使用對比色、使用不同的形狀、位置的變化、添加動效等手段來集中強調關鍵數據。

合理適度

要盡量避免在可視化圖表內注入太多雜亂沒有意義的東西。例如避免過多的圖形元素，避免多度的設計，並且要避免使用不恰當的方式展示過多的數據造成的數據無法清晰地解讀。

保證可視化作品的空間平衡

考慮數據是以一個怎樣的形式呈現在圖表上的，要盡量注意可視化的設計空間被有效平衡地利用，盡量保證重要的元素在中心區域，保證圖表內元素尺寸大小合理，圖表元素的間隔適當。

例如，柱狀圖柱子間的合理的寬度和間隙應該是單個柱子的寬度不小於柱間間隙的兩倍。

遵循習慣與常識

在使用圖標展示數據時，要遵循一些視覺習慣來擺放或排列數據，進而讓用戶可以更正確迅速的解讀數據，並且要避免一些違背常識的數據展示方式。

利用情感共鳴和語義共鳴

顏色是可以用來傳達不同情感的，所以在可視化中針對不同的數據主題選擇其匹配的顏色，例如甜品的售量佔比，使用吻合甜品及甜品用戶群體的的顏色，可以恰當喚起用戶的情感共鳴。

而顏色的語音共鳴則是基於「斯魯普效應」研究，給有固定顏色的事物匹配具有語義共鳴的顏色，能有效地提升閱讀效率及準確度。例如展示獼猴桃、香蕉、橙子、草莓四種水果的銷量，我們分別選擇綠色、黃色、橙色、紅色四個與我們對水果顏色的認知一致的顏色。來展現四種水果的銷量，我們只需要根據顏色就能快速定位閱讀數據。

注意圖表會「騙人」

在製作和閱讀可視化作品時，要注意避免不當的數據展示方式誤導了用戶對數據錯誤的解讀。

總結:

以上內容依次從指導如何選擇合適的圖表，如何獲取更好的數據展示的方法，怎樣利用用戶的心理和用戶習慣，總結的一些更好的數據展示，更好的提升用戶體驗進而更好地解讀數據的方法和建議。這些建議和技巧對於日後正確的選擇及設計可視化作品有很多指導意義。

主題配色

除此之外，王俊婷還分享了 ECharts 在設計主題配色時的寶貴經驗。一般的數據系列需要用到五到六種顏色的，而為了滿足絕大多數的使用場景，ECharts顏色需要要提供到八到十二種顏色，滿足大多數的需求。並且考慮到不同的數據系列數量，為了獲得更好的展示方式，在與配色方案一致的基礎上，建議依次提供相應的九色方案、六色配色方案。並且還要提供冷色調，暖色調。以及用來表示數據的增量變化的漸變色。

需要特別注意的一點是視覺障礙的用戶群體需求，我們要保證可視化方案以及可視化作品，讓這一部分有視覺障礙的群體能夠準確無誤的去閱讀。

另外，王俊婷還展示了顏色過於接近的一些不合理案例。例如第一種數據系列的顏色過於接近，導致無法辨識某一個單獨的數據系列。第二種數據的系列和背景色過於接近，數據本身不容易突出。第三種是坐標軸、表現標題、軸線和背景色過於接近，不好識別具體的數據的大小。

因此，建議可視化的顏色的選擇時明度跨度要大。明度與色調跨度越大，就能承載越多的數據。

而針對某些特殊行業、民族、宗教的數據展示，例如股票數據的展示，紅色和綠的都是有特殊含義的。因此在顏色等元素的使用上，要保證嚴格遵循其行業、民族或宗教等特點，恰當合理的展示數據。

WebGL給 ECharts 帶來了什麼

這幾年 WebGL 已經越來越普及，百度資深前端研發工程師沈毅分享在 ECharts GL 中 WebGL 的嘗試，其中重點介紹 ECharts GL 的底層 WebGL 框架 ClayGL，以及對未來的一些規劃。

ClayGL

ClayGL是 ECharts GL的底層圖形引擎，是一個漸進式的高性能 WebGL開發框架。ClayGL易於使用，提供了非常豐富的功能能夠讓大家用最少的代碼去快速的打造 3D的應用，基於微內核機制可以保證最小的打包體積足夠小，可擴展至高質量的渲染。

易於使用

這段代碼加上空行和注釋總共只有 19 行，就載入了一個有跳舞的機器人模型，創建了一個帶燈光，陰影和動畫的 3D應用

ClayGL核心模塊的抽象

作為一個通用框架，ClayGL 需要面向各種場景的需求，比如實現一個像 ECharts GL 這樣的可視化庫，但是不同場景之間可能用到的功能完全不一樣，比如可視化可能就不需要那些三維模型載入的模塊。

ClayGL 中對核心模塊做了抽象，並把這些核心模塊與那些更面向場景的模塊做了解耦。

ClayGL 中的核心功能包括：

Shader, Attribute Buffer 等 GPU 資源管理

渲染管理

保證繪製的高效

數學庫

可以做矩陣、向量、包圍盒的計算

WebGL 是一個狀態機的介面，大部分 WebGL 的介面都是在創建和提交上述 GPU 資源，管理繪製的狀態等等，這種狀態機的介面非常複雜，啰嗦，繪製效果一複雜就會很難管理狀態。經常我們寫完一大段代碼之後瀏覽器刷新一看就什麼東西都沒有，還沒有報錯，於是只能一行一行去過代碼看哪裡出了問題。

ClayGL最首要的任務就是解決這些資源和狀態管理的問題。例如下 main代碼繪製了一個三角形，最上面一行是通過 ES6 語法引入一些必要的模塊，比如像渲染器。然後是創建一個渲染器，這個渲染器主要負責整個渲染的管理。接下來的 Geometry 負責所有頂點數據的管理，比如說頂點的位置等。再下面的 Material 和 Shader 管理了頂點著色器和像素著色器的代碼，以及提供給外面的一些 uniform。最後一行就是把這些東西都提交給整個渲染器，讓渲染器去負責各種瑣碎的事情，把圖形畫出來。

最後通過 Webpack 4 打包的代碼 gzip 之後只有 22k，對比 THREE.js 打包後有上百 K 的體積。

最常見場景的整合 - App3D

對於很多想要開箱即用的 3D 應用來說，只有上述的核心模塊是遠遠不夠的，ClayGL 提供了很對功能模塊去快速解決場景中的具體問題，比如模型載入，陰影，攝像機控制，內置材質，骨骼動畫等等，其中 App3D 是針對我們常見場景對這些模塊做的一個整合。上面機器人模型的載入就使用到了 App3D 模塊。它提供了下面這些

管理整個應用的循環

GPU 資源的自動回收

滑鼠事件的檢測和管理

更方便的創建場景物體，燈光，攝像機

Promisify 的紋理，模型載入介面

內置 PBR 材質

Cubemap Prefilter

等等的功能區幫助開發者更爽的去開發一個 3D 應用。

ClayGL Advanced Renderer

為了讓渲染出的畫面可以有更豐富的光影、更豐富的材質、更養眼的顏色、更真實的鏡頭以及更平滑的畫面。ClayGL 提供了 Advanced Renderer。下面是使用 Advanced Renderer 渲染的展示各種材質的材質球的畫面。

VisualDL — ECharts 與深度學習

VisualDL 是百度發布的深度學習可視化工具，它可以通過可視化的方法將模型訓練過程中的各個參數以及計算的數據流圖（computation graph）實時地展現出來，以幫助模型訓練者更好地理解、調試、優化模型。百度高級前端研發工程師李德清結合 VisualDL 項目的實踐經驗，介紹深度學習領域是如何使用可視化來解決問題的。

VisualDL

VisualDL 主要解決深度學習訓練過程的「黑盒化」這一特性，它使用可視化的方式幫助模型訓練者理解、調試模型結構，並且可視化模型訓練過程中各種超參數的變化。

VisualDL的四大功能

Scalar

在模型訓練的時候，可將訓練過程中產生的各種數值信息以折線圖的形式展現出來，方便觀察參數的整體變化趨勢，並且能在同一個可視化視圖中呈現多條折線，方便用戶對比分析多個參數。

如下圖是一個 Scalar 界面，上面包含了一個篩選的功能，因為一個大的模型可能會有一千多層，所以涉及到的參數會非常多，用戶可能會只想看錯誤率或者準確率，VisualDL因此提供了一個篩選的功能。另外還有平滑（smooth）功能，將訓練初期的雜訊參數值過濾掉。