基于ECharts的可視化通用視覺語言分析

楊明欣

摘要：歸納總結(jié)數(shù)據(jù)可視化的通用視覺語言，方便ECharts平臺(tái)的使用者快速了解和應(yīng)用數(shù)據(jù)可視化。通過圖形化方法來定量、定性地表達(dá)數(shù)據(jù)內(nèi)容特征，根據(jù)數(shù)據(jù)類型和屬性對(duì)ECharts平臺(tái)的可視化表征語法及視覺編碼呈現(xiàn)進(jìn)行分析。總結(jié)歸納出ECharts平臺(tái)的可視化通用視覺語言。掌握ECharts平臺(tái)的可視化通用視覺語言，可以使該平臺(tái)成為一個(gè)更為廣泛的跨學(xué)科交流工具。

關(guān)鍵詞：ECharts數(shù)據(jù)可視化通用視覺語言可視化表征語法視覺編碼

引言

“數(shù)據(jù)可視化”一詞大家早已不再陌生，在新聞事件或數(shù)據(jù)總結(jié)中時(shí)常會(huì)見到“漂亮”的數(shù)據(jù)可視化圖表，它通過可視化的語言向人們傳遞數(shù)據(jù)背后所隱含的信息。但大部分人對(duì)數(shù)據(jù)可視化一詞往往是一種視覺上的簡(jiǎn)單了解，提到數(shù)據(jù)可視化更多的理解為把抽象的數(shù)據(jù)轉(zhuǎn)化成了“漂亮”的圖表，想要實(shí)現(xiàn)它不僅要有數(shù)據(jù)分析能力，還要具備一定的藝術(shù)審美能力。尤其是對(duì)于初學(xué)者來說，抽象的數(shù)據(jù)和多樣化的圖表往往在一開始就給他們一定的壓力，使其不敢去接觸數(shù)據(jù)可視化。

目前已有許多可視化平臺(tái)能夠快速實(shí)現(xiàn)數(shù)據(jù)可視化，只是對(duì)于初學(xué)者來說，剛接觸時(shí)會(huì)沒有方向，不知從何開始著手使用。數(shù)據(jù)可視化的核心內(nèi)容就是將抽象的數(shù)據(jù)映射到與之匹配的可視化圖表中，其中最重要的就是可視化語言的應(yīng)用。通用的可視化語言就像是國(guó)際通用符號(hào)一樣，讓來自不同領(lǐng)域、具有不同文化的人也能夠快速地進(jìn)行溝通和交流。掌握了通用的視覺語言，就能快速的了解和應(yīng)用數(shù)據(jù)可視化。

一、研究背景

以目前數(shù)據(jù)可視化平臺(tái)的發(fā)展來看，創(chuàng)建數(shù)據(jù)可視化項(xiàng)目需要具有基本的相關(guān)知識(shí)和經(jīng)驗(yàn)，對(duì)于非專業(yè)的用戶來說，其創(chuàng)作過程不僅耗時(shí)長(zhǎng)，而且往往無法確定源數(shù)據(jù)集與可視化方法之間的映射關(guān)系，在構(gòu)建過程中常常會(huì)造成信息混亂及交互阻礙。如何使數(shù)據(jù)可視化成為一個(gè)更為廣泛的跨學(xué)科交流工具，將會(huì)是數(shù)據(jù)可視化平臺(tái)未來發(fā)展的首要任務(wù)。如果能構(gòu)建通用的可視化視覺語言，為用戶根據(jù)源數(shù)據(jù)提供參考性可視化方法與輔助分析，使可視化過程變得簡(jiǎn)單、快捷，讓用戶在創(chuàng)建過程中體驗(yàn)到數(shù)據(jù)可視化的獨(dú)特“美”，而不是被技術(shù)和知識(shí)經(jīng)驗(yàn)限制，將會(huì)大大提高數(shù)據(jù)可視化的設(shè)計(jì)效率，也將吸引更多的人投身于創(chuàng)建數(shù)據(jù)可視化設(shè)計(jì)的浪潮中。

二、ECharts平臺(tái)的設(shè)計(jì)模型

