這篇心得，主要針對智慧城市數據融合可視化系統的設計實施經驗進行總結，在設計理念、設計方法、技術實現、常見問題等方面，對設計實施經驗進行總結，以方便讀者更好的了解可視化系統的設計實現。

01 明確系統的應用場景

智慧城市數據可視化系統，不同于普通運行于PC端的系統，它的應用場景通常是展示、匯報、會議、應急指揮等，受眾通常是關心數據統計結果以及發展態勢的決策者、管理者。

這一點是非常重要的，只有了解了系統的應用場景、用途、受眾，才能從使用者的角度去進行設計和實現。

02 系統功能結構的規劃

智慧城市的可視化應用中，通常涉及城市管理的多個領域，如：教育、旅游、醫療、交通等等，可以將每個領域作為一個“專題”，每個專題根據內容的多少設計一個或多個數據展示頁面。

在系統的最外層，可以設計一個如上圖照片中的“具備系統主菜單功能的封面”，系統啟動運行后，首先進入這個界面。

進入具體的專題后，可以通過上方TAB風格的菜單來進行各模塊的切換。模塊的切換也可通過側邊隱藏式標簽菜單來實現。

03 系統之間的對接

數據可視化系統是城市運行數據的生動展示方式，在實施過程中，通常需要對接基礎業務系統，從基礎業務系統獲取數據，從而進行數據的可視化展示。

• 方式1：對于已經實施了ESB總線系統的智慧城市項目，主要通過ESB以WS方式進行數據對接。
• 方式2：對于第三方系統，主要采用REST的方式進行對接，數據格式為JSON。

04 數據可視化組件的使用

在標準版本的智慧城市數據可視化系統中，采用了echarts作為主要的數據可視化組件。

echarts作為國內一款相對較為成功的開源項目，總體上來說有這樣的一些優點：

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

對于一些標量數據，主要采用自行設計的label組件來進行顯示。

對于適合一些列表方式表現的數據集合，需要自行設計與總體風格匹配的表格進行顯示。

05 常用圖表及用法

(1)折線圖

適用場景：折線圖適用于二維的大數據集，還適合多個二維數據集的比較。折線圖并不關注具體的數字是多少，也不強調個體的對比，而是從整體宏觀的角度，把握發展的趨勢。

(2)面積圖

適用場景：強調數量隨時間而變化的程度，也可用于引起人們對總值趨勢的注意。

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

(3)柱形圖

適用場景：柱形圖關注各個元素之間的分布情況，強調的是個體之間的對比，突出詳細的數據。 柱狀圖也可看趨勢，但不宜展示一個宏觀的長遠的趨勢，它更適宜展示近期的發展趨勢。

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

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

(4)折線柱形組合圖

適用場景：要求折線圖與柱狀圖之間存在一定的關聯，放在一起更能體現更多的問題，從而實現多組數據統計在一張圖表中的形式。

(5)瀑布圖

適用場景：表達數個特定數值之間的數量變化關系，最終展示一個累計值。展示兩個數據點之間的演變過程，還可以展示數據是如何累計的。

劣勢：適用場景較少

(6)散點圖

適用場景：散點圖適用于海量的三維數據集。所有數據以散點的形態分布在坐標軸內，以點的位置坐標和顏色作為變量個體的區分，通過點的數量分布來判斷變量之間是否存在某種關聯。一般情況下xy軸代表的數據是線性數據。

劣勢：散點圖不適用于中小規模數據集。

衍生圖表：氣泡圖。氣泡圖散點圖增加了氣泡面積這個變量。

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

適用場景：顯示各項的大小與各項總和的比例。適用簡單的占比比例圖，在不要求數據精細的情況適用。餅圖強調的是個體與整體之間的比較，適用于突出某元素的占比情況。

衍生圖表：環形圖組和嵌套餅圖。

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

環形圖組各個環形代表元素指標可以沒有組成關系，更強調對比關系。

嵌套餅圖則是針對同一對象的兩種不同組成分類方式，表現各個元素占比情況。

(8)雷達圖

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

劣勢：理解成本較高，數據點太多的話辨別起來有困難。

(9)儀表盤

適用場景：適用于表現重要數據指標。儀表盤需要提供該指標的正常值范圍以及高于和低于正常值的區間，通過指針標識當前指標的具體數值并清晰的看出某個指標值所在的區間。起到很好的預警功能。

可以通過多個儀表盤組合或同一儀表盤設置多個指針的方式來表現同類或同一對象的多個指標數據組合。

(10)字符云

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

優勢：很酷炫，美觀。

劣勢：使用場景單一。

06 數據人工編輯功能的必要性

這一條通過實際項目總結出的經驗。很多實際項目中，由于用戶演示的時間節點、系統驗收時間節點的制約，可視化系統的“就緒”時間節點有時不會晚于基礎業務系統的上線運行時間。換句話說，可能基礎業務系統剛剛上線，甚至還沒有上線，就需要演示可視化系統。而這時進行真正意義上的數據對接是來不及的。所以，根據這個經驗，我們在系統的后臺提供了數據的人工編輯功能。在真實數據還無法提供時，可以通過人工維護的方式來滿足系統演示的需求。這一功能為實際項目的客戶演示、驗收，提供了很大的便利。

07 將數據進行“可視化”的設計過程

下面以宏觀經濟數據可視化系統為例，以圖文的方式說明一下設計過程。

(1)首先可以采用思維導圖的方式，將收集的數據項進行整理，從而發現這些數據項之間的邏輯關系和內在聯系。并總結出幾個需要設計的主題。

(2)將專題中的數據項，進行歸類整理，在頁面上進行布局，要考慮數據項的表現形式、圖標類型，并設計出數據項之間的聯動關系。輸出“線框圖”作為數據可視化專題設計原稿。

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