一、如何做好一款大屏

1.1工具的選擇

帆軟報(bào)表工具Finereport，目前國(guó)內(nèi)報(bào)表軟件領(lǐng)域發(fā)展最成熟也是市場(chǎng)份額最高的。

Finereport可以解決哪些問題：

市場(chǎng)環(huán)境和業(yè)務(wù)需求多變，無法快速滿足變化的報(bào)表需求；

傳統(tǒng)SQL+Excel 的方式整合數(shù)據(jù)做報(bào)表，效率低準(zhǔn)確性差；

業(yè)務(wù)系統(tǒng)數(shù)據(jù)過于分散形成數(shù)據(jù)孤島，難以有效利用；

缺乏統(tǒng)一的報(bào)表工具管理門戶，無法形成全局?jǐn)?shù)據(jù)視野，輔助決策。

優(yōu)勢(shì)：

（1）報(bào)表設(shè)計(jì)：

類Excel的設(shè)計(jì)模式，大降低了學(xué)習(xí)成本，會(huì)使用excel，基本上就會(huì)使用FineReport。支持多SHEET和跨SHEET計(jì)算，完美兼容EXCEL公式，用戶可以所見即所得的設(shè)計(jì)出任意復(fù)雜的表樣，輕松實(shí)現(xiàn)中國(guó)式復(fù)雜報(bào)表。

普通模板設(shè)計(jì)，此者最常用。依靠著單元格的擴(kuò)展與父子格的關(guān)系來實(shí)現(xiàn)模板效果，可進(jìn)行參數(shù)查詢，填報(bào)報(bào)表，圖表設(shè)計(jì)，比如交叉報(bào)表、行式報(bào)表、分組報(bào)表等。

聚合報(bào)表設(shè)計(jì)，適用于一張模板中顯示多個(gè)獨(dú)立模塊的報(bào)表，幾個(gè)報(bào)表塊匯總在一起的復(fù)雜報(bào)表。

（2）數(shù)據(jù)處理：

Sql可視化語(yǔ)句編輯，報(bào)表工具開發(fā)人員不需要一行一行寫SQL，只需要通過簡(jiǎn)單的拖拽，就可以生成SQL語(yǔ)句。

零代碼開發(fā)，尤其數(shù)據(jù)字典、實(shí)際值和顯示值等的設(shè)計(jì)更是切入快速開發(fā)的要害，這些放在別的語(yǔ)言和體系下往往要大量代碼才能實(shí)現(xiàn)且頻繁需要的功能放在finereport里卻只是幾個(gè)操作的事情。

數(shù)據(jù)填報(bào)功能，避免了excel收集數(shù)據(jù)混亂，還能開發(fā)各種各樣的流程表單。

支持多種數(shù)據(jù)庫(kù)數(shù)據(jù)源：包括Oracle，SqlServer，MySql，DB2，Sybase，Informix等主流的關(guān)系型數(shù)據(jù)庫(kù)；支持SQL取數(shù)據(jù)表或視圖，亦支持存儲(chǔ)過程。

（3）數(shù)據(jù)展現(xiàn)：

這在Finereport中被稱作決策報(bào)表設(shè)計(jì)，也是dashboard，用于彌補(bǔ)普通報(bào)表工具分頁(yè)預(yù)覽不能展示控件的問題。同時(shí)表單可以進(jìn)行自由拖拽設(shè)計(jì)，自適應(yīng)頁(yè)面大小顯示，自由制作駕駛艙可以更好的在各種大小類型的屏幕上展示，包括移動(dòng)端、可視化大屏，F(xiàn)inereport做大屏有先天開發(fā)優(yōu)勢(shì)。

1.2大屏設(shè)計(jì)

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

一個(gè)大屏的設(shè)計(jì)主要可以分為兩塊，一個(gè)是數(shù)據(jù)指標(biāo)的選用，一個(gè)是與這些指標(biāo)對(duì)應(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)對(duì)應(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è)的話，大屏就會(huì)顯得空曠，而且也不經(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)養(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)，例如用地圖展示出全國(guó)營(yíng)業(yè)額中各個(gè)地區(qū)的營(yíng)業(yè)額情況。

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

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

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

對(duì)于文本類的指標(biāo)，因?yàn)轭I(lǐng)導(dǎo)們看大屏就是想擺脫枯燥的傳統(tǒng)表格類報(bào)表，如果在大屏上還是大砍魷鄭斕伎隙ㄊ且⒒鸕摹�

而時(shí)間序列指標(biāo)的出現(xiàn)概率甚至跟數(shù)字總計(jì)類指標(biāo)的概率一樣，這是因?yàn)闀r(shí)間序列類的指標(biāo)可以反應(yīng)某個(gè)數(shù)據(jù)隨著時(shí)間變化的趨勢(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化，玩出花來，比如地圖可是是這種：

儀表盤也可以做成這種：

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)入地圖編輯頁(yè)面，自建自定義地圖，放入壓縮好的圖片

• 對(duì)地圖描點(diǎn)，根據(jù)實(shí)際業(yè)務(wù)情況描點(diǎn)（可按省份描也可按大區(qū)描）

• 保存json文件，重啟設(shè)計(jì)器即可在地圖圖層中選到自定義地圖。

二、大屏Demo

大屏Demo及優(yōu)秀作品展示，請(qǐng)轉(zhuǎn)閱至我的花瓣：百度搜索：愛是與世界平行，（花瓣），然后在畫板中找到網(wǎng)頁(yè)設(shè)計(jì)，企業(yè)網(wǎng)站。

優(yōu)秀大屏Demo鏈接：大屏Demo

海量大屏demo：點(diǎn)擊訪問：海量?jī)?yōu)秀大屏demo效果圖

2.1

2.2

2.3