目前國(guó)內(nèi)外可視化平臺(tái)正處于發(fā)展期，國(guó)外以High Charts、D3等平臺(tái)為代表。其中High Charts平臺(tái)操作方法簡(jiǎn)單且圖表類型豐富，D3是相對(duì)來說更偏向于具有一定相關(guān)背景的人群，用戶可以根據(jù)自己的需求創(chuàng)建圖表。國(guó)內(nèi)以ECharts平臺(tái)為代表，其包含豐富的圖表案例和良好的圖形互動(dòng)界面，用戶可以根據(jù)自己的需求對(duì)圖表進(jìn)行修改和創(chuàng)建。文章將以ECharts平臺(tái)為例進(jìn)行相關(guān)內(nèi)容分析和展示。

圖1是Card，Mackinlay和Shneiderman提出的信息可視化參考流程模型[1]。在這個(gè)模型的起始點(diǎn)是數(shù)據(jù)，獲取到原始數(shù)據(jù)后需要對(duì)原始數(shù)據(jù)進(jìn)行清洗和精簡(jiǎn)，經(jīng)過過濾的數(shù)據(jù)將進(jìn)入到可視化項(xiàng)目庫中進(jìn)行可視化轉(zhuǎn)換，在這個(gè)階段中要根據(jù)數(shù)據(jù)特征選擇合適的視覺可視化映射圖表，在可視化圖表中根據(jù)人的視覺認(rèn)知能力對(duì)數(shù)據(jù)進(jìn)行布局、顏色、大小等形式上的合理視覺凸顯，引起用戶的視覺注意，避免給用戶造成認(rèn)知負(fù)荷。繪制好的可視化圖表將以交互的形式向用戶進(jìn)行展示，用戶可以根據(jù)自己的需求返回到起始點(diǎn)對(duì)數(shù)據(jù)進(jìn)行添加、刪減或修改，也可以通過可交互組件對(duì)可視化圖表進(jìn)行主觀調(diào)整，修改原始的可視化圖表形式。

ECharts平臺(tái)的可視化設(shè)計(jì)模型也是在信息可視化參考流程模型的基礎(chǔ)上進(jìn)行構(gòu)建的。ECharts平臺(tái)的可視化設(shè)計(jì)模式主要是針對(duì)人機(jī)交互下的可視化圖表映射，具有強(qiáng)大的圖表交互功能，如圖2。ECharts提供了圖例、時(shí)間軸、工具箱等交互組件。在圖例中，ECharts將常見的數(shù)據(jù)類型處理后直觀地呈現(xiàn)給用戶，為用戶提供不同的交互插件，方便用戶根據(jù)個(gè)人需求進(jìn)行可視化圖表的視覺展示。另外，用戶也可以直接編輯數(shù)據(jù)視圖，對(duì)原始數(shù)據(jù)進(jìn)行批量修改方便用戶根據(jù)個(gè)人需求從多個(gè)角度了解數(shù)據(jù)特征，該模型為用戶創(chuàng)建了挖掘、重整數(shù)據(jù)的能力，幫助用戶實(shí)現(xiàn)大數(shù)據(jù)到可視化圖表的視覺映射。

三、數(shù)據(jù)視覺編碼的定性和定量

定量是指建立在數(shù)值型數(shù)據(jù)之上，以數(shù)量形式存在著的屬性，并因此可以對(duì)其進(jìn)行測(cè)量。測(cè)量的結(jié)果用一個(gè)具體的量來表示。定性是歸納和演繹、是指通過非定量手段來探究事物的本質(zhì)。定性方法可以包括觀察、實(shí)驗(yàn)和分析以對(duì)象是否具有某個(gè)屬性維度的“質(zhì)”的闡述，以及它們之間是否存在關(guān)系[2]。由于數(shù)據(jù)的緯度具有定性和定量的特征，所以對(duì)于數(shù)據(jù)可視化呈現(xiàn)的視覺編碼設(shè)計(jì)方法也應(yīng)注重定性定量的表達(dá)。

（一）定量編碼維度。將大數(shù)據(jù)信息的某個(gè)可以量化的屬性通過視覺編碼進(jìn)行量化映射，讓用戶通過定量的視覺編碼快速感知到數(shù)值的數(shù)量屬性。常用的定量編碼包括位置、長(zhǎng)度對(duì)比、色彩對(duì)比、大小等。

