這篇心得，主要針對(duì)智慧城市數(shù)據(jù)融合可視化系統(tǒng)的設(shè)計(jì)實(shí)施經(jīng)驗(yàn)進(jìn)行總結(jié)，在設(shè)計(jì)理念、設(shè)計(jì)方法、技術(shù)實(shí)現(xiàn)、常見問題等方面，對(duì)設(shè)計(jì)實(shí)施經(jīng)驗(yàn)進(jìn)行總結(jié)，以方便讀者更好的了解可視化系統(tǒng)的設(shè)計(jì)實(shí)現(xiàn)。

01 明確系統(tǒng)的應(yīng)用場景

智慧城市數(shù)據(jù)可視化系統(tǒng)，不同于普通運(yùn)行于PC端的系統(tǒng)，它的應(yīng)用場景通常是展示、匯報(bào)、會(huì)議、應(yīng)急指揮等，受眾通常是關(guān)心數(shù)據(jù)統(tǒng)計(jì)結(jié)果以及發(fā)展態(tài)勢的決策者、管理者。

這一點(diǎn)是非常重要的，只有了解了系統(tǒng)的應(yīng)用場景、用途、受眾，才能從使用者的角度去進(jìn)行設(shè)計(jì)和實(shí)現(xiàn)。

02 系統(tǒng)功能結(jié)構(gòu)的規(guī)劃

智慧城市的可視化應(yīng)用中，通常涉及城市管理的多個(gè)領(lǐng)域，如：教育、旅游、醫(yī)療、交通等等，可以將每個(gè)領(lǐng)域作為一個(gè)“專題”，每個(gè)專題根據(jù)內(nèi)容的多少設(shè)計(jì)一個(gè)或多個(gè)數(shù)據(jù)展示頁面。

在系統(tǒng)的最外層，可以設(shè)計(jì)一個(gè)如上圖照片中的“具備系統(tǒng)主菜單功能的封面”，系統(tǒng)啟動(dòng)運(yùn)行后，首先進(jìn)入這個(gè)界面。

進(jìn)入具體的專題后，可以通過上方TAB風(fēng)格的菜單來進(jìn)行各模塊的切換。模塊的切換也可通過側(cè)邊隱藏式標(biāo)簽菜單來實(shí)現(xiàn)。

03 系統(tǒng)之間的對(duì)接

數(shù)據(jù)可視化系統(tǒng)是城市運(yùn)行數(shù)據(jù)的生動(dòng)展示方式，在實(shí)施過程中，通常需要對(duì)接基礎(chǔ)業(yè)務(wù)系統(tǒng)，從基礎(chǔ)業(yè)務(wù)系統(tǒng)獲取數(shù)據(jù)，從而進(jìn)行數(shù)據(jù)的可視化展示。

• 方式1：對(duì)于已經(jīng)實(shí)施了ESB總線系統(tǒng)的智慧城市項(xiàng)目，主要通過ESB以WS方式進(jìn)行數(shù)據(jù)對(duì)接。
• 方式2：對(duì)于第三方系統(tǒng)，主要采用REST的方式進(jìn)行對(duì)接，數(shù)據(jù)格式為JSON。

04 數(shù)據(jù)可視化組件的使用

在標(biāo)準(zhǔn)版本的智慧城市數(shù)據(jù)可視化系統(tǒng)中，采用了echarts作為主要的數(shù)據(jù)可視化組件。

echarts作為國內(nèi)一款相對(duì)較為成功的開源項(xiàng)目，總體上來說有這樣的一些優(yōu)點(diǎn)：

1. 容易使用，官方文檔比較詳細(xì)，而且官網(wǎng)中提供大量的使用示例供大家使用。
2. 支持按需求打包，官網(wǎng)提供了在線構(gòu)建的工具，可以在線構(gòu)建項(xiàng)目時(shí)，選擇項(xiàng)目所需要使用到的模塊，從而達(dá)到減小JS文件的體積。
3. 開源
4. 支持中國地圖功能

