一、前言

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

鴻鵠一站式異構(gòu)數(shù)據(jù)即時(shí)分析平臺(tái)

鴻鵠典型場景展示

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

二、Echarts的基本介紹

1、Echarts歷史

Apache Echarts 官網(wǎng)截圖及 Echarts下載量

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

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

2、Echarts 特性

Echarts 的特性和優(yōu)勢場景很多，主要包括以下幾個(gè)方面。

Echarts 特性

① 豐富的配置選項(xiàng)和可視化圖表類型?

Echarts 提供的圖表類型非常豐富，稍后會(huì)詳細(xì)介紹。常規(guī)的有折線圖、柱狀圖、散點(diǎn)圖、餅圖、K 線圖等。還有用于統(tǒng)計(jì)的圖，用于數(shù)據(jù)可視化的地圖、熱力圖，關(guān)系數(shù)據(jù)庫用到的關(guān)系圖，以及用于 BI 的漏斗圖等。

② 強(qiáng)大的交互式組件?

交互是從數(shù)據(jù)中發(fā)掘信息的重要手段。Echarts 提供了圖例、視覺映射、數(shù)據(jù)區(qū)域縮放、toolip、數(shù)據(jù)篩選等開箱即用的交互組件，可以對(duì)數(shù)據(jù)進(jìn)行多維度的篩選、細(xì)節(jié)展示等。除了交互組件還有事件響應(yīng)，如點(diǎn)擊、鼠標(biāo)移動(dòng)、拖拽等，Echarts 對(duì)這些交互動(dòng)作的支持也是比較好的。

③ ZRender Canvas 和 SVG 渲染器支持?

Echarts 底層是依賴矢量通用庫 ZRender 實(shí)現(xiàn)的，所以它天然的對(duì)于 Canvas 和 SVG 這兩種渲染器都有比較透明的支持。Canvas 更適合繪制圖形元素比較多的場合，比如熱力圖，或者地理坐標(biāo)系、平行坐標(biāo)系上面的大規(guī)模線圖。SVG 有它的優(yōu)勢，但內(nèi)存占用率可能會(huì)很高，解決這個(gè)問題對(duì)移動(dòng)端比較重要，用戶使用瀏覽器內(nèi)置縮放功能的時(shí)候，才不會(huì)覺得模糊。一般來說，在軟硬件條件或者環(huán)境都比較好、數(shù)據(jù)也不是特別大的場景，可以選用任意一種渲染器，在需要的時(shí)候還可以進(jìn)行切換。

④ 對(duì)移動(dòng)設(shè)備的支持和跨平臺(tái)?

Echarts 針對(duì)移動(dòng)端做了比較細(xì)致的優(yōu)化，而且因?yàn)樗С?SVG，使移動(dòng)端的內(nèi)存占用問題得到了一些緩解。

⑤ 瀏覽器的兼容性?

?要做到對(duì)多種瀏覽器的支持，包括對(duì)歷史版本的支持，這是現(xiàn)在大家挑選圖表庫的一個(gè)基本要求。Echarts 支持絕大部分瀏覽器，例如 IE、Chrome、Firefox、Safari 等。Echarts 另一個(gè)優(yōu)勢在于它的文檔，包括使用手冊(cè)、配置項(xiàng)手冊(cè)等。其中的示例詳細(xì)且全面，包括中英文版本。社區(qū)對(duì)問題的反饋和修復(fù)也很積極。如果遇到了問題，可以用中文交流，很多問題都能在社區(qū)直接找到解決方案。

三、配置選項(xiàng)和自定義屬性

在對(duì) Echarts 有了基礎(chǔ)的了解之后，接下來介紹鴻鵠里面如何應(yīng)用這些配置，如何自定義配置項(xiàng)。

1、Echarts 配置項(xiàng)

Echarts 配置項(xiàng)

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

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

圖例的配置項(xiàng)及顯示圖例

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

2、Echarts SetOption