1.位置：空間位置編碼可以幫助認(rèn)知主體通過橫縱坐標(biāo)的位置映射來讀取數(shù)據(jù)節(jié)點(diǎn)的數(shù)值，并對(duì)數(shù)值進(jìn)行某一維度的比較。對(duì)于具有趨勢(shì)的數(shù)據(jù)集，通過位置的定量表征，用戶可以直觀地看出數(shù)據(jù)在某一維度中數(shù)值的上下波動(dòng)情況，根據(jù)各數(shù)值點(diǎn)在橫縱坐標(biāo)的空間位置即可直觀地判斷各個(gè)數(shù)據(jù)值的大小。

2.長(zhǎng)度：線的長(zhǎng)度可以比較直觀地展示數(shù)據(jù)的定量維度。一般來說最長(zhǎng)的線條對(duì)應(yīng)著數(shù)據(jù)集中的最大值。圖3是2012年世界各國(guó)人口總量可視化圖表，通過柱狀圖的長(zhǎng)度能夠直觀地看出各數(shù)據(jù)值在定量維度上的差異程度，用戶可以在不查看具體數(shù)據(jù)值的情況下，僅根據(jù)長(zhǎng)度對(duì)比就能快速判斷出各數(shù)據(jù)值的大小對(duì)比。

3.色彩：色彩是可視化視覺編碼常使用的手段，色彩對(duì)于數(shù)據(jù)的定量表征通常是依靠色彩的飽和度或明度值。飽和度或明度高的色彩編碼通常就代表著數(shù)據(jù)在某個(gè)維度的值更大。圖4是2016年某人每天的步數(shù)可視化圖表，顏色編碼上采用的是黃到紅的漸變色視覺編碼，從可視化表中可以直觀地看到紅色飽和度越高的編碼元素代表走的步數(shù)越多，通過色彩編碼后的可視化圖可以直觀呈現(xiàn)此人一年的運(yùn)動(dòng)量情況。

4.大小：大小是定量可視化視覺編碼最常見的手段，大小通常指封閉圖形的面積及三維對(duì)象的體積。其中圖形面積大小的視覺編碼相較于體積視覺編碼應(yīng)用范圍更廣，由于人視覺認(rèn)知的局限性，對(duì)面積大小的認(rèn)知程度要優(yōu)于對(duì)體積大小的判斷。圖5是1990與2015年各國(guó)人均壽命與GDP可視化圖表，通過對(duì)圓形面積大小的定量編碼，幫助用戶直觀地看出各國(guó)人均壽命與GDP的差異情況。面積越大的圖形越能引起用戶的視覺注意，可以說通過面積大小進(jìn)行視覺編碼是最常見的定量視覺編碼手段。而對(duì)于體積的視覺編碼除特殊情況是不推薦采用的，相對(duì)來說人們對(duì)體積大小的差異度感知效果較差。

（二）定性編碼維度。主要體現(xiàn)在大數(shù)據(jù)信息的分類特征上，定性編碼維度可以體現(xiàn)數(shù)據(jù)在某一屬性上的同一性，最常見的定性編碼手段包括色相區(qū)分、圖形形狀區(qū)分和紋理區(qū)分。

1.色相：不同的色相常用來定性編碼數(shù)據(jù)不同維度或同一緯度不同類別。圖6是男性女性身高體重可視化圖表，紅色和藍(lán)色兩個(gè)對(duì)比明顯的色相分別代表女性和男性，用戶通過圖表可以直觀區(qū)分?jǐn)?shù)據(jù)信息的定性分類情況。需要注意的是，在色相環(huán)中應(yīng)盡量選擇距離較遠(yuǎn)，對(duì)比較大的色相，其視覺認(rèn)知效果更好。相鄰的色相也可以使用，但是需要注意的是編碼效果會(huì)隨著色相種類的增加而降低，當(dāng)相近的色相編碼的數(shù)據(jù)信息過多時(shí)，會(huì)干擾用戶的視覺注意，造成認(rèn)知績(jī)效降低，如圖9。