對(duì)于一些標(biāo)量數(shù)據(jù)，主要采用自行設(shè)計(jì)的label組件來進(jìn)行顯示。

對(duì)于適合一些列表方式表現(xiàn)的數(shù)據(jù)集合，需要自行設(shè)計(jì)與總體風(fēng)格匹配的表格進(jìn)行顯示。

05 常用圖表及用法

(1)折線圖

適用場景：折線圖適用于二維的大數(shù)據(jù)集，還適合多個(gè)二維數(shù)據(jù)集的比較。折線圖并不關(guān)注具體的數(shù)字是多少，也不強(qiáng)調(diào)個(gè)體的對(duì)比，而是從整體宏觀的角度，把握發(fā)展的趨勢。

(2)面積圖

適用場景：強(qiáng)調(diào)數(shù)量隨時(shí)間而變化的程度，也可用于引起人們對(duì)總值趨勢的注意。

延伸圖表：堆積面積圖、百分比堆積面積圖還可以顯示部分與整體之間(或者幾個(gè)數(shù)據(jù)變量之間)的關(guān)系。

(3)柱形圖

適用場景：柱形圖關(guān)注各個(gè)元素之間的分布情況，強(qiáng)調(diào)的是個(gè)體之間的對(duì)比，突出詳細(xì)的數(shù)據(jù)。 柱狀圖也可看趨勢，但不宜展示一個(gè)宏觀的長遠(yuǎn)的趨勢，它更適宜展示近期的發(fā)展趨勢。

衍生圖表：堆積柱形圖，柱形圖組，條形圖，堆積條形圖等。

注意：為設(shè)計(jì)美觀，柱形圖之間的間隔設(shè)置為1/2寬度為宜。

(4)折線柱形組合圖

適用場景：要求折線圖與柱狀圖之間存在一定的關(guān)聯(lián)，放在一起更能體現(xiàn)更多的問題，從而實(shí)現(xiàn)多組數(shù)據(jù)統(tǒng)計(jì)在一張圖表中的形式。

(5)瀑布圖

適用場景：表達(dá)數(shù)個(gè)特定數(shù)值之間的數(shù)量變化關(guān)系，最終展示一個(gè)累計(jì)值。展示兩個(gè)數(shù)據(jù)點(diǎn)之間的演變過程，還可以展示數(shù)據(jù)是如何累計(jì)的。

劣勢：適用場景較少

(6)散點(diǎn)圖

適用場景：散點(diǎn)圖適用于海量的三維數(shù)據(jù)集。所有數(shù)據(jù)以散點(diǎn)的形態(tài)分布在坐標(biāo)軸內(nèi)，以點(diǎn)的位置坐標(biāo)和顏色作為變量個(gè)體的區(qū)分，通過點(diǎn)的數(shù)量分布來判斷變量之間是否存在某種關(guān)聯(lián)。一般情況下xy軸代表的數(shù)據(jù)是線性數(shù)據(jù)。

劣勢：散點(diǎn)圖不適用于中小規(guī)模數(shù)據(jù)集。

衍生圖表：氣泡圖。氣泡圖散點(diǎn)圖增加了氣泡面積這個(gè)變量。

(7)餅圖/環(huán)形圖/南丁格爾玫瑰圖

適用場景：顯示各項(xiàng)的大小與各項(xiàng)總和的比例。適用簡單的占比比例圖，在不要求數(shù)據(jù)精細(xì)的情況適用。餅圖強(qiáng)調(diào)的是個(gè)體與整體之間的比較，適用于突出某元素的占比情況。

衍生圖表：環(huán)形圖組和嵌套餅圖。

單個(gè)的餅圖用于表現(xiàn)單個(gè)元素占比情況，要求各元素組成比例之和是100%。

環(huán)形圖組各個(gè)環(huán)形代表元素指標(biāo)可以沒有組成關(guān)系，更強(qiáng)調(diào)對(duì)比關(guān)系。

