基於 Echarts 的資料視覺化在異構資料平臺的實踐

分享嘉賓｜李宏基 炎凰資料 軟體研發工程師

編輯整理｜楊科 星漢數智科技

出品社群｜DataFun

前言

在正式內容開始之前，先來介紹一下炎凰資料的鴻鵠平臺，它是一個一站式異構資料分析平臺，提供了從資料接入、儲存查詢到上層應用的整體解決方案。鴻鵠提供產品開箱即用的資料格式化功能，透過滑鼠點選即可將查詢結果快速生成圖表，並新增至儀表板中。鴻鵠同時提供了折線圖、面積圖、條形圖、柱狀圖、散點圖、地圖、餅圖、量規圖和詞雲圖等豐富的內嵌圖表。

作為鴻鵠視覺化部分的基礎圖表庫，接下來首先介紹 Echarts 的基礎概念和特性。

02

Echarts的基本介紹

1. Echarts歷史

根據官網定義，Echarts 是一個基於 JavaScript 開源的視覺化圖表庫。其歷史最早可追溯到 2013 年，由百度發起。2018 年 1 月進入了 Apache 軟體孵化器。在這期間，其發展勢頭一直較好。它的推廣型別和樣例，以及一些使用配置項在這段時間得到了逐步完善。2021 年 1 月 26 日，Apache 軟體基金會宣佈 Echarts 為頂級（top level）專案。當時最新的版本釋出會參與人數達到 5000人，使用者熱度很高，而且不斷地上升。到目前為止，GitHub 上的 star 數已經突破 4000，NPM 周下載量達到 57 萬多。

Echarts 的最新版本為 5.4.1。經歷多個大版本迭代後，它也積累了比較豐富的經驗。可以看到它正在被越來越廣泛地應用，也受到了大家的認可。

2. Echarts 特性

Echarts 的特性和優勢場景很多，主要包括以下幾個方面。

① 豐富的配置選項和視覺化圖表型別

Echarts 提供的圖表型別非常豐富，稍後會詳細介紹。常規的有折線圖、柱狀圖、散點圖、餅圖、K 線圖等。還有用於統計的圖，用於資料視覺化的地圖、熱力圖，關聯式資料庫用到的關係圖，以及用於 BI 的漏斗圖等。

② 強大的互動式元件

互動是從資料中發掘資訊的重要手段。Echarts 提供了圖例、視覺對映、資料區域縮放、toolip、資料篩選等開箱即用的互動元件，可以對資料進行多維度的篩選、細節展示等。除了互動元件還有事件響應，如點選、滑鼠移動、拖拽等，Echarts 對這些互動動作的支援也是比較好的。

③ ZRender Canvas 和 SVG 渲染器支援

Echarts 底層是依賴向量通用庫 ZRender 實現的，所以它天然的對於 Canvas 和 SVG 這兩種渲染器都有比較透明的支援。Canvas 更適合繪製圖形元素比較多的場合，比如熱力圖，或者地理座標系、平行座標系上面的大規模線圖。SVG 有它的優勢，但記憶體佔用率可能會很高，解決這個問題對移動端比較重要，使用者使用瀏覽器內建縮放功能的時候，才不會覺得模糊。一般來說，在軟硬體條件或者環境都比較好、資料也不是特別大的場景，可以選用任意一種渲染器，在需要的時候還可以進行切換。

④ 對移動裝置的支援和跨平臺

Echarts 針對移動端做了比較細緻的最佳化，而且因為它支援 SVG，使移動端的記憶體佔用問題得到了一些緩解。

⑤ 瀏覽器的相容性

要做到對多種瀏覽器的支援，包括對歷史版本的支援，這是現在大家挑選圖表庫的一個基本要求。Echarts 支援絕大部分瀏覽器，例如 IE、Chrome、Firefox、Safari 等。Echarts 另一個優勢在於它的文件，包括使用手冊、配置項手冊等。其中的示例詳細且全面，包括中英文版本。社群對問題的反饋和修復也很積極。如果遇到了問題，可以用中文交流，很多問題都能在社群直接找到解決方案。

03

配置選項和自定義屬性