2.圖形形狀：不同的圖形形狀也是常用的定性編碼手段。形狀指的是物體或圖形的形態(tài)。不同的形狀具有不同的表情和性格。圓形、矩形、三角形等幾何形狀給人簡(jiǎn)潔、端正的視覺感受，但有時(shí)略顯單扳缺少變化;有不同形狀構(gòu)成的組合圖形，變化較豐富，給人活潑、動(dòng)感的視覺感受[3]。除了一些常見的幾何圖形外，也可以選擇包含語義的抽象圖形來定性的編碼一些信息。具有不同語義的抽象圖形能夠幫助用戶更好地理解對(duì)象屬性，只通過抽象圖形的形狀就能直觀分辨數(shù)據(jù)信息的分類情況及其所代表的對(duì)象屬性。

3.紋理：紋理也是較為常見的定性編碼手段，紋理能夠幫助用戶理解對(duì)象的空間位置，形成對(duì)區(qū)域的空間感知。另一方面，由于大部分紋理具有邊界特征，所以也能幫助用戶理解對(duì)象的邊界形狀。紋理方向的變化使不同區(qū)域形成明顯的邊界區(qū)分，幫助用戶直觀感知到數(shù)據(jù)信息在空間位置上的分類。

四、ECharts平臺(tái)的可視化表征語法

“在數(shù)據(jù)可視化的長(zhǎng)久歷史中，人對(duì)于數(shù)據(jù)可視化使用已久，有些圖形已經(jīng)有了固定的含義，人一看就知道它是做什么用處的。例如各種可視化作品中常見的‘柱形圖、‘餅圖、‘折線圖等圖標(biāo)，其代表的含義已經(jīng)深入人心，不需要特別解釋，用戶看到就能知道他們的功能。”[4]而這些被人們默認(rèn)的可視化表征正是通用視覺語言形成的關(guān)鍵。

大數(shù)據(jù)可視化的核心內(nèi)容是實(shí)現(xiàn)數(shù)據(jù)信息到可視化圖表的視覺映射，合乎規(guī)律的可視化語法才能成功挖掘出大數(shù)據(jù)背后的重要信息，并引導(dǎo)用戶進(jìn)入到圖表的世界中?？梢暬囊曈X呈現(xiàn)不單單是對(duì)“美”的形式的追求，而是內(nèi)容與形式之間的關(guān)系協(xié)調(diào)，是通過圖形化方法來定量、定性地表征數(shù)據(jù)內(nèi)容特征，根據(jù)數(shù)據(jù)類型和屬性進(jìn)行可視化映射，構(gòu)建被大眾廣泛接受和應(yīng)用的數(shù)據(jù)可視化表征語法[5]。

下面針對(duì)ECharts數(shù)據(jù)可視化平臺(tái)提供的各種數(shù)據(jù)類型映射的基礎(chǔ)圖表進(jìn)行分析，闡述其中包含的數(shù)據(jù)可視化表征語法，見表1。

（一）分類數(shù)據(jù)[6]。根據(jù)原始數(shù)據(jù)的屬性值進(jìn)行分組，直觀呈現(xiàn)數(shù)據(jù)特征，一般選用柱狀體、餅狀圖、散點(diǎn)圖和矩形樹圖等。描述分類屬性的數(shù)值，通常采用柱狀圖進(jìn)行展示，橫坐標(biāo)顯示類別，縱坐標(biāo)進(jìn)行數(shù)值比較，可以查看不同類別的數(shù)值對(duì)比。圖3是ECharts給出的世界各國(guó)2011年和2012年人口總量可視化圖表，其中可以通過矩形長(zhǎng)度及顏色劃分清楚地看出同一年份各國(guó)人口數(shù)目對(duì)比以及各國(guó)兩年內(nèi)人口變化值。描述比例屬性的數(shù)值，通常選用餅狀圖進(jìn)行展示，可以直觀呈現(xiàn)各分量在整體中的占比青況。圖7是ECharts給出的某站點(diǎn)用戶訪問來源可視化圖表。其中通過不同顏色的劃分，可以清楚地看出不同渠道的占比情況，發(fā)現(xiàn)超過一半的用戶通過搜索引擎進(jìn)入該網(wǎng)站。描述層級(jí)屬性的數(shù)值，通常選用矩形樹圖，矩形樹圖通過面積大小及顏色區(qū)分，可以直觀呈現(xiàn)出數(shù)據(jù)的層級(jí)關(guān)系及各層級(jí)數(shù)值比例。圖8是ECharts給出的此平臺(tái)配置項(xiàng)查詢分布可視化圖表，其中通過顏色色相和飽和度劃分，直觀地將配置的層級(jí)關(guān)系及所占比例呈現(xiàn)出來，讓用戶通過此矩形樹圖就能了解ECharts的內(nèi)在配置分布情況。

