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

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

數據來源

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

如今用的仍是Mysql存儲，計劃轉Redius，運行了快一年了，數據量太大性能愈來愈差~

關於DataV

DataV 是阿里雲出品的一款數據可視化應用，能夠經過圖形可視化的界面快速搭建專業旨讓更多的人看到數據可視化的魅力。

通常應用在交易大廳，展覽中心，管控中心，老闆辦公室等等場景，把一些關鍵數據集中展現在一塊巨大的LED屏幕上， 其實就是巨大化的Dashboard，是當今首屈一指的裝逼方式！

開始製做

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

佈局規劃

能夠先借助草圖工具規劃一下：

1. 頂部設計：由於是實時大屏，時間必不可少，頂部爲時間 - 標題 - Logo 的佈局
2. 左側設計：樂園客流量趨勢，樂園主題園區熱度，顯示樂園和各個主題園區的熱門狀況
3. 中間設計：上部分爲輪播全部項目的等待時間+演出項目的時間表，下部分用柱狀圖顯示核心項目的排隊時間
4. 右側設計：樂園平均等待時間 + 熱門項目等待時間 + 樂園指數，顯示樂園總體和熱門項目的狀況

選擇模板

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
  },...
]
複製代碼

進入樣式設置，選擇自定義列可配置須要展現的數據，這裏只要添加兩項，名稱和排隊時間

演出時間表的配置和項目等待時間同樣

而後在下面建立一個等待時間垂直柱狀圖，這樣能夠更直觀的顯示哪一個項目人數最多，配置同上

右側製做

右側的製做和左側同樣，就不一一講解了。

完成效果

附上個人小書房，這下擡頭就能夠看到樂園的實況，是否是很方便呢！

附上個人微信，歡迎喜歡迪士尼和先後端的一塊兒交流！