這兩年隨著大數(shù)據(jù)的發(fā)展，數(shù)據(jù)可視化大屏項(xiàng)目漸漸從原來的政府企事單位逐漸應(yīng)用到了企業(yè)端，從事數(shù)據(jù)行業(yè)這么多年，我也參與過不少大屏項(xiàng)目的開發(fā)，也感知到了企業(yè)大屏需求的不斷變化。

兩年前，大家都喜歡用“數(shù)據(jù)大屏”這個(gè)詞，但現(xiàn)在，數(shù)據(jù)大屏已經(jīng)不光是簡(jiǎn)單把數(shù)據(jù)以可視化的形式展現(xiàn)在大屏上這么簡(jiǎn)單， 企業(yè)對(duì)大屏有了更多的要求，比如“交互性”、“3D”、“動(dòng)態(tài)”等等，渴望像電影科幻片里那樣炫酷、自由的掌握操控?cái)?shù)據(jù)。

從我身邊很多從事數(shù)據(jù)產(chǎn)品開發(fā)的朋友來看，越來越多的公司都將可視化大屏作為企業(yè)數(shù)據(jù)工作展示的“高級(jí)手段”和“對(duì)外平臺(tái)”，老板動(dòng)不動(dòng)就是一句：“給我做一個(gè)高端大氣的可視化大屏！”，然后團(tuán)隊(duì)就陷入大屏可視化開發(fā)的噩夢(mèng)。

其實(shí)，可視化大屏不過是數(shù)據(jù)可視化展現(xiàn)的一種形式，雖然要在視覺上美觀炫酷，但核心還是要展現(xiàn)重點(diǎn)數(shù)據(jù)，做到美觀性與實(shí)用性共存的效果。不少人做大屏往往在視覺上過分下了功夫，界面設(shè)計(jì)花里胡哨，最后反而影響了關(guān)鍵數(shù)據(jù)的展示。

為了幫助大家避坑，今天就給大家分享幾個(gè)各行業(yè)精美的大屏可視化模板，并附上簡(jiǎn)單易學(xué)的大屏模板制作教程。

大屏類型及模板

大屏可視化一般有這樣四個(gè)應(yīng)用場(chǎng)景：監(jiān)控預(yù)警、實(shí)時(shí)指揮、信息公示、公開匯報(bào)

監(jiān)控預(yù)警類大屏，比如生產(chǎn)車間監(jiān)控大屏，需要實(shí)時(shí)監(jiān)控各項(xiàng)關(guān)鍵指標(biāo)數(shù)據(jù)，當(dāng)指標(biāo)出現(xiàn)異?？梢詫?shí)時(shí)預(yù)警。

實(shí)時(shí)指揮類大屏，比如交通指揮大屏，需要同時(shí)監(jiān)控多現(xiàn)場(chǎng)視頻，實(shí)時(shí)展示多個(gè)指標(biāo)數(shù)據(jù)，下發(fā)交通管理任務(wù)

信息公示、公開匯報(bào)類大屏，比如公司的銷售管理大屏，多角度展示、匯報(bào)業(yè)績(jī)或者業(yè)務(wù)運(yùn)作情況

1、工程建設(shè)指揮大屏：

2、高速監(jiān)控大屏

3、項(xiàng)目管理大屏

4、銀行經(jīng)營(yíng)管理大屏

5、快遞業(yè)務(wù)管理駕駛艙

6、零售業(yè)務(wù)分析大屏

7、制造業(yè)生產(chǎn)作業(yè)指標(biāo)分析

8、銷售管理駕駛艙

9、汽車大屏駕駛艙

10、雙十一大屏

大屏模板制作教程

關(guān)于大屏項(xiàng)目的整體流程和模板開發(fā)前的準(zhǔn)備工作，我之前在文章里講過了，今天就單說大屏模板的制作過程。

大屏可以用代碼開發(fā)或現(xiàn)成的可視化工具來實(shí)現(xiàn)，用的比較多的就是JS+Ecahrts，但數(shù)據(jù)量支撐、后臺(tái)響應(yīng)、實(shí)時(shí)更新、平臺(tái)運(yùn)維等應(yīng)該還要調(diào)用更多的技術(shù)，這方面我不是專家，就不多贅述了。