在對 Echarts 有了基礎的瞭解之後，接下來介紹鴻鵠裡面如何應用這些配置，如何自定義配置項。

1. Echarts 配置項

Echarts 提供了豐富的配置項，使用非常靈活方便。無論是最常見的標題元件、圖例元件，還是座標系元件和各種圖表元件，它的配置屬性值都是比較多的，基本上能夠滿足大部分圖表開發的需求。

以最常見的圖例元件配置為例。下面的樣例生成了一個地形統計的柱狀圖。其中，option 物件包含了很多屬性，包括資料集的資料來源。這裡的資料按年份分為 5 組，從 2012 年至 2016 年。每組包含 4 種資料，分別是森林、草原、沙漠和沼澤。除此以外，元件還包括 color、legend（圖例）等其它的配置項。這裡的圖例中顯示的值是 false。

接下來做一個簡單的更改，讓這個圖例顯示出來。可以直接把 false 改成 true，這時圖例就直接顯示在柱狀圖的上方了。當然，圖例的位置、整體的顯示形式等都可以在圖例元件裡面找到相應的屬性去調整。

2. Echarts SetOption

介紹了 option 物件後，我們再看它的 setOption 方法。setOption 由 echartsInstance 例項來使用。這個例項是由 echarts.init 建立出來的。這裡面不光能更改配置項，其他所有的引數包括資料都可以透過 setOption 來完成。

接下來看一個例子。下圖右邊的柱狀圖，上面疊加了一個折線圖。兩組用來生成柱和線的資料都是隨機的。X 軸是時間軸。

在左側的程式碼中有一個定時呼叫的函式 setInterval，差不多每 2 秒更新一次圖表。其中就呼叫了圖表的 setOption方法。橫軸每個間隔差不多 2 秒。Echarts 自動判斷並且合併新的引數和資料去重新整理圖表。如果開啟了動畫，還可以看到資料之間的差異，透過動畫去表現資料的變化，就如同隨著時間軸在往前挪動。整個過程都有著很好的使用者體驗。

3. 鴻鵠的圖表配置項

瞭解了 Echarts 的資料和引數配置項，以及例項的 setOption 方法之後，接下來介紹鴻鵠如何實現配置項效果。

在儀表板中，每一個圖表對應的圖形元件定義為 widget。首先進入編輯模式。點選圖表的編輯按鈕（小鉛筆），會彈出一個可拖拽的模態框。上面是一個圖表型別的可選下拉框，可以將圖表型別自由設定為柱狀圖、線圖、散點圖或條形圖等。中間是分類的標籤頁。裡面按照常用的分類，將一些比較具體的配置項放到不同的標籤頁裡。

第一個是常規標籤頁。主要是一些通用的標題顯示配置，包括標題的顯示、標題的內容、顏色、字號、位置等。

第二個是柱狀圖示籤頁。主要是柱狀圖相關的配置項，包括顯示堆疊、條形寬度，以及是否更改顯示數值、提示型別等。

第三個是 X 軸或 Y 軸標籤頁。對於二維座標圖表型別，都可以在這裡進行配置。可以更改X軸的名稱、標籤的位置、樣式、顯示所有刻度、是否開啟刻度尺等。

4. 鴻鵠的自定義配置項

在商業軟體中沒有辦法把所有的選項都做成 UI 的操作放到介面裡。Echarts 解決這個問題的辦法是在 setOption 的時候，把元件物件放在一個線上的 IDE 裡面，編寫完之後，針對這些配置項去渲染生效。

鴻鵠也有類似的做法，增加了一個自定義的標籤頁來對圖表進行定製化擴充套件。

如圖所示。自定義標籤頁裡面是一個輸入文字框，或者叫 AceEditor（用 JavaScript 編寫的可嵌入程式碼編輯器）。AceEditor 包裝了使用者輸入的配置項，可以讓使用者有比較好的編輯輸入體驗。

這樣做有幾個好處：

首先是支援 JSON 語法檢查。比如非法值的高亮提示，如圖中的 “validKey”。

另一個是配置選項自動補全，高亮提示。Echarts 提供的關鍵字是比較多的，鴻鵠的做法是把關鍵詞加到的 AceEditor 的 auto complete 裡面，進行自動補全，使用者輸入的時候可以即時高亮提示。

