歡迎大家前往騰訊雲+社群，獲取更多騰訊海量技術實踐乾貨哦~

一、騰訊雲圖 資料之美

瞭解騰訊雲圖之前，我們先來看看資料視覺化？

這是星雲圖，他表示的是QQ同時線上人數，看到這個圖大家腦袋裡面想到什麼？QQ，藍鑽、綠鑽、太陽、月亮、上學的時候跟同學聊天，認識預設網友，你會是這眾多閃亮星星中的哪一個呢，進一步分析可以看到沿海地區相對閃亮，結合現實情況，沿海地區裝置網路相對發達，年輕化程度高，使用者活躍等等。這就是資料視覺化的魅力，給特定角色在特定場景講述特定的故事。資料視覺化的目的是讓資料說話，讓複雜抽象的資料以視覺的形式更準確快速的傳達

騰訊雲圖正是一站式資料視覺化平臺，支援多種資料來源，覆蓋多個領域模板，拖拽式自由佈局，零門檻快速打造專業大屏。說人話，就是說即使我不是專業工程師，也可以使用騰訊雲圖，把一堆抽象枯燥無味的資料通過屌炸天的方式展示出來。

騰訊雲圖已經接入的客戶案例包括：永輝超級物種，藝龍網全國IDC網路出口流量監控，格靈深瞳人臉特徵大資料分析等。

永輝超級物種深圳創投店的大屏，是兩塊豎的大屏，呈現商圈客流熱力，分時客流，門店最受歡迎飲品，最受歡迎水果單品等。某日統計到周邊商圈客流量超過30萬人，最受歡迎的飲品是農夫山泉和可口可樂，最愛的水果是火焰紅葡萄。

門店可以直觀的觀察到周圍客流量，以及購物意向，指導門店備貨等。

顧客進店也可以立即看到最受歡迎商品，購買到自己滿意的東西。

同時可以進一步根據周邊環境，顧客消費情況，分析使用者畫像，深挖更多有價值的資料。

騰訊雲圖把以上專業的有價值的內容模板化，提供出智慧零售行業模板，其他類似場景的使用者可以直接使用該模板，快速搭建自己的視覺化大屏。

騰訊雲圖不僅在智慧零售領域，在其他多個領域，也提供了許多行業模板，比如監控領域、政府工作等等。

使用者也可以根據模板自己根據特定場景定製自己的大屏，騰訊雲圖提供豐富的元件，有表示對比關係的柱狀圖、條形圖、折線圖等，表示構成的餅圖、面積圖等，表示分佈的散點圖、直方圖等，還有跟地理位置有關的多種地圖。這些元件騰訊雲圖大部分自主研發，也接入echarts等第三方開源元件。

大屏設計頁面，主要分為工具欄、圖層、畫布、配置面板（屬性、資料）。工具欄、圖層、配置面板可以自由收放，讓畫布區域更大化，讓使用者能更精確的拖動元件進行沉浸式操作。

跟《三體》裡面描述未來世界如出一轍。它這樣描述：這個世界到處都是簡潔空蕩的，幾乎見不到任何設施，只有在需要時，設施才會出現，而且是在任何需要的位置出現。世界在被技術複雜化後，正在重新變得簡潔起來，技術被深深地隱藏在現實的後面。

二、騰訊雲圖 方案設計

如此酷炫，能讓資料說話的騰訊雲圖具體怎麼實現的呢？騰訊雲圖的主要模組包括：元件庫、大屏設計、屬性管理、資料管理。 元件庫包括基礎元件\地圖元件\圖表元件\裝飾元件\文字元件\媒體元件\小部件等，每個元件都有自己的屬性定義，通過bundle-loader非同步載入。 大屏設計包括工具欄、畫布、圖層、屬性、資料等。 屬性管理包括基礎元件（比如文字輸入框、數字輸入框、開關按鈕等），複合元件（比如標題元件、位置元件等）、資料對映配置。

資料來源包括：靜態資料、csv檔案、API、騰訊雲/公網資料庫、騰訊雲監控。

具體實現過程：畫布中一個元件面積圖，它由資料、程式碼、屬性組成，通過控制面板調整任何屬性或者資料，都可以改變該面積圖。使用react redux經典三部曲action，store，reducer實現。當用戶改變屬性或者資料，會發起 action ，store 會呼叫 dispatch 方法向某個特定的 reducer 傳遞該 action，reducer 收到 action 之後執行對應的更新邏輯然後返回一個新的 state，state 的更新最終會傳遞到根reducer處，返回一個全新的完整的 state，然後傳遞給元件進行更新。

三、騰訊雲圖 元件實戰

一個生活中隨處可見的進度條的具體實現過程。元件實現過程一般包括需求分析、屬性分析、模型建立、開發實現、測試交付。一個簡單的進度條的屬性包括進度條樣式（邊框樣式、填充樣式、開始顏色、結束顏色、密度），文字樣式（字型字號、文字顏色、間距、精度等）

元件建模：進度條由氣泡和進度條組成，氣泡由一個邊框和文字組成，進度條則由外框、遮罩層、剪下層、漸變層組成。 接下來是實現的具體程式碼

元件實現完成，如何接入騰訊雲圖。每個元件都需要定義自己的屬性。包括元件名稱、版本、屬性等。平臺根據這個屬性會生成對應的控制面板，以及預設屬性值。這樣元件就可以接入騰訊雲圖，進行自由的拖拽佈局。

騰訊雲圖，一站式資料視覺化展示平臺，零門檻打造出專業大屏資料展示！

此文已由作者授權騰訊雲+社群釋出，更多原文請點選

搜尋關注公眾號「雲加社群」，第一時間獲取技術乾貨，關注後回覆1024 送你一份技術課程大禮包！

海量技術實踐經驗，盡在雲加社群！