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

楊明欣

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

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

引言

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

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

一、研究背景

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

二、ECharts平臺的設(shè)計模型

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

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

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

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

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

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

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

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

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

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

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

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

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

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

四、ECharts平臺的可視化表征語法

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

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

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

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

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

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

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

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

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