第三個是應用效果即時預覽。使用者在介面裡面自定義好的配置可以即時生效，便於檢視效果是不是想要的。

以下面的餅圖為例。這是一張典型 access_log 日誌檔案 method 返回狀態碼生成的餅圖，如 get、post 等方法。在餅圖的配置介面裡已經預置了顯示標籤、詳細標籤、標籤位置等標籤。現在想實現更多的配置或者想要更酷炫的效果，可以透過自定義配置編輯器來自定義圖表。

這裡我們準備了一段能夠生成玫瑰圖效果的程式碼，將程式碼直接複製到自定義配置編輯器裡面，點選應用配置按鈕，就可以把這些配置應用在圖形上面，經過 Echarts 渲染，從而生成類似玫瑰圖的效果。

除此以外，使用者還可以修改其中的一些引數，比如 style、color、radius 等等。在輸入過程中就可以檢視效果。最後存為 widget 並存到儀表板。這些自定義輸入的選項，也會和圖表型別的物件一起儲存。

04

擴充套件和自定義型別圖表

1. 鴻鵠的圖表型別

鴻鵠的圖表型別大致可分為三類：來自於 Echarts 的圖表、自定義圖表和第三方圖表。

① 來自於Echarts的圖表

第一類是繼承自 Echarts 內建的圖形。Echarts 自帶了很多開箱即用的圖表型別，包括折線圖、面積圖、條形圖、柱狀圖、餅圖、散點圖、氣泡圖、地圖等。

折線圖 

氣泡地圖是鴻鵠額外封裝的一種地圖。底層是用地圖作座標系，地圖座標系的上一層用  scada chart，用類似散點圖的方式來顯示數值。圖中有資料的點或者圓，代表該區域有資料，區域的面積越大，代表數值越高，或者頻率越高。

② 自定義圖表

下面舉 3 個自定義圖表的例子。包括單值趨勢圖、富文字型別圖、表格型別圖。

1）單值趨勢圖

單值趨勢圖主要用於視覺化指標的顯示，或者一種趨勢的顯示。

單值趨勢圖

如圖所示，可以看到中間有個數值 21，它代表了一個變化的數值。數值的右邊就是趨勢的標記。下面的迷你圖是一個根據資料變化的折線圖。為了讓單值趨勢圖的顏色可以適配不同的場景，鴻鵠提供了兩種著色方式，可以根據數值或者是趨勢來著色。數值著色相當於設定數值範圍，比如例中可以設定大於 20 小於 100 的數值顯示一種顏色，大於100 或者小於 20 顯示另一種顏色。趨勢著色是按照趨勢變化進行著色，作為一種趨勢的解釋。比如紅色代表升，綠色代表降，或者相反。

2）富文字型別圖

富文字型別圖方便使用者自己管理一些漂亮的文字，或者插入圖片、影片等等。它底層實現用的是 Quill JS，Quill JS 本身就是一個比較強大的富文字編輯器。鴻鵠把它做成了一個圖形元件，形成了一種內建的圖形。

3）表格型別圖

第三種也是資料視覺化當中用得比較多的圖表型別——表格。鴻鵠把表格封裝成了內建的表格圖形元件，如圖所示。

這幾種典型的自定義圖形，還需要適配一些方法，儘量和已有的 Echarts 基礎型別的圖形一致。比如 setOption、setData、convertOptionToForm 等。另外還需要額外實現一些事件 eventHandle，最常見的比如滑鼠的點選事件。

以單值趨勢圖為例，當點選單值元素 21 的時候，需要傳遞過來的資料資訊就包括點選的欄位名、欄位值，還有欄位的型別等等。

表格也是類似的。當點選單元格的時候，需要獲取到點選的單元，包括欄位名對應的數值，以及所在行、所在列的資訊。這些資訊在進行表鑽取或者聯動的時候會使用。

③ 第三方圖表

除了自定義的圖之外，還有第三方包裝的 Echarts 的圖形，比如詞雲圖。鴻鵠使用的是 echarts-wordcloud。詞雲圖是對文字的出現頻率予以資料化展現，文字越大說明出現的頻率越高。

