只要一提起可視化，很多人第一個(gè)想到的，肯定就是火得一塌糊涂的大屏了。

從我身邊很多從事可視化的朋友來看，越來越多的公司都將可視化大屏作為企業(yè)數(shù)據(jù)工作展示的“高級手段”和“對外平臺”，這就苦了這些做大屏的人，甚至造成很多IT人最怕聽到老板的一句話就是：“給我做一個(gè)高端大氣的可視化大屏！”

其實(shí)，可視化大屏不僅是要在視覺上美觀炫酷和與數(shù)據(jù)契合的科技感，更重要地是突出重點(diǎn)數(shù)據(jù)，做到美觀性與實(shí)用性共存的效果。我之前也曾經(jīng)在一個(gè)團(tuán)隊(duì)里為公司做過可視化大屏，經(jīng)歷了與需求方的不斷交涉、修改，最終做出了幾張比較滿意的大屏：

這樣的大屏不僅擁有著高端的科技感，而且都是經(jīng)過了多次的版面設(shè)計(jì)和修改，這次大屏效果在同行業(yè)內(nèi)部交流過程中反響不錯(cuò)，在這次大屏的開發(fā)過程中，我亦總結(jié)了一些獨(dú)家的大屏技巧略作分享。

做大屏的一點(diǎn)經(jīng)驗(yàn)分享

首先要說一下我們制作大屏使用的工具——FineReport 10.0，是采用最新的可視化大屏圖表，默認(rèn)采用深色背景 熒光配色，非常符合浸入式的大屏體驗(yàn)；而且能根據(jù)圖表類型和數(shù)據(jù)要求，提供 '輪播'或'刷新'兩種動畫形式，能夠滿足不同場景下的業(yè)務(wù)需求。

同時(shí)FineReport10.0最厲害之處，在于它基于webgl等技術(shù)，對動畫不斷優(yōu)化調(diào)整，能讓做出來的效果更加簡潔炫酷。

通用的大屏設(shè)計(jì)原則

一個(gè)大屏的設(shè)計(jì)主要可以分為兩塊，一個(gè)是數(shù)據(jù)指標(biāo)的選用，一個(gè)是與這些指標(biāo)對應(yīng)的組件的使用。

其中我們首先要明確要分析的指標(biāo)有哪些：

• 比率類指標(biāo)：指兩個(gè)值相除后的指標(biāo)，如銷售額完成率，產(chǎn)品達(dá)標(biāo)率等。
• 時(shí)間序列類指標(biāo)：指按照時(shí)間粒度排序的指標(biāo)，如分月銷售額統(tǒng)計(jì)等。
• 數(shù)字總計(jì)類指標(biāo)：表現(xiàn)形式為一個(gè)總的數(shù)字，如銷售總額，用戶總量等。
• 文本類指標(biāo)：這一類是以純文本展示的指標(biāo)，如詞云圖，人員名單等。
• 子部分布類指標(biāo)：這一類指標(biāo)是指將一個(gè)主要指標(biāo)按照不同地區(qū)，不同分公司，不同產(chǎn)品線等子部分布展示的指標(biāo)，如地圖和各分公司銷售額分布圖等。

明確了指標(biāo)之后，就要選擇這些指標(biāo)對應(yīng)的組件，一般來說要遵循下面幾個(gè)原則：

1、大屏指標(biāo)在8-12個(gè)為宜

大屏上的展示空間是有限的，我們不能將所有的數(shù)據(jù)都堆到大屏中，領(lǐng)導(dǎo)想要看到的也只是一些關(guān)鍵數(shù)據(jù)，因?yàn)榇笃辽系闹笜?biāo)數(shù)量最好在8到12個(gè)之間，這也是數(shù)據(jù)指標(biāo)數(shù)量的主流配置，這個(gè)數(shù)量的時(shí)候，大屏整體看起來不空也不擠。

少于8個(gè)的話，大屏就會顯得空曠，而且也不經(jīng)濟(jì)；多于12個(gè)的話，這么多的數(shù)據(jù)指標(biāo)擠在在一個(gè)張大屏上，要做到井然有序，確實(shí)很考驗(yàn)設(shè)計(jì)者的功力。

但是如果數(shù)據(jù)指標(biāo)真的很多，實(shí)在是不能刪減，那么我建議使用報(bào)表塊，將這些數(shù)據(jù)整合到一起。這樣，多個(gè)數(shù)據(jù)指標(biāo)就可以在一個(gè)報(bào)表里面展現(xiàn)出來，不用占用很多空間。比如像下面這樣：

2、比率類、數(shù)字類和子部分布類指標(biāo)要合理布局比率類、數(shù)字總計(jì)類和子部分布類指標(biāo)就像食物中的碳水化合物、脂肪和蛋白質(zhì)，既要保證攝入量，也要營養(yǎng)均衡。

