阿里雲Clouder認證

五、使用DataV製作實時銷售資料視覺化大屏

1. 課程目標

(1) 瞭解資料視覺化的應用場景
(2) 掌握阿里雲DataV視覺化工具
(3) 瞭解視覺化大屏製作的流程
(4) 使用DataV模板製作視覺化大屏

(5)目錄
  - 資料視覺化介紹
  - DataV介紹及基本操作 
  - 視覺化資料大屏設計
  - 任務：製作實施銷售大屏
複製程式碼

2. 資料視覺化介紹

(1)資料視覺化

• **資料視覺化：**是指將相對複雜的資料通過可視的、互動的方式進行展示，從而形象、直觀地表達資料蘊含的資訊和規律。

(2)視覺化的目的

• 展示——用資料展示企業特色：
  • 企業形象傳播
  • 峰會論壇展臺
  • 嘉賓訪客接待
• 驅動——用資料驅動業務發展：
  • 檢視業務實況
  • 業務監控預警
  • 驅動內部相應
• 洞察——用資料洞察預測未來：
  • 多維資料呈現
  • 輔助資料洞察
  • 視覺發現新知

(3)視覺化大屏

• 種類：

  • 展示類
  • 分析類
  • 監控類

• 展示類大屏：

  • 用於領導、嘉賓接待，或業務交流類活動
  • 偏重於展示業務資訊結構以及業務亮點
  • 重點需要梳理業務相關的資訊架構
  • 平鋪佈局。配合視覺元素，串聯講解指令碼

• 分析類大屏：

  • 展示資料關聯及分析結果，為多人員討論決策提供幫助
  • 通過頁面展示細粒度比較資料，通過互動實現資料的串聯
  • 展示關聯性最高且最為關鍵的內容，多用於討論決策
  • 對整體行業有一定的認知，理解資料之間的相互關係

• 監控類大屏：

  • 為公司內部人員或相關的業務運維人員提供監控資訊
  • 展示業務整體概況，達到對業務實時監控及排程的目的
  • 除概況外還需要展示分析結果，並給出優化方案
  • 比較依賴行業經驗，在資訊設計時會以業務方為主導

3. DataV介紹

(1)DataV介紹

• DataV是一款阿里雲提供的資料視覺化線上工具。通過拖拽式的操作，使用資料連線、視覺化元件庫、行業設計模板庫、多終端適配與釋出運維於等功能，讓非專業人員也可以快速的將資料的價值通過視覺進行傳達。
• **多種精美模板：**可直接使用多種場景下的專業的視覺化模板
• **多種資料來源接入：**支援RDS(阿里雲資料庫)、ADS(分析型資料庫)、靜態文字、本地檔案csv、線上API等
• **多種國表元件：**多種圖表自由搭配，傳統圖表、地圖、拓撲圖等
• **播控、多屏適配與釋出：**針對PC/大屏端的各種解析度適配與拉伸，播放控制等

(2)特性1——多種場景模板

• DataV提供指揮中心、地理分析、實時監控、彙報展示等多種場景模版，簡單修改即可快速投入使用。即便沒有設計師，也可以做出高設計水準的視覺化作品。

(3)特性2——豐富開放的圖表庫

• 除針對業務展示優化過的常規圖表外，還能夠繪製包括海量資料的地理軌跡、地理飛線、熱力分佈、地域區塊、3D地圖、3D地球、地理資料的多層善加。此外還接入了ECharts，AntV-G2等第三方開源圖表庫。

(4)特性3——支援多種資料來源

• 能夠接入包括阿里雲分析型資料庫(AnalyticDB，原ADS)、RDS for MySQL、本地CSV上傳和線上API接入，且支援動態請求。可實現各類大資料實時計算、監控的需求，充分發揮大資料計算的能力。

(5)特性4——零門檻圖形化設計介面

• 提供多種的業務模組級而非圖表元件的Widget，所見即所得式的配置方式，只需要通過拖拖拽拽，無需程式設計能力，即可創造出專業的視覺化應用。

(6)特性5——支援資料互動分析

• 能夠圖形化地配置圖表之間的互動聯動，通過圖表之間的引數傳遞實現資料的互動分析。

(7)特性6——多種適配與釋出方式

• 特別針對拼接大屏端的展示做了解析度優化，能夠適配非常規拼接解析度做適配優化。建立的視覺化應用能夠釋出分享，沒有購買DataV產品的使用者也可以訪問到應用，企業版可設定訪問密碼進行訪問許可權控制。

(8)其他特性

• 本地化執行部署
• 大屏拼接中控系統
• 支援二次開發

4. 視覺化大屏設計方法

(1)資料視覺化要考慮的問題

• 解決什麼問題？
• 想要表達什麼？
• 是否瞭解業務？
• 是否可以實現？
  
  
• 什麼場景使用？
• 目標使用者是誰？
• 他們需要什麼？
• 有什麼偏好嗎？
  
  
• 哪些資料可用？
• 哪些類別關係？
• 哪些表現方式？
• 如何佈局組織？

(2)大屏製作流程

• **蒐集資訊點：**瞭解需求方的目的，以及想要突出展示的內容
• **瞭解物理屏：**瞭解大屏的型別、解析度、尺寸、比例、環境等
• **處理資訊點：**整理資訊板塊，包括核心、重要、詳細等部分
• **資訊點視覺化：**指標類資訊點和地理類資訊點，選擇合適方式
• **資料預研：**瞭解資料資訊，規模、特徵、聯絡等
• **繪製原型稿：**確定敘事邏輯，選定佈局方式，組織視覺化元件
• **繪製視覺稿：**根據原型稿，使用DataV完成終稿設計

(3)設計原則

• 口訣1——大小適配、主次分明：
  • **突出層次結構：**每個大業務塊對應到小業務塊時，用3-6個小標題來表示。用邊框把同類資料放在一起，越優先的越放在中間+上方，優先順序越低的放在兩側和下方。
  • **合理拆解板塊：**先從工作總結報告入手，分出幾大業務塊，業務塊數量能和拼接屏塊數與播放模式相適配。按照拆分好的板塊組織資訊點。
    
    
• 口訣2——完微兼顧、動靜結合：
  • **KPI設定：**KPI都要有細節來解釋。大業務塊用2-3個KPI來總覽，每個小塊再用1-2個指標和2-4個解釋性的資訊來填補。細節也都要有提煉性的教據來表達...
  • ** 老三樣：**
    • 對比細分超勢排行榜...
    • 餅圖、桂圖、氣泡圖...
    • 折線趨勢、同比環比...
  • 新三樣：
    • 明細預警輪播飛線、實時軌跡...
    • 預則評分、個體預警...
    • LOG0牆，指標意動...