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