嵌套餅圖則是針對(duì)同一對(duì)象的兩種不同組成分類方式，表現(xiàn)各個(gè)元素占比情況。

(8)雷達(dá)圖

適用場景：雷達(dá)圖適用于多維數(shù)據(jù)(四維以上)，一般是用來表示某個(gè)數(shù)據(jù)字段的綜合情況，

劣勢：理解成本較高，數(shù)據(jù)點(diǎn)太多的話辨別起來有困難。

(9)儀表盤

適用場景：適用于表現(xiàn)重要數(shù)據(jù)指標(biāo)。儀表盤需要提供該指標(biāo)的正常值范圍以及高于和低于正常值的區(qū)間，通過指針標(biāo)識(shí)當(dāng)前指標(biāo)的具體數(shù)值并清晰的看出某個(gè)指標(biāo)值所在的區(qū)間。起到很好的預(yù)警功能。

可以通過多個(gè)儀表盤組合或同一儀表盤設(shè)置多個(gè)指針的方式來表現(xiàn)同類或同一對(duì)象的多個(gè)指標(biāo)數(shù)據(jù)組合。

(10)字符云

適用場景： 通過字號(hào)和分布顯示詞頻，可以用來做一些用戶畫像、用戶標(biāo)簽的工作。

優(yōu)勢：很酷炫，美觀。

劣勢：使用場景單一。

06 數(shù)據(jù)人工編輯功能的必要性

這一條通過實(shí)際項(xiàng)目總結(jié)出的經(jīng)驗(yàn)。很多實(shí)際項(xiàng)目中，由于用戶演示的時(shí)間節(jié)點(diǎn)、系統(tǒng)驗(yàn)收時(shí)間節(jié)點(diǎn)的制約，可視化系統(tǒng)的“就緒”時(shí)間節(jié)點(diǎn)有時(shí)不會(huì)晚于基礎(chǔ)業(yè)務(wù)系統(tǒng)的上線運(yùn)行時(shí)間。換句話說，可能基礎(chǔ)業(yè)務(wù)系統(tǒng)剛剛上線，甚至還沒有上線，就需要演示可視化系統(tǒng)。而這時(shí)進(jìn)行真正意義上的數(shù)據(jù)對(duì)接是來不及的。所以，根據(jù)這個(gè)經(jīng)驗(yàn)，我們在系統(tǒng)的后臺(tái)提供了數(shù)據(jù)的人工編輯功能。在真實(shí)數(shù)據(jù)還無法提供時(shí)，可以通過人工維護(hù)的方式來滿足系統(tǒng)演示的需求。這一功能為實(shí)際項(xiàng)目的客戶演示、驗(yàn)收，提供了很大的便利。

07 將數(shù)據(jù)進(jìn)行“可視化”的設(shè)計(jì)過程

下面以宏觀經(jīng)濟(jì)數(shù)據(jù)可視化系統(tǒng)為例，以圖文的方式說明一下設(shè)計(jì)過程。

(1)首先可以采用思維導(dǎo)圖的方式，將收集的數(shù)據(jù)項(xiàng)進(jìn)行整理，從而發(fā)現(xiàn)這些數(shù)據(jù)項(xiàng)之間的邏輯關(guān)系和內(nèi)在聯(lián)系。并總結(jié)出幾個(gè)需要設(shè)計(jì)的主題。

(2)將專題中的數(shù)據(jù)項(xiàng)，進(jìn)行歸類整理，在頁面上進(jìn)行布局，要考慮數(shù)據(jù)項(xiàng)的表現(xiàn)形式、圖標(biāo)類型，并設(shè)計(jì)出數(shù)據(jù)項(xiàng)之間的聯(lián)動(dòng)關(guān)系。輸出“線框圖”作為數(shù)據(jù)可視化專題設(shè)計(jì)原稿。

(3)以線框圖為輸入，輸出專題UI設(shè)計(jì)圖。并在電腦屏幕、超高分大屏上進(jìn)行實(shí)際展示，推敲、修改、定稿。