好萊塢大片《摩天營救》中有這麼一個場景：
你可以看見反派大boss在屏幕上隨便點點，就能看到每個角落的具體情況，不禁讓人驚呼：滿滿的高科技！
其實這背後就是咱們今天要講的數據可視化：把相對複雜、抽象的數據通過可視的方式以人們更易理解的形式展示出來的一系列手段，數據可視化是爲了使用戶快速讀懂數據背後的含義。
像電影裏的這種叫做大屏數據可視化，也是可視化的一種，通過大屏爲數據展示載體，特點是“大面積、炫酷動效、豐富色彩”，並且在企業中有很多豐富的應用場景：
最近大師兄也剛接觸了一個大屏項目，藉此總結了一些可視化大屏製作經驗與大家分享。文章寫的比較細，請耐心閱讀
可視化大屏從製作到最後的展現，一般包含這5個步驟：
需求調研
大屏佈局
可視化設計
大屏調試
上線運營
需求調研
這一階段分爲4個部分，是大屏上線前的準備。
1、硬件調研
大屏大屏，肯定得先有硬件，才能將數據展示出來。我們需要確定：大屏是否已買，大屏分辨率，大屏顯卡所支持的分辨率輸出，顯卡是否支持自定義分辨率，HDMI 線支持的分辨率。
同時我們還要確定設計稿尺寸，既不能太大讓人感覺突兀，也不能太小看不清數據指標。
2、業務需求調研
即大屏裏要展示的內容是什麼，和下面要講的排版佈局是分不開的。當然，爲了最大化數據對業務幫助，我們要確定一些概括性詞語，是對一組或者一系列數據的統稱，也就是關鍵指標。
根據業務場景抽取關鍵指標
一般情況下，一個指標在大屏上獨佔一塊區域，所以通過關鍵指標定義，我們就知道大屏上大概會顯示哪些內容以及大屏會被分爲幾塊。
確定關鍵指標後，根據業務需求擬定各個指標展示的優先級（主、次、輔）。
-
主：反應核心業務內容的
-
次：用於進一步闡述主要指標的
-
輔：主要指標的補充信息
樣例如下：
確定可視化圖表類型
確定關鍵指標之後，根據分析目標確定指標分析維度，可以從聯繫、分佈、比較、構成四個角度去考慮我們想通過可視化表達什麼樣的信息，從而確定數據之間的關係
聯繫：數據之間的相關性
分佈：指標裏的數據主要集中在什麼範圍、表現出怎樣的規律
比較：數據之間存在何種差異、差異主要體現在哪些方面
構成：指標裏的數據都由哪幾部分組成、每部分佔比如何
然後就可以根據數據之間的關係選擇相對應的展示圖表，這邊給一張圖表選擇指南：
以一份購物城數據爲例：
3、數據質量調研
數據來源：填報、讀業務庫、讀中間庫
數據單位：單位、小數位
數據更新頻率：實時、準實時
4、功能調研
包括很多：是否需要下鑽、輪播、自定義地圖、擴展圖表等，就拿圖表來舉例吧，當確定了某個數據關係類型後，就可以根據該數據的使用場景查找出相對應的圖表和使用建議，並在其中進行選擇。
原型設計
1、佈局排版
俗話說得好，長得好看的人底子肯定好，那對於大屏來說，它的底子就是排版佈局，如果排版佈局都不行，就算後面的可視化再酷炫，給人的整體感覺也是一團糟。
那怎麼佈局排版呢？還是按照主、次、輔的順序：
-
主：核心業務指標安排在中間位置、佔較大面積，多爲動態效果豐富的地圖
-
次：次要指標位於屏幕兩側，多爲各類圖表
-
輔：輔助分析的內容，可以通過鑽取聯動、輪播顯示
一般把有關聯的指標讓其相鄰或靠近，把圖表類型相近的指標放一起，這樣能減少觀者認知上的負擔並提高信息傳遞的效率。
這裏給大家舉例幾種常見的排版佈局：
2、大屏製作
開發可視化大屏，一般有兩種方式，一是用代碼開發，還有一種是用現成的可視化工具製作。
用的比較多的就是JS+Echarts，但數據量支撐、後臺響應、實時更新、平臺運維等應該還要調用更多的技術，非常考驗技術水平，所以我推薦直接用可視化工具製作，比如FineReport，簡單又方便，自帶的圖表插件可視化效果很炫酷。下面就以FineReport爲例子，演示一下如何製作下面這樣一張可視化大屏
2.1、新建決策報表
FineReport有三種報表模式，普通報表適合用來做一些常規類型的統計報表，聚合報表主要用來做中國式的複雜表，決策報表適合用來製作大屏或者駕駛艙。
因此，我們選擇決策報表來製作一張大屏，打開FineReport設計器的決策報表模式，新建決策報表：
設置自適應屬性
點擊菜單模板>表單報表塊自適應屬性，取消勾選使用全局配置，選擇字體不自適應、表格雙向自適應，如下圖所示：
設置佈局方式
選中 body，選擇屬性，設置佈局方式爲絕對佈局、縮放邏輯爲適應區域。如下圖所示：
2.2、新建數據集
新建數據集：
2.3、設計報表
我們按照之前設計好的佈局，將圖表組建拖拽到對應位置，然後分別定義好數據鏈接，大屏雛形就完成了：
細節美化
定義設計風格
每個公司的風格是不一樣的，所以要先考慮大屏的定位，用戶羣體，公司品牌，年齡層，這樣設計出來的大屏纔是符合公司特點且讓管理層滿意的。
配色
大屏背景最好使用深色暗色背景，因爲深色暗色背景可減少拼縫帶來的不適感，而且還能夠減少屏幕色差對整體表現的影響；同時暗色背景更能聚焦視覺，也方便突出內容、做出一些流光、粒子等酷炫的效果
給大家幾個推薦的配色方案：
背景不一定要用顏色，也可以採用深色系的圖片，可以搭配其他一些現實特性可以讓整體看着更有科技感。推薦使用一些帶有星空、條紋、漸變線、點綴效果之類的圖片等。
統一圖表系列、標籤配色
點綴
在大屏展現上，細節會極大的影響整體效果，需要通過適當給元素、標題、數字等添加一些諸如邊框、圖畫等在內的點綴效果，能幫助提升整體美觀度。
動態效果
到上一步，其實一張大屏就完成的差不多了，如果你覺得不夠炫酷，還可以使用一些3D動效的圖表插件，增加科技感，FineReport提供很多這樣的插件可以使用：
最後保存，點擊預覽，一張完美的可視化大屏就製作完成了：
大屏調試
1、大屏調試的流程：
2、大屏要調試哪些？
（1）視覺方面地測試
關鍵視覺元素、字體字號、頁面動效、圖形圖表等是否按預期顯示、有無變形、錯位等情況。
（2）性能與數據方面地測試
圖形圖表動畫是否流暢、數據加載、刷新有無異常；頁面長時間展示是否存在奔潰、卡死等情況；後臺控制系統能否正常切換前端頁面顯示。
上線運行
主要檢測有沒有熄屏問題和播放週期是否符合，如果符合就可以上線運行了。
歡迎關注我的公衆號“商業智能研究”，私信回覆“資料包”，即可領取大數據、數據中臺、商業智能、數據倉庫等6G精華資料