介紹了 option 對(duì)象后，我們?cè)倏此?setOption 方法。setOption 由 echartsInstance 實(shí)例來使用。這個(gè)實(shí)例是由 echarts.init 創(chuàng)建出來的。這里面不光能更改配置項(xiàng)，其他所有的參數(shù)包括數(shù)據(jù)都可以通過 setOption 來完成。

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

Echarts 圖表 setOption 方法樣例

在左側(cè)的代碼中有一個(gè)定時(shí)調(diào)用的函數(shù) setInterval，差不多每 2 秒更新一次圖表。其中就調(diào)用了圖表的 setOption方法。橫軸每個(gè)間隔差不多 2 秒。Echarts 自動(dòng)判斷并且合并新的參數(shù)和數(shù)據(jù)去刷新圖表。如果開啟了動(dòng)畫，還可以看到數(shù)據(jù)之間的差異，通過動(dòng)畫去表現(xiàn)數(shù)據(jù)的變化，就如同隨著時(shí)間軸在往前挪動(dòng)。整個(gè)過程都有著很好的用戶體驗(yàn)。

3、鴻鵠的圖表配置項(xiàng)

了解了 Echarts 的數(shù)據(jù)和參數(shù)配置項(xiàng)，以及實(shí)例的 setOption 方法之后，接下來介紹鴻鵠如何實(shí)現(xiàn)配置項(xiàng)效果。

在儀表板中，每一個(gè)圖表對(duì)應(yīng)的圖形組件定義為 widget。首先進(jìn)入編輯模式。點(diǎn)擊圖表的編輯按鈕（小鉛筆），會(huì)彈出一個(gè)可拖拽的模態(tài)框。上面是一個(gè)圖表類型的可選下拉框，可以將圖表類型自由設(shè)定為柱狀圖、線圖、散點(diǎn)圖或條形圖等。中間是分類的標(biāo)簽頁。里面按照常用的分類，將一些比較具體的配置項(xiàng)放到不同的標(biāo)簽頁里。

鴻鵠的圖表配置項(xiàng)

第一個(gè)是常規(guī)標(biāo)簽頁。主要是一些通用的標(biāo)題顯示配置，包括標(biāo)題的顯示、標(biāo)題的內(nèi)容、顏色、字號(hào)、位置等。

第二個(gè)是柱狀圖標(biāo)簽頁。主要是柱狀圖相關(guān)的配置項(xiàng)，包括顯示堆疊、條形寬度，以及是否更改顯示數(shù)值、提示類型等。

第三個(gè)是 X 軸或 Y 軸標(biāo)簽頁。對(duì)于二維坐標(biāo)圖表類型，都可以在這里進(jìn)行配置。可以更改X軸的名稱、標(biāo)簽的位置、樣式、顯示所有刻度、是否打開刻度尺等。

4、鴻鵠的自定義配置項(xiàng)

在商業(yè)軟件中沒有辦法把所有的選項(xiàng)都做成 UI 的操作放到界面里。Echarts 解決這個(gè)問題的辦法是在 setOption 的時(shí)候，把組件對(duì)象放在一個(gè)在線的 IDE 里面，編寫完之后，針對(duì)這些配置項(xiàng)去渲染生效。

鴻鵠也有類似的做法，增加了一個(gè)自定義的標(biāo)簽頁來對(duì)圖表進(jìn)行定制化擴(kuò)展。

如圖所示。自定義標(biāo)簽頁里面是一個(gè)輸入文本框，或者叫 AceEditor（用 JavaScript 編寫的可嵌入代碼編輯器）。AceEditor 包裝了用戶輸入的配置項(xiàng)，可以讓用戶有比較好的編輯輸入體驗(yàn)。

自定義標(biāo)簽的語法檢查和自動(dòng)補(bǔ)全

這樣做有幾個(gè)好處：

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

