大屏模板製作

設計大屏駕駛艙遵循四個基本步驟：

布局排版 ——色彩 —— 點綴效果 ——動畫。

業務部門的需求，是要重點展現集團銷售總額資料以及各地區的資料，其他次要內容包括歷年銷售對比、各產品線銷售、熱門產品、實時交易、新老客戶佔比等。我們從常見的幾種主次分布排版樣式裡挑選了一種作為此次的版面，如下圖所示：

由於集團業務遍布全國，所以區域銷售資料我們認為用地圖展示比較直觀，而全國的總銷售額這一數字疊加在地圖上進行展示。另外，對比類的資料適合用柱形圖，佔比類的資料適合用餅圖，交易明細資料適合用**。這樣，我們就確定了布局裡的幾個主要元素：地圖、數字、柱形圖、餅圖、**。

由於這裡報表塊使用了重疊的功能，因此需要使用絕對布局，如下圖：

開啟 finereport 設計器，按照布局樣式，從元件欄拖入對應的圖表元素到指定區域並繫結資料，如下圖所示：

點選預覽按鈕，瀏覽器端的效果如下圖所示。到這裡第一版效果就出來了，主次排版讓介面看上去很規範，但配色沒有經過改良所以效果一般。

在上次帖子裡，我們總結過，大屏的主體背景建議用深色系，這樣可以有效避免視覺刺激。如此，我們把第一版demo背景換成背景，由於整體背景是深色的，使得我們的一些標題文字還看上去不明顯，而且圖表有種沉悶的感覺，稍微調整了下，把文字內容改成淺色、圖表則換稍微明亮一點的顏色，如下圖：

接下來為各個元件、標題新增一些邊框來提公升細節處的觀感。

1）首先是頂部大標題，在大標題兩側各拖入乙個報表塊，為報表塊新增背景，左右對稱線條極大提公升美感。

2）其次是改造各個元件的小標題，方直接為小標題所在的報表塊元件新增合適的背景。

3）給各個元件新增邊框元素，最後得到效果如下：

由於大屏本身場景特殊，純粹靜態展示讓人感覺大屏缺乏活力。為此，給demo加上一些動畫效果，提公升一下demo的活力及視覺觀感。

1）首先我們來為銷售總額設定資料監控（需要安裝決策報表裡報表塊重新整理外掛程式），讓其每隔1秒獲取最新資料，這樣銷售總額數字會實時動態變化，設定如下圖：

效果如下圖：

2）再給圖表新增閃爍動畫，設定如下圖：

效果如下圖：

3）給地圖新增乙個資料監控，讓各區域變化的資料在地圖上自動顯示資料點提示，設定如下圖：

效果如下圖：

4）右下角的明細資料展示，改成滾動輪播的形式，詳細操作方法點選js實現跑馬燈效果

效果如下圖：

直到這裡就大屏製作就完成了！

按照套路做大屏駕駛艙，很容易做出漂亮的效果呢！

其實在第四步動效步驟，還可以加入更多互動效果，比如地圖鑽取，點選某個省份穿透到市級地圖；或者比如聯動，點選左上角的區域排名柱形圖，則產品類別佔比餅圖聯動顯示具體省份的資料。