比率，數(shù)字總計(jì)和子部分布這三類指標(biāo)在每張大屏中幾乎必然出現(xiàn)，并且出現(xiàn)的次數(shù)也很多，次數(shù)分布也比較均勻，究其原因是這樣的：

一般大屏都需要有數(shù)字總計(jì)類的指標(biāo)，而且往往是核心指標(biāo)，這樣方便領(lǐng)導(dǎo)知道核心指標(biāo)目前的總體狀況。但是僅僅一個(gè)數(shù)字并不能反映出當(dāng)前指標(biāo)的完成情況，所以也需要有比率指標(biāo)，它反映了部分占總體的占比。

另外，比率也只能體現(xiàn)一個(gè)占比情況，要想知道總計(jì)類指標(biāo)的各個(gè)組成部分的具體情況，還需要子部分布類指標(biāo)，例如用地圖展示出全國營業(yè)額中各個(gè)地區(qū)的營業(yè)額情況。

所以大家要善用這三類指標(biāo)，都要有，而且數(shù)量要均衡。

3、時(shí)間序列指標(biāo)、文本指標(biāo)不可過量

時(shí)間序列類指標(biāo)和文本類指標(biāo)就像食物里的微量元素，是必須攝入的營養(yǎng)，但是不可過量。

對于文本類的指標(biāo)，因?yàn)轭I(lǐng)導(dǎo)們看大屏就是想擺脫枯燥的傳統(tǒng)表格類報(bào)表，如果在大屏上還是大量出現(xiàn)，領(lǐng)導(dǎo)肯定是要發(fā)火的。

而時(shí)間序列指標(biāo)的出現(xiàn)概率甚至跟數(shù)字總計(jì)類指標(biāo)的概率一樣，這是因?yàn)闀r(shí)間序列類的指標(biāo)可以反應(yīng)某個(gè)數(shù)據(jù)隨著時(shí)間變化的趨勢，這是相當(dāng)直觀而有意義的。不過，雖然我們可以通過季度，月度和日這些不同的粒度將一個(gè)數(shù)據(jù)指標(biāo)用多個(gè)圖表展示，但是這樣并沒有意義，選擇最合適的一個(gè)粒度就好，多了沒有必要。

4、高頻組件盡量減少重復(fù)

報(bào)表塊、餅圖、柱形圖、儀表盤、折線圖、條形圖和地圖這幾個(gè)組件出現(xiàn)的頻率都非常高，可以說是大屏圖表組件里面的常規(guī)武器了。

很多同學(xué)可能都覺得這些組件大家都用爛啦，這有什么可說的??？

我本來也這樣以為，但是看完了所有的這些經(jīng)典大屏后，我發(fā)現(xiàn)自己還是tooyoung,too simple！原來這些常見的組件也可以千變?nèi)f化，玩出花來，比如地圖可是是這種：

儀表盤也可以做成這種：

還有這些

其他的組合圖，餅圖，折線圖等等也有好多千變?nèi)f化的玩法，大家在以后做大屏的時(shí)候可以多嘗試變換一個(gè)樣式，可能會有意想不到的效果哦。

5、使用3D效果

通過設(shè)計(jì)師設(shè)計(jì)的圖片作為背景來拓寬圖表樣式，實(shí)現(xiàn)3D柱形圖、3D圓環(huán)圖等效果，設(shè)計(jì)師設(shè)計(jì)自定義圖片，圖片為具有一定特效的圖表，把數(shù)據(jù)去掉。

或者，可以通過上文提到的報(bào)表塊疊加，將圖片作為底層背景，上層疊加數(shù)據(jù)，即可實(shí)現(xiàn)自制圖表效果。

6、自定義地圖

通過自定義圖片作為地圖背景，重新描點(diǎn)形成json文件，實(shí)現(xiàn)地圖的3D傾斜效果。

• 設(shè)計(jì)師設(shè)計(jì)自定義地圖，輸出地圖圖片（壓縮到1M以內(nèi)最好，不然加載太慢）
• 設(shè)計(jì)器點(diǎn)擊服務(wù)器->地圖數(shù)據(jù)，進(jìn)入地圖編輯頁面，自建自定義地圖，放入壓縮好的圖片
• 對地圖描點(diǎn)，根據(jù)實(shí)際業(yè)務(wù)情況描點(diǎn)（可按省份描也可按大區(qū)描）
• 保存json文件，重啟設(shè)計(jì)器即可在地圖圖層中選到自定義地圖。

總結(jié)

其實(shí)大屏的設(shè)計(jì)一方面需要不斷積累經(jīng)驗(yàn)，另一方面也需要善用大屏工具，一個(gè)好的可視化工具能夠讓你做起大屏來得心應(yīng)手，像我這一次用的FineReport就完全沒有涉及編程，換成是數(shù)據(jù)小白也一樣能夠做出高端大氣的大屏。

福利：關(guān)于FineReport個(gè)人免費(fèi)版的獲取，可以私聊回復(fù)我“大屏”獲得！