另一個(gè)是配置選項(xiàng)自動(dòng)補(bǔ)全，高亮提示。Echarts 提供的關(guān)鍵字是比較多的，鴻鵠的做法是把關(guān)鍵詞加到的 AceEditor 的 auto complete 里面，進(jìn)行自動(dòng)補(bǔ)全，用戶輸入的時(shí)候可以即時(shí)高亮提示。

第三個(gè)是應(yīng)用效果即時(shí)預(yù)覽。用戶在界面里面自定義好的配置可以即時(shí)生效，便于查看效果是不是想要的。

以下面的餅圖為例。這是一張典型 access_log 日志文件 method 返回狀態(tài)碼生成的餅圖，如 get、post 等方法。在餅圖的配置界面里已經(jīng)預(yù)置了顯示標(biāo)簽、詳細(xì)標(biāo)簽、標(biāo)簽位置等標(biāo)簽?，F(xiàn)在想實(shí)現(xiàn)更多的配置或者想要更酷炫的效果，可以通過自定義配置編輯器來自定義圖表。?

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

自定義編輯器

即時(shí)預(yù)覽圖表效果

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

四、擴(kuò)展和自定義類型圖表

1、鴻鵠的圖表類型

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

① 來自于Echarts的圖表?

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

折線圖 

面積圖

條形圖

柱狀圖

餅圖

散點(diǎn)圖

氣泡圖 

地圖

氣泡地圖

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

② 自定義圖表?

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

單值趨勢圖

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

單值趨勢圖

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

富文本類型圖

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

富文本類型圖

表格類型圖

第三種也是數(shù)據(jù)可視化當(dāng)中用得比較多的圖表類型——表格。鴻鵠把表格封裝成了內(nèi)置的表格圖形組件，如圖所示。

表格類型圖

這幾種典型的自定義圖形，還需要適配一些方法，盡量和已有的 Echarts 基礎(chǔ)類型的圖形一致。比如 setOption、setData、convertOptionToForm 等。另外還需要額外實(shí)現(xiàn)一些事件 eventHandle，最常見的比如鼠標(biāo)的點(diǎn)擊事件。

以單值趨勢圖為例，當(dāng)點(diǎn)擊單值元素 21 的時(shí)候，需要傳遞過來的數(shù)據(jù)信息就包括點(diǎn)擊的字段名、字段值，還有字段的類型等等。

表格也是類似的。當(dāng)點(diǎn)擊單元格的時(shí)候，需要獲取到點(diǎn)擊的單元，包括字段名對(duì)應(yīng)的數(shù)值，以及所在行、所在列的信息。這些信息在進(jìn)行表鉆取或者聯(lián)動(dòng)的時(shí)候會(huì)使用。

表格事件信息

③ 第三方圖表?

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

詞云圖

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

2、鴻鵠的擴(kuò)展圖表類型

除了內(nèi)置的圖形外，鴻鵠同樣支持用戶擴(kuò)展圖表類型。接下來介紹鴻鵠以應(yīng)用 APP 的方式去自定義圖表的過程。

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

使用 APP 擴(kuò)展圖表

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

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

option_class 表示圖表文件所在的位置，這是一個(gè)相對(duì)路徑。

export 表示圖表注冊(cè)的名稱。

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

添加一個(gè) radar-chart 圖表

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

自定義圖表文件

data 是圖表對(duì)應(yīng)的數(shù)據(jù)集，是一個(gè)對(duì)象數(shù)組，每個(gè)對(duì)象是一行。dimensions 是數(shù)據(jù)集的描述，包括列名、數(shù)據(jù)類型等信息。最終畫圖的時(shí)候，圖表組件會(huì)把這些參數(shù)傳給 Echarts。效果如圖所示。

擴(kuò)展 Radar 圖

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

四、場景展示數(shù)據(jù)可視化

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

1、圖表布局

圖表布局

