騰訊雲圖，讓數聽說話

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

本文由騰訊雲數據庫 TencentDB發表於雲+社區專欄

1、騰訊雲圖 數據之美

瞭解騰訊雲圖以前，咱們先來看看數據可視化？

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

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

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

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

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

顧客進店也能夠當即看到最受歡迎商品，購買到本身滿意的東西。

同時能夠進一步根據周邊環境，顧客消費狀況，分析用戶畫像，深挖更多有價值的數據。

騰訊雲圖把以上專業的有價值的內容模板化，提供出智慧零售行業模板，其餘相似場景的用戶能夠直接使用該模板，快速搭建本身的可視化大屏。

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

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

大屏設計頁面，主要分爲工具欄、圖層、畫布、配置面板（屬性、數據）。工具欄、圖層、配置面板能夠自由收放，讓畫布區域更大化，讓用戶能更精確的拖動組件進行沉浸式操做。

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

2、騰訊雲圖 方案設計

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

數據源包括：靜態數據、csv文件、API、騰訊雲/公網數據庫、騰訊雲監控。

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

3、騰訊雲圖 組件實戰

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

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

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

騰訊雲圖，一站式數據可視化展現平臺，零門檻打造出專業大屏數據展現！

問答 數據可視化在生活的哪裏能夠應用？ 相關閱讀 碰見大數據可視化 ： 【雲圖】讓數據可見 Redis勒索事件爆發，如何避免從刪庫到跑路? Redis雲端架構深刻淺出 【每日課程推薦】機器學習實戰！快速入門在線廣告業務及CTR相應知識

此文已由做者受權騰訊雲+社區發佈，更多原文請點擊

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

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