如何从0-1制作数据大屏，我用大白话给你解释清楚了
好萊塢大片《摩天營救》中有這么一個場景：
?
?
你可以看見反派大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精華資料
總結
以上是生活随笔為你收集整理的如何从0-1制作数据大屏，我用大白话给你解释清楚了的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ubuntu 下操作目录，出现Permi
- 下一篇： 【程序员面试干货】资深面试官告诉你：测试