首先介紹 Echarts 的圖表容器大小。圖形大小初始化的時(shí)候一般推薦把圖形傳入一個(gè) Div 節(jié)點(diǎn)作為父容器，這樣 Echarts 圖表的大小默認(rèn)即為該節(jié)點(diǎn)的大小。

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

使用 window 事件監(jiān)聽器調(diào)用圖表的 resize 方法

值得一提的是，Echarts 的 resize 方法默認(rèn)沒有參數(shù)，但可以通過參數(shù)傳遞設(shè)置參數(shù)值，比如過渡動(dòng)畫（animation）、時(shí)長（duration）或者是緩動(dòng)等。

接下來看一下鴻鵠圖表布局的具體實(shí)現(xiàn)。

鴻鵠圖表布局樣例

例子中是一個(gè) react 項(xiàng)目，用 react grid layout 組件庫來實(shí)現(xiàn)。react grid layout 類似一個(gè)網(wǎng)格布局系統(tǒng)，它的好處是響應(yīng)式和支持?jǐn)帱c(diǎn)布局，可以進(jìn)行拖拽，以及 item 的縮放。這里默認(rèn)把一行分成了 24 份。

2、圖表 Resize

接下來介紹 resize 方法的具體實(shí)現(xiàn)。下圖創(chuàng)建了一個(gè)網(wǎng)站流量統(tǒng)計(jì)的樣例儀表板。儀表板圖表組件使用 grid layout 進(jìn)行布局。

鴻鵠圖表儀表板

當(dāng)圖表組件大小發(fā)生改變的時(shí)候，組件會(huì)獲取最新的圖表高度信息、大小信息，通過監(jiān)聽頁面大小是否發(fā)生變化，在數(shù)據(jù)更新里面會(huì)調(diào)用 resize 方法改變圖表的尺寸。在本例中，拖拽圖表完成大小改變的過程渲染比較順滑。

改變圖表大小

3、鉆取行為

鉆取行為

儀表板作為最常用的功能組件，不僅要實(shí)現(xiàn)數(shù)據(jù)可視化呈現(xiàn)，還要滿足用戶對(duì)數(shù)據(jù)的交互探索。對(duì)于 Echarts 而言，用戶對(duì)圖表的操作經(jīng)常會(huì)觸發(fā)相應(yīng)的事件，開發(fā)者可以監(jiān)聽這些事件，通過回調(diào)函數(shù)進(jìn)行相應(yīng)的處理。比如跳轉(zhuǎn)到一個(gè)地址，或者彈出對(duì)話框，或者是做數(shù)據(jù)的下鉆等。

Echarts里面鼠標(biāo)事件包括 click、doubleClick、mouseDown、mouseMove、mouseUp、mouseOver 等。所有鼠標(biāo)事件都會(huì)包含像 EventsParams 這樣的參數(shù)包，它是一個(gè)包含當(dāng)前圖形數(shù)據(jù)信息的對(duì)象，如上圖所示。比如 seriesType，表示當(dāng)前圖表的類型，如折線圖、條形圖或者餅圖。

以上是 Echarts 的事件處理，接下來介紹鴻鵠常用的鉆取交互行為。鉆取在數(shù)據(jù)可視化分析中十分常見，它的特點(diǎn)是能夠一層一層往下鉆取數(shù)據(jù)，挖掘數(shù)據(jù)背后的關(guān)聯(lián)。在鴻鵠里面，鉆取更像是配置工具，可以在單擊儀表板的數(shù)據(jù)點(diǎn)、表格行，或者其他可視化元素的時(shí)候觸發(fā)配置好的操作。比如配置鉆取鏈接到默認(rèn)搜索執(zhí)行自動(dòng)輔助查詢，單擊圖形上的可視化元素就會(huì)獲得字段值，接下來通過補(bǔ)全查詢中的搜索語句打開查詢頁面完成查詢。

獲取 EventsParams 以后，就可以執(zhí)行 click 事件回調(diào)，即鉆取動(dòng)作。下面這段代碼鉆取的動(dòng)作包括：鏈接到 URL、自動(dòng)輔助查詢、自定義查詢語句、設(shè)置標(biāo)記。

