點擊有驚喜

實驗背景介紹

了解更多2017云棲大會·杭州峰會 TechInsight & Workshop.

本手冊為云棲大會Workshop之《在線用戶行為分析：基于流式計算的數據處理及應用》場的《數據可視化：構建實時動態運營數據分析大屏》篇所需。主要幫助現場學員熟悉并掌握DataV數據可視化的操作和使用。

實驗涉及大數據產品

• DataV數據可視化

前提準備

必備條件：1、已經從云中沙箱中獲取了實驗所需的阿里云賬號和密碼。2、安裝56版本以上的GOOGLE CHROME瀏覽器。

實驗目標

本實驗將會實現如下的**實時動態運營數據分析大屏**大屏。

創建可視化大屏

經過上述《流數據處理：通過StreamSQL分析視頻日志》章節創建的流式任務，我們可以創建酷炫的可視化大屏展示網站實時流量統計情況，為了便于大家快速掌握DataV的使用，請使用事先準備好的RDS數據源。

進入DataV管理控制臺

點擊進入DataV可視化管理控制臺。

添加數據源

• step1：進入DataV管理控制臺，點擊左側菜單中**我的數據**。

• step2：點擊**+添加數據**，跳出新建數據對話框。

• step3：配置數據類型為RDS for MySQL、名稱、域名、用戶名/密碼、端口和數據庫，點擊“獲取數據列表”，選擇“workshop”，并點擊**測試連接**，最后點擊“完成”。

具體數據源配置項如下：

• 數據源類型：RDS for MySQL,內網，華東2
• 名稱：workshop_rds
• 域名：rm-uf6t1mym355i3qdsw.mysql.rds.aliyuncs.com
• 用戶名：root
• 密碼：Workshop001
• 端口：3306
• 數據庫：workshop

創建DataV可視化大屏

• step1：點擊左側**我的可視化**，進入配置大屏操作；再點擊**2017_WORKSHOP_HZ**進入大屏編輯界面。

• step2：此處大屏模板為此次Workshop量身定制，大家直接進入配置界面即可。DATAV功能布局見圖示。

配置DataV數據圖表

依次配置**實時在線人數（數字翻牌器）**、**熱門房間排名（輪播列表柱狀圖）**、**在線人數變化趨勢（折線圖）**、**用戶卡頓率趨勢（折線圖）**、**訪問設備比例（餅圖）**、**用戶故障地理分布（點熱力圖）**。

配置實時在線人數（數字翻牌器）

• step1：點擊數字翻牌器，進入配置**實時在線人數（數字翻牌器）**頁面。

• step2：點擊數字翻牌器左側“數據“選項卡，進入數據配置面板。

數據類型選擇**數據庫**，選擇數據庫為**workshop_rds**（剛創建的數據源名稱）在SQL底部勾選**自動更新**，設置每5秒請求一次。
因為數據表包含了多條數據，需要獲取最新的在線人數數據，故編寫SQL如下：

附：SQL說明

SELECT sum(count_value) as value FROM online_num

配置熱門房間排名（輪播列表柱狀圖）

點擊輪播列表在右側進行配置數據。統一選擇數據類型為**數據庫**，且選擇數據庫為之前所配置的workshop_rds。

附：SQL說明

SELECT sum(count_value) as value, roomid as content FROM hot_room_num where start_time < unix_timestamp()*1000 and start_time > (unix_timestamp()-100)*1000 group by content order by value DESC limit 5

配置在線人數變化趨勢（折線圖）

• step1：同樣點擊在線人數變化趨勢（折線圖），進入數據配置頁面。
• step2：配置數據源。

數據類型選擇**數據庫**，選擇數據庫為**workshop_rds**（剛創建的數據源名稱）在SQL底部勾選**自動更新**，設置每5秒請求一次。

附：SQL說明

SELECT count_value as y, substring(start_time, 1, 19) as xFROM online_numorder by start_time DESClimit 10

配置用戶卡頓率變化趨勢（折線圖）

• step1：同樣點擊用戶卡頓率變化趨勢（折線圖），進入數據配置頁面。
• step2：配置數據源。

數據類型選擇**數據庫**，選擇數據庫為**workshop_rds**（剛創建的數據源名稱）在SQL底部勾選**自動更新**，設置每5秒請求一次。

附：SQL說明

SELECT block as y, substring(start_time, 1, 19) as x FROM block_min order by start_time DESC limit 10

配置訪問設備比例（餅圖）

• step1：同樣點擊配置訪問設備比例（餅圖），進入數據配置頁面。

• step2：配置數據源。

  數據類型選擇**數據庫**，選擇數據庫為**workshop_rds**（剛創建的數據源名稱）在SQL底部勾選**自動更新**，設置每5秒請求一次。
  編寫SQL如下：
  

附：SQL說明

SELECT sum(count_value) as value, agent as type, max(start_time) as date_time FROM access_device where start_time < unix_timestamp()*1000 and start_time > (unix_timestamp()-100)*1000 group by agent

配置播放故障率（點熱力圖）

• step1：點擊地圖組件，再選擇點熱力圖層子組件。
  

• step2：進入數據配置頁面，配置數據源。

  數據類型選擇**數據庫**，選擇數據庫為**workshop_rds**（剛創建的數據源名稱）在SQL底部勾選**自動更新**，設置每5秒請求一次。
  我們需要的數據包括經度、緯度和故障率，但是原始數據中，經度、緯度在一個字段中，且該字段包含空數據等臟數據；同時，故障率為0的數據我們不需要，因為對繪制熱力圖不起作用。這就需要我們用DATAV數據過濾器處理。先用SQL查詢10000條數據，保證充足的數據量進行下一步過濾。
  附：SQL說明

SELECT * FROM region_failure_rate limit 10000

• step3.1 添加數據過濾器

• step3.2 將新建數據過濾器命名為“getVideoFaultValue”

• step3.3 編寫數據過濾器
  

• step3.4 選擇應用數據過濾器“getVideoFaultValue”

  附：數據過濾器代碼說明

var processedData = [];data.forEach(function(d, i) {if(d.remoteip && +d.fault_video > 0) {var dataObj = {};var latLngArray = d.remoteip.split(',');dataObj.lat = latLngArray[0];dataObj.lng = latLngArray[1];dataObj.value = +d.fault_video;processedData.push(dataObj);} })return processedData;

至此我們對所有組件的數據都已經配置完成。

預覽大屏

• 點擊右上角**預覽**，查看大屏效果，會看到數據實時的刷新。

發布大屏

通過發布操作可以將制作好的大屏分享別人查看。

• step1：點擊右上角**發布**，彈出發布對話框，打開發布按鈕會生成鏈接。

復制生成的URL即可共享你的大屏作品，觀看制作的流式數據大屏。其他驗證密碼、驗證Token可以參考更多教程來完成，此處將不贅述。

到此為止，相信大家一定程度掌握了阿里云流式日志的分析及處理解決方案有了一定了解，包括Log、StreamCompute到最后的DataV大屏展示。更多內容請大家持續關注文章的更新和后續的workshop內容出品。

點擊有驚喜

總結

以上是生活随笔為你收集整理的2017云栖大会·杭州峰会：《在线用户行为分析：基于流式计算的数据处理及应用》之《数据可视化：构建实时动态运营数据分析大屏》篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。