職場IT老手教你3步教你玩轉視覺化大屏設計，讓領導眼前一亮！

我是製造企業的IT中心的研發人員，平常工作就是配合業務部門出出報表，選型一些商業軟體，並在內部負責實施運維。最近領匯出去參觀了一些數位化轉型比較領先的工廠和製造企業，回來就甩給我幾張圖，問能不能我們也做幾個這樣有科技感的、酷炫的大屏，重點是可以向上彙報的。

我深入理解了一下領導的需求：不要總是表格，樸素無華的報表了？希望可以是這樣的，加上GIS地圖的：

也可以是這樣有3D立體的效果：

我非常理解當領導看到別人採訪或者參觀同行頭部公司時，看到視覺化大屏的那種震驚和驚喜，甚至是非常羨慕。

於是我開始深入研究這樣的大屏究竟是如何製作的。

開始的時候總是不知道從何入手，怎樣能設計出一個又能展示資料還能看著賞心悅目的大屏呢？不要慌，其實製作一個炫酷的視覺化大屏往往沒有那麼難，只要掌握三步，就可以自己實現大屏開發。那今天我就將我畢生的研究分享給大家，讓每一個人都玩轉大屏。

製作大屏牢記三步：資料準備、整體佈局、細節美化。

資料準備

製作大屏的第一步當然需要資料的支撐，那為了滿足不同場景，多源分析必不可少。尋找了一款合適的BI 大屏工具，Wyn 商業智慧，Wyn支援現在現在市面上的絕大部分通用的資料庫。無論時我們常用的關係型資料庫（Oracle、sql server、mysql等）、檔案型資料庫（Excel、Json等）、非關係型資料庫（MongoDb、ElasticSearchDSL）或者oData資料來源等等。

無論我們之前的業務系統是使用的什麼，現在都可以統統包含進來。或許我們的資料沒有在一個資料庫中存放，因為業務的區分，可能儲存在了不同的資料庫中，但是進行資料分析時，又想他們一起展示怎麼辦？

當然有辦法了。Wyn支援跨源的資料集和資料模型，根據每個不同資料來源之間的關聯關係進行關聯欄位進行連線，那麼只要將關聯欄位連線，兩個不同資料來源的資料就可以整合在一起了。就比如下圖，我使用了一個檔案型的資料來源和一個mysql的資料來源，根據如下訂單編號進行關聯，就實現了跨源的資料分析。

除此之外，針對不同場景，我們也可以進行列的計算和彙總等等，如此豐富的功能，可以滿足我們的不同業務場景。

整體佈局

準備完資料，當然就到了大屏的設計。如何設計一款視覺效果好的呢，最簡單的方法就是把握「313佈局」。什麼是「313佈局」，如下圖所示：

上面兩個模板整體看上去都是相當成功的大屏，原因很簡單，它們清晰明瞭的整體佈局給人眼前一新的感覺。大屏的左右兩邊都是對稱的3條佈局，內部不一定非要每一個只顯示一個圖表，但是清晰的佈局不能缺少，並且準備對應的邊框、背景和小圖示，保證整體佈局和色彩搭配清晰好看，然後製作對應的元件即可。

那除了左右的「33」，中間的「1」便是撐起整個大屏的關鍵。我們在大屏的中間可以放置相應的背景大圖、3D模型、地圖元件或者明細資料。不同的場景對應不同的展示風格，只需適當的切換就可以帶來很大的反響。就比如上述第一個背景主要顯示一些完成資料，並用圖片撐起。而整個大屏展示的也是校內資訊指標反應，這個結合就非常成功。

其次第二個儀表盤主要是校園內部管理，那展示校內的各區域資訊就尤為重要。針對這種大屏，就非常符合放模型類的元件，將模型資訊資料和欄位繫結，就可以展示校園內各地區的實時情況。除了這兩種模板，當我們想要分析不同省份之間資訊關聯時，當然也可以放置地圖，。那麼如果你精準掌握了「313」，其實一個大體的儀表板已經完成。

細節美化

到這裡，其實儀表板的搭建工作大概都完成了，但是最後一步也關鍵，畢竟沒有點綴的儀表板，看起來也會很枯燥。美化的點其實也很多：例如視覺化大屏增加的背景顏色、背景動畫效果、視覺化元素增加邊框、增加背景圖片等等。再比如新增一個炫酷的標題背景，也會提高整個儀表板的顏值。wyn支援全域性背景設定和每一個儀表板的圖示設計，那對應的，我們根據選定的主題，也可以調整每一個儀表板的背景圖片。

現在，大屏主體已經完成了，那最後就是為它加一個新穎的標題，裝上背景框，並新增一些美化的頁面元素。至此，一款完美的大屏就設計完成了。