鉆取行為代碼

4、儀表板的標(biāo)記

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

鴻鵠里面是有幾種不同類型的標(biāo)記。

① 文本類型標(biāo)記?

首先進(jìn)入儀表板編輯狀態(tài)，點(diǎn)擊儀表板標(biāo)題右側(cè)的操作按鈕“添加輸入”，得到添加輸入對(duì)話框。

在儀表板中添加文本類型標(biāo)記

默認(rèn)標(biāo)記類型為文本框，輸入標(biāo)記名稱 “token”，標(biāo)記值為 “accessToken”，

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

定義文本類型標(biāo)記

② 選擇器類型標(biāo)記?

第二種是選擇器類型。選擇器類型標(biāo)記分為兩種。第一種可以支持預(yù)定義選項(xiàng)，即定義好一些選項(xiàng)作為選擇器的選項(xiàng)值。

預(yù)定義選項(xiàng)

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

從查詢中提取

③ 時(shí)間類型標(biāo)記?

時(shí)間類型輸入可以用來控制圖表的查詢時(shí)間范圍?？梢园褧r(shí)間查詢范圍作為一個(gè)標(biāo)記，在想用到變化時(shí)間的地方去使用。下面介紹時(shí)間類型標(biāo)記的操作方法。

首先，展開“輸入類型”下拉選項(xiàng)，點(diǎn)擊“時(shí)間”。

定義時(shí)間類型標(biāo)記

接下來，設(shè)置“標(biāo)記名稱”為 time，“顯示標(biāo)簽”輸入時(shí)間標(biāo)記，“默認(rèn)標(biāo)記值”選擇相對(duì)時(shí)間和最近(過去)一天。

輸入需要綁定的標(biāo)記

最后，點(diǎn)擊“確定”按鈕添加完成后，可以得到顯示標(biāo)記名為“時(shí)間標(biāo)記”的時(shí)間輸入，其默認(rèn)選項(xiàng)值為“最近(過去)一天”。

時(shí)間類型標(biāo)記效果

④ 鉆取設(shè)置標(biāo)記?

第四種是鉆取設(shè)置標(biāo)記，在后面樣例中進(jìn)行介紹。

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

文本輸入標(biāo)記樣例

在第一個(gè)例子中，通過配置文本標(biāo)記來進(jìn)行過濾。左側(cè)輸入了 access，可以把 access log 相關(guān)的數(shù)據(jù)查出來顯示在右邊。每當(dāng)文本標(biāo)記更新的時(shí)候，相應(yīng)的查詢語句，包括整個(gè)圖表的數(shù)據(jù)，也會(huì)進(jìn)行相應(yīng)的更新。

第二個(gè)例子是選擇器類型標(biāo)記。例子中預(yù)定義了請(qǐng)求狀態(tài)的選項(xiàng)，分別是 2XX、3XX、4XX、5XX、所有請(qǐng)求狀態(tài)。每當(dāng)切換選項(xiàng)的時(shí)候，都會(huì)觸發(fā)右邊的關(guān)聯(lián)圖表，重新進(jìn)行查詢并獲取新的結(jié)果，最后把更新的結(jié)果顯示出來。

選擇器輸入標(biāo)記樣例

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

時(shí)間類型標(biāo)記樣例

最后一個(gè)例子是鉆取設(shè)置標(biāo)記。在例子中，點(diǎn)擊左邊的餅圖，比如美國，就會(huì)觸發(fā)右邊的聯(lián)動(dòng)圖表去做新的查詢。

鉆取設(shè)置標(biāo)記樣例

關(guān)于可視化技術(shù)還有非常多豐富的內(nèi)容，例如：

① 大數(shù)據(jù)圖表可視化優(yōu)化 。

② 儀表板可視化架構(gòu)。

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