DataV實踐：建立迪士尼樂園實況大屏

KongFB發表於2017-12-25

我是一個迪士尼樂園的愛好者，我想擁有一塊大屏能實時顯示迪士尼樂園的情況，以便我覺得今天去不去樂園，去樂園玩什麼專案。。。

資料來源

我寫了一個抓包的程式，每天獲取一次樂園運營資料（專案開放時間，狀態燈），每5分鐘獲取一次樂園實況資料（排隊時間、客流量等）

現在用的還是Mysql儲存，計劃轉Redius，執行了快一年了，資料量太大效能越來越差~

關於DataV

DataV 是阿里雲出品的一款資料視覺化應用，可以通過圖形視覺化的介面快速搭建專業旨讓更多的人看到資料視覺化的魅力。

一般應用在交易大廳，展覽中心，管控中心，老闆辦公室等等場景，把一些關鍵資料集中展示在一塊巨大的LED螢幕上，其實就是巨大化的Dashboard，是當今數一數二的裝逼方式！

開始製作

進入datav.aliyun.com官網。我購買的是基礎版，51一年，不是很貴，功能對當前需求夠用。

佈局規劃

可以先借助草圖工具規劃一下：

頂部設計：因為是實時大屏，時間必不可少，頂部為時間 - 標題 - Logo 的佈局
左側設計：樂園客流量趨勢，樂園主題園區熱度，顯示樂園和各個主題園區的熱門情況
中間設計：上部分為輪播所有專案的等待時間+演出專案的時間表，下部分用柱狀圖顯示核心專案的排隊時間
右側設計：樂園平均等待時間 + 熱門專案等待時間 + 樂園指數，顯示樂園整體和熱門專案的情況

選擇模板

DataV提供了多套模板針對不同的場景，這裡第一個就非常適合這一套專案

選擇建立大屏進入編輯介面

頂部製作

選擇輔助圖形 - 新增時間器，再給標題加個邊框，再加個Logo，2分鐘完成！

左側製作

實施客流量：

選擇一個線框圖或者新建一個

然後進入圖表設定，選擇資料這裡我們使用Api，

這裡的Api必須返回的必須是直接資料，如{data:{},result:1} 這樣就不行

下面這是我們從伺服器讀到的資料

[
  {
    "num": 10730,
    "utime": "08:30"
  },
  {
    "num": 10730,
    "utime": "08:45"
  }...
]
複製程式碼

然後我們進行欄位對映，將x(x軸)匹配為utime，y（y軸）匹配為num（數值）這樣圖表就更新了！

我們還可以設定自動更新定時重新整理圖表

進入樣式設定：可對圖表進行個性化定製，這些基本上手就會我就不一一說明了，這裡重點說下資料配置->資料增量這個設定，這個勾選後可將資料進行擷取一部分，比如說我的api返回的是當前一天的資料流，我的圖表只要最近3小時，則可以設定最大容量進行擷取

主題園區熱度：

這個圖表反應各個園區的熱度，展示的就是每個主題園區所有專案的排隊時間總和

選擇常規圖表->柱狀圖->膠囊圖

資料配置和上圖一樣，這裡欄位對映需要增加一個類目（就是每個專案包含的哪個主題園區）

進入樣式設定：在資料系列中設定下每個專案的不同的顏色

中間製作

等待時間/演出時間表

選擇文字->輪播列表新建

資料配置同上，但這裡不需要進行欄位對映

\\資料響應結果
[
  {
    "name": "翱翔•飛越地平線",
    "id": "attSoaringOverHorizon",
    "start_time": "8:00",
    "end_time": "20:30",
    "status": "Operating",
    "type": 2,
    "fpTime": 0,
    "postedWaitMinutes": 180,
    "fastPassStartTime": 0,
    "fastPass": 1,
    "is_host": 1,
    "lng": "121.6717021420",
    "lat": "31.1498546788",
    "mapShow": false,
    "disance": 0
  },...
]
複製程式碼

進入樣式設定，選擇自定義列可配置需要展示的資料，這裡只要新增兩項，名稱和排隊時間