1.描述編輯
大屏看起來很炫，那么制作會不會很麻煩呢？下面給大家演示一下一張下面這張大屏模板的制作步驟。
2.准備工作編輯
確認需求、准備數據、整理素材。這里假定需求已由業務部敲定，數據IT部也整理好了，而需要的背景圖片、邊框等事先都整理完畢。
設計大屏駕駛艙遵循四個基本步驟：
布局排版 ——色彩 —— 點綴效果 ——動畫。
3.布局排版編輯
業務部門的需求，是要重點展現集團銷售總額數據以及各地區的數據，其他次要內容包括歷年銷售對比、各產品線銷售、熱門產品、實時交易、新老客戶占比等。我們從常見的幾種主次分布排版樣式里挑選了一種作為此次的版面，如下圖所示：
由於集團業務遍布全國，所以區域銷售數據我們認為用地圖展示比較直觀，而全國的總銷售額這一數字疊加在地圖上進行展示。另外，對比類的數據適合用柱形圖，占比類的數據適合用餅圖，交易明細數據適合用表格。這樣，我們就確定了布局里的幾個主要元素：地圖、數字、柱形圖、餅圖、表格。
由於這里報表塊使用了重疊的功能，因此需要使用絕對布局，如下圖：
打開 FineReport 設計器，按照布局樣式，從組件欄拖入對應的圖表元素到指定區域並綁定數據，如下圖所示：
點擊預覽按鈕，瀏覽器端的效果如下圖所示。到這里第一版效果就出來了，主次排版讓界面看上去很規范，但配色沒有經過改良所以效果一般。
4.色彩編輯
在上次帖子里，我們總結過，大屏的主體背景建議用深色系，這樣可以有效避免視覺刺激。如此，我們把第一版demo背景換成背景圖片，由於整體背景是深色的，使得我們的一些標題文字還看上去不明顯，而且圖表有種沉悶的感覺，稍微調整了下，把文字內容改成淺色、圖表則換稍微明亮一點的顏色，如下圖：
2）其次是改造各個組件的小標題，方直接為小標題所在的報表塊組件添加合適的背景。
3）給各個組件添加邊框元素，最后得到效果如下：
6.動效編輯
由於大屏本身場景特殊，純粹靜態展示讓人感覺大屏缺乏活力。為此，給demo加上一些動畫效果，提升一下demo的活力及視覺觀感。
1）首先我們來為銷售總額設置數據監控（需要安裝決策報表里報表塊刷新插件），讓其每隔1秒獲取最新數據，這樣銷售總額數字會實時動態變化，設置如下圖：
效果如下圖：
2）再給圖表添加閃爍動畫，設置如下圖：
效果如下圖：
3）給地圖添加一個數據監控，讓各區域變化的數據在地圖上自動顯示數據點提示，設置如下圖：
效果如下圖：
4）右下角的明細數據展示，改成滾動輪播的形式，詳細操作方法點擊
JS實現跑馬燈效果
效果如下圖：
直到這里就大屏制作就完成了！
7.小結編輯
按照套路做大屏駕駛艙，很容易做出漂亮的效果呢！
其實在第四步動效步驟，還可以加入更多交互效果，比如地圖鑽取，點擊某個省份穿透到市級地圖；或者比如聯動，點擊左上角的區域排名柱形圖，則產品類別占比餅圖聯動顯示具體省份的數據。