echarts-wordcloud JS 程式庫使用也比較方便。可以指定圖表的型別，即 word cloud。詞雲圖提供了一些配置項，比如圖的形狀，上圖中是 Diamond（菱形），還有顏色、文字的角度等選項。

2. 鴻鵠的擴充套件圖表型別

除了內建的圖形外，鴻鵠同樣支援使用者擴充套件圖表型別。接下來介紹鴻鵠以應用 APP 的方式去自定義圖表的過程。

首先在 APP 應用中指定視覺化圖表的描述檔案，即 viz.toml，位於 APP_HOME 下面。它的內容如下。

首先是註冊一個 key 值，這裡是 sample-chart，代表擴充套件的圖表。需要注意的是，key 是唯一的，即同一個 APP 中不能用相同的 key 重複註冊。

name 表示圖表後顯示的名字，即 Sample Chart。

option_class 表示圖表檔案所在的位置，這是一個相對路徑。

export 表示圖表註冊的名稱。

接下來新增一個真實的圖表型別，雷達圖。首先更改樣例的描述檔案 viz.toml，如下圖所示。

完成描述檔案後，開啟圖表檔案。對於使用者自己新建的圖表，需要在 setData 方法中新增圖形的處理方法。傳入的引數包括 data 和 dimensions。

data 是圖表對應的資料集，是一個物件陣列，每個物件是一行。dimensions 是資料集的描述，包括列名、資料型別等資訊。最終畫圖的時候，圖表元件會把這些引數傳給 Echarts。效果如圖所示。

圖表型別是 radar chart，圖表的名字就是描述檔案裡面定義的名字。透過這種方法就可以將自定義圖表新增進來。

04

場景展示資料視覺化

剛才討論了圖表庫和豐富的配置項，接下來進行視覺化呈現。這部分分為圖表佈局、圖表大小調整、鑽取行為、儀表板的標記等幾塊進行介紹。

1. 圖表佈局

首先介紹 Echarts 的圖表容器大小。圖形大小初始化的時候一般推薦把圖形傳入一個 Div 節點作為父容器，這樣 Echarts 圖表的大小預設即為該節點的大小。

另外，Echarts 在響應容器大小變化的時候提供了 resize 方法，它可以改變圖形的大小。比如在 main 容器裡面定義了一個高度 400、寬度是頁面 100% 的節點，希望在瀏覽器寬度改變的時候始終保持圖表寬度是頁面的 100%。這種情況下，我們可以在 window 的事件監聽器裡監聽瀏覽器大小改變的事件，然後再呼叫 Echarts 的 resize 方法，去改變圖表的大小。

值得一提的是，Echarts 的 resize 方法預設沒有引數，但可以透過引數傳遞設定引數值，比如過渡動畫（animation）、時長（duration）或者是緩動等。

接下來看一下鴻鵠圖表佈局的具體實現。

例子中是一個 react 專案，用 react grid layout 元件庫來實現。react grid layout 類似一個網格佈局系統，它的好處是響應式和支援斷點佈局，可以進行拖拽，以及 item 的縮放。這裡預設把一行分成了 24 份。

2. 圖表 Resize

接下來介紹 resize 方法的具體實現。下圖建立了一個網站流量統計的樣例儀表板。儀表板圖表元件使用 grid layout 進行佈局。

當圖表元件大小發生改變的時候，元件會獲取最新的圖表高度資訊、大小資訊，透過監聽頁面大小是否發生變化，在資料更新裡面會呼叫 resize 方法改變圖表的尺寸。在本例中，拖拽圖表完成大小改變的過程渲染比較順滑。

3. 鑽取行為

儀表板作為最常用的功能元件，不僅要實現資料視覺化呈現，還要滿足使用者對資料的互動探索。對於 Echarts 而言，使用者對圖表的操作經常會觸發相應的事件，開發者可以監聽這些事件，透過回撥函式進行相應的處理。比如跳轉到一個地址，或者彈出對話方塊，或者是做資料的下鑽等。

