一、前言

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

鴻鵠一站式異構數據即時分析平臺

鴻鵠典型場景展示

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

二、Echarts的基本介紹

1、Echarts歷史

Apache Echarts 官網截圖及 Echarts下載量

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

Echarts 的最新版本為 5.4.1。經歷多個大版本迭代后，它也積累了比較豐富的經驗?？梢钥吹剿诒辉絹碓綇V泛地應用，也受到了大家的認可。

2、Echarts 特性

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 另一個優勢在于它的文檔，包括使用手冊、配置項手冊等。其中的示例詳細且全面，包括中英文版本。社區對問題的反饋和修復也很積極。如果遇到了問題，可以用中文交流，很多問題都能在社區直接找到解決方案。

三、配置選項和自定義屬性

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

1、Echarts 配置項

Echarts 配置項

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

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

圖例的配置項及顯示圖例

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

2、Echarts SetOption

介紹了 option 對象后，我們再看它的 setOption 方法。setOption 由 echartsInstance 實例來使用。這個實例是由 echarts.init 創建出來的。這里面不光能更改配置項，其他所有的參數包括數據都可以通過 setOption 來完成。

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

Echarts 圖表 setOption 方法樣例

在左側的代碼中有一個定時調用的函數 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 等方法。在餅圖的配置界面里已經預置了顯示標簽、詳細標簽、標簽位置等標簽?，F在想實現更多的配置或者想要更酷炫的效果，可以通過自定義配置編輯器來自定義圖表。?

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

自定義編輯器

即時預覽圖表效果

除此以外，用戶還可以修改其中的一些參數，比如 style、color、radius 等等。在輸入過程中就可以查看效果。最后存為 widget 并存到儀表板。這些自定義輸入的選項，也會和圖表類型的對象一起存儲。

四、擴展和自定義類型圖表

1、鴻鵠的圖表類型

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

① 來自于Echarts的圖表?

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

折線圖 

面積圖

條形圖

柱狀圖

餅圖

散點圖

氣泡圖 

地圖

氣泡地圖

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

② 自定義圖表?

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

單值趨勢圖

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

單值趨勢圖

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

富文本類型圖

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

富文本類型圖

表格類型圖

第三種也是數據可視化當中用得比較多的圖表類型——表格。鴻鵠把表格封裝成了內置的表格圖形組件，如圖所示。

表格類型圖

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

以單值趨勢圖為例，當點擊單值元素 21 的時候，需要傳遞過來的數據信息就包括點擊的字段名、字段值，還有字段的類型等等。

表格也是類似的。當點擊單元格的時候，需要獲取到點擊的單元，包括字段名對應的數值，以及所在行、所在列的信息。這些信息在進行表鉆取或者聯動的時候會使用。

表格事件信息

③ 第三方圖表?

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

詞云圖

echarts-wordcloud JS 程序庫使用也比較方便?？梢灾付▓D表的類型，即 word cloud。詞云圖提供了一些配置項，比如圖的形狀，上圖中是 Diamond（菱形），還有顏色、文字的角度等選項。

2、鴻鵠的擴展圖表類型

除了內置的圖形外，鴻鵠同樣支持用戶擴展圖表類型。接下來介紹鴻鵠以應用 APP 的方式去自定義圖表的過程。

首先在 APP 應用中指定可視化圖表的描述文件，即 viz.toml，位于 APP_HOME 下面。它的內容如下。

使用 APP 擴展圖表

首先是注冊一個 key 值，這里是 sample-chart，代表擴展的圖表。需要注意的是，key 是唯一的，即同一個 APP 中不能用相同的 key 重復注冊。

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

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

export 表示圖表注冊的名稱。

接下來添加一個真實的圖表類型，雷達圖。首先更改樣例的描述文件 viz.toml，如下圖所示。

添加一個 radar-chart 圖表

完成描述文件后，打開圖表文件。對于用戶自己新建的圖表，需要在 setData 方法中添加圖形的處理方法。傳入的參數包括 data 和 dimensions。

自定義圖表文件

data 是圖表對應的數據集，是一個對象數組，每個對象是一行。dimensions 是數據集的描述，包括列名、數據類型等信息。最終畫圖的時候，圖表組件會把這些參數傳給 Echarts。效果如圖所示。

擴展 Radar 圖

圖表類型是 radar chart，圖表的名字就是描述文件里面定義的名字。通過這種方法就可以將自定義圖表添加進來。

四、場景展示數據可視化

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

1、圖表布局

圖表布局

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

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

使用 window 事件監聽器調用圖表的 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、自動輔助查詢、自定義查詢語句、設置標記。

鉆取行為代碼

4、儀表板的標記

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

鴻鵠里面是有幾種不同類型的標記。

① 文本類型標記?

首先進入儀表板編輯狀態，點擊儀表板標題右側的操作按鈕“添加輸入”，得到添加輸入對話框。

在儀表板中添加文本類型標記

默認標記類型為文本框，輸入標記名稱 “token”，標記值為 “accessToken”，

然后點擊“確定”按鈕完成添加輸入。如下圖所示。

定義文本類型標記

② 選擇器類型標記?

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

預定義選項

另一種支持從查詢中提取結果。如下圖所示。在圖中的例子中，將返回的 distinct t2.country 值作為字段信息（標記的選項）。

從查詢中提取

③ 時間類型標記?

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

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

定義時間類型標記

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

輸入需要綁定的標記

最后，點擊“確定”按鈕添加完成后，可以得到顯示標記名為“時間標記”的時間輸入，其默認選項值為“最近(過去)一天”。

時間類型標記效果

④ 鉆取設置標記?

第四種是鉆取設置標記，在后面樣例中進行介紹。

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

文本輸入標記樣例

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

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

選擇器輸入標記樣例

第三個例子是時間類型標記?？梢园褧r間查詢范圍的作為一個標記，例子中選30分鐘，通過時間標記值的變化更新圖表信息。

時間類型標記樣例

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

鉆取設置標記樣例

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

① 大數據圖表可視化優化 。

② 儀表板可視化架構。

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