比較簡(jiǎn)單快速的方法是用現(xiàn)成的可視化工具，比如帆軟FineReport，阿里dataV等等。就以我熟悉的FineReport簡(jiǎn)單演示一下制作過程：

FineReport其實(shí)是一個(gè)報(bào)表開發(fā)工具，功能強(qiáng)大，基本能滿足所有的報(bào)表開發(fā)需求，它的決策報(bào)表模式是專門用來開發(fā)可視化大屏、駕駛艙的。采用的交互性的操作界面，低代碼開發(fā)理念，鼠標(biāo)點(diǎn)擊+拖拽就可以完成圖表制作。

將數(shù)據(jù)庫(kù)與FineReport連接，定義制作過程要用到的數(shù)據(jù)集（具體操作可以看官方的幫助文檔，節(jié)約篇幅我就不講了），然后新建一張決策報(bào)表，從面板上選擇你想要使用的圖表組件，拖拽進(jìn)面板上：

然后將數(shù)據(jù)集與圖表進(jìn)行綁定，比如你想要展示不同銷售員的銷量情況，點(diǎn)擊右側(cè)面板上的數(shù)據(jù)，選擇合適的分類、系列名和系列值，圖表就制作完成了：

一張大屏其實(shí)就是多個(gè)圖表組件的集合，通過排版布局，將核心數(shù)據(jù)放在醒目位置，輔助次要信息核心數(shù)據(jù)旁。常見的排版有以下幾種：

然后我們按照設(shè)計(jì)好的大屏布局，在設(shè)計(jì)器中將對(duì)應(yīng)的圖表拖拽到面板的對(duì)應(yīng)位置，再分別定義好數(shù)據(jù)連接：

FineReport里面內(nèi)置了豐富的圖表類型，常見的柱形圖、條形圖、氣泡圖、散點(diǎn)圖等等，還有一些高級(jí)的擴(kuò)展圖表插件，比如3D地圖、3D動(dòng)態(tài)儀表盤、自動(dòng)輪播、動(dòng)畫特效等等，提升大屏科技感。

不過對(duì)于動(dòng)效圖表的使用，切忌不要過多堆砌，一到兩個(gè)足以起到畫龍點(diǎn)睛的效果，過多使用動(dòng)態(tài)圖表和特效會(huì)讓人覺得眼花繚亂。

基本的圖表布局、圖表數(shù)據(jù)連接搞定之后，我們還要對(duì)大屏進(jìn)行配色和細(xì)節(jié)的優(yōu)化，讓大屏整體視覺統(tǒng)一，美觀。

設(shè)置大屏背景

大屏建議選擇深色，數(shù)據(jù)展示更加的明顯，也容易營(yíng)造科技感。所有圖表的背景顏色也要統(tǒng)一，不能左邊紅，右邊黃，看上去很不協(xié)調(diào)、分散人的注意力。另外，大屏背景除了使用顏色之外，可也可以用圖片或者動(dòng)態(tài)效果背景，效果會(huì)更好，官方文檔里也提供了很多背景素材：

動(dòng)態(tài)星空背景

圖表配色設(shè)置方法如下：

背景圖片的設(shè)置方法：選中body，點(diǎn)擊屬性>樣式，選擇背景圖片，圖片格式設(shè)置為拉伸：

除了背景之外，我們還可以給大屏增加一些細(xì)節(jié)點(diǎn)綴，比如給圖表加添加邊框，添加大屏文字主題、邊框、可視化圖標(biāo)等等。

設(shè)置方法如下：

最后點(diǎn)擊預(yù)覽，就能查看最終效果了，制作完成的大屏模板還能以鏈接形式分享給其他人看：

光看教程不如實(shí)際動(dòng)手一試，文中所涉及的工具及教程部門模板素材及完整demo，如有需要，收藏本文并轉(zhuǎn)發(fā)，私信我“大屏”即可獲得