Echarts裡面滑鼠事件包括 click、doubleClick、mouseDown、mouseMove、mouseUp、mouseOver 等。所有滑鼠事件都會包含像 EventsParams 這樣的引數包，它是一個包含當前圖形資料資訊的物件，如上圖所示。比如 seriesType，表示當前圖表的型別，如折線圖、條形圖或者餅圖。

以上是 Echarts 的事件處理，接下來介紹鴻鵠常用的鑽取互動行為。鑽取在資料視覺化分析中十分常見，它的特點是能夠一層一層往下鑽取資料，挖掘資料背後的關聯。在鴻鵠裡面，鑽取更像是配置工具，可以在單擊儀表板的資料點、表格行，或者其他視覺化元素的時候觸發配置好的操作。比如配置鑽取連結到預設搜尋執行自動輔助查詢，單擊圖形上的視覺化元素就會獲得欄位值，接下來透過補全查詢中的搜尋語句開啟查詢頁面完成查詢。

獲取 EventsParams 以後，就可以執行 click 事件回撥，即鑽取動作。下面這段程式碼鑽取的動作包括：連結到 URL、自動輔助查詢、自定義查詢語句、設定標記。

鴻鵠中的標記類似程式變數，一個輸入標記由標記名稱和標記值組成。如果在儀表板圖表的搜尋中使用了標記，就可以傳遞需要的數值。標記名稱的語法使用$...$分割符。⽐如，如果將查詢欄位輸入標記定義為“field”，資料來源定義為 “source”，則搜尋為SELECT $field$ from $source$。

鴻鵠裡面是有幾種不同型別的標記。

① 文字型別標記

首先進入儀表板編輯狀態，點選儀表板標題右側的操作按鈕“新增輸入”，得到新增輸入對話方塊。

預設標記型別為文字框，輸入標記名稱 “token”，標記值為 “accessToken”，

然後點選“確定”按鈕完成新增輸入。如下圖所示。

② 選擇器型別標記

第二種是選擇器型別。選擇器型別標記分為兩種。第一種可以支援預定義選項，即定義好一些選項作為選擇器的選項值。

另一種支援從查詢中提取結果。如下圖所示。在圖中的例子中，將返回的 distinct t2.country 值作為欄位資訊（標記的選項）。

③ 時間型別標記

時間型別輸入可以用來控制圖表的查詢時間範圍。可以把時間查詢範圍作為一個標記，在想用到變化時間的地方去使用。下面介紹時間型別標記的操作方法。

首先，展開“輸入型別”下拉選項，點選“時間”。

接下來，設定“標記名稱”為 time，“顯示標籤”輸入時間標記，“預設標記值”選擇相對時間和最近(過去)一天。

最後，點選“確定”按鈕新增完成後，可以得到顯示標記名為“時間標記”的時間輸入，其預設選項值為“最近(過去)一天”。

④ 鑽取設定標記

第四種是鑽取設定標記，在後面樣例中進行介紹。

下面透過一個儀表板樣例來展示標記的工作方式。首先在儀表版裡配置幾種不同型別的標記，從上到下分別是文字型別、選擇器型別、時間型別、鑽取設定型別。

文字輸入標記樣例

在第一個例子中，透過配置文字標記來進行過濾。左側輸入了 access，可以把 access log 相關的資料查出來顯示在右邊。每當文字標記更新的時候，相應的查詢語句，包括整個圖表的資料，也會進行相應的更新。

第二個例子是選擇器型別標記。例子中預定義了請求狀態的選項，分別是 2XX、3XX、4XX、5XX、所有請求狀態。每當切換選項的時候，都會觸發右邊的關聯圖表，重新進行查詢並獲取新的結果，最後把更新的結果顯示出來。

第三個例子是時間型別標記。可以把時間查詢範圍的作為一個標記，例子中選30分鐘，透過時間標記值的變化更新圖表資訊。

最後一個例子是鑽取設定標記。在例子中，點選左邊的餅圖，比如美國，就會觸發右邊的聯動圖表去做新的查詢。

關於視覺化技術還有非常多豐富的內容，例如：

① 大資料圖表視覺化最佳化 ； 

② 儀表板視覺化架構；

③ 顏色和自定義主題等等。