（二）時(shí)序數(shù)據(jù)。具有時(shí)間屬性的數(shù)據(jù)，一般選用折線圖、主題河流和日歷坐標(biāo)系等。描述隨時(shí)間變化屬性的數(shù)據(jù)，通常采用折線圖進(jìn)行展示，可以直觀地呈現(xiàn)數(shù)據(jù)隨時(shí)間變化逐漸向右延伸的趨勢(shì)及起伏軌跡。圖9是ECharts給出的某站點(diǎn)不同訪問來源在一周內(nèi)的訪問次數(shù)統(tǒng)計(jì)可視化圖表，其中通過不同顏色的劃分，以平滑的直線直觀展示各來源在一周內(nèi)訪問次數(shù)的變化起伏。描述具有周期屬性的數(shù)據(jù)，通常采用日歷坐標(biāo)系進(jìn)行展示，呈現(xiàn)出數(shù)據(jù)隨時(shí)間周期性變化的規(guī)律。圖4是ECharts給出的2016年某人每天的步數(shù)可視化圖表，其中采用日歷坐標(biāo)系，通過顏色的劃分呈現(xiàn)出此人一年內(nèi)每一天的步數(shù)。

（三）地理數(shù)據(jù)。具有空間屬性的數(shù)據(jù)，一般選用地理坐標(biāo)/地圖等。將地理位置和數(shù)據(jù)相結(jié)合，用地區(qū)分布圖表示地理位置和數(shù)據(jù)間的關(guān)系。

（四）關(guān)系數(shù)據(jù)。具有內(nèi)在關(guān)聯(lián)的數(shù)據(jù)，一般選用關(guān)系圖等。通過各節(jié)點(diǎn)鏈接展示數(shù)據(jù)的內(nèi)在關(guān)聯(lián)。圖10是ECharts給出的虛擬成員關(guān)系可視化圖表，通過顏色劃分，以清晰的線條將相關(guān)聯(lián)的節(jié)點(diǎn)（成員）鏈接，直觀呈現(xiàn)出各成員的內(nèi)在聯(lián)系及成員比重。

五、優(yōu)化視覺編碼形成凸顯信息

根據(jù)數(shù)據(jù)分類，將數(shù)據(jù)映射到與之屬性相對(duì)應(yīng)的視覺圖表后，用戶便可以通過圖表接收到信息的傳達(dá)，但由于大數(shù)據(jù)自身包含著巨大且復(fù)雜的信息量，往往會(huì)給用戶造成認(rèn)知負(fù)荷。由于工作記憶廣度的限制，用戶在讀取圖表時(shí)往往只能保存很少的視覺對(duì)象，這就要求圖表中的必要信息能夠在視覺呈現(xiàn)上吸引用戶注意形成凸顯信息。心理學(xué)家通過數(shù)百個(gè)實(shí)驗(yàn)測(cè)試各種可以被用戶預(yù)注意處理的特征[7]，將其分為形式、色彩、運(yùn)動(dòng)和空間位置。形狀包括線的方向、尺寸和附加標(biāo)記等;色彩包括色相、飽和度等;運(yùn)動(dòng)包括運(yùn)動(dòng)方向和運(yùn)動(dòng)速率等;空間位置包括二維位置、立體縱深和明暗凹凸等?；贓Charts平臺(tái)視覺呈現(xiàn)結(jié)果，主要選取幾個(gè)具有代表性的預(yù)處理特征進(jìn)行分析闡述。