大屏模板制作技巧

數據可視化在數據分析中的作用不言而喻，主要是借助於圖形化手段，清晰有效地傳達與溝通信息。交互式可視化能夠讓決策者快速理解數據背後的意義，深入了解細節層次，爲決策分析提供了精準的意見。

通過本章節的學習，可以掌握基本技巧，學會如何快速有效地做出一張大屏。

2.1 了解大屏數據可視化

• 大屏數據可視化介紹
  

• 大屏數據可視化設計指南

2.2 決策報表

2.2.1 決策報表簡介

FineReport 決策報表采用了畫布式操作界面，專爲大屏和移動端而生，通過簡單的拖拽操作即可幫助用戶構建強大、全面的「管理駕駛艙」，在同一個頁面整合不同的企業數據，完美地展示企業的各類業務指标，實現數據的多維度分析。

詳情請參見：決策報表簡介

2.2.2 組件介紹

決策報表中添加了所有的組件，幫助大家理解各個組件的含義，如下圖所示：

詳情請參見：決策報表組件介紹

2.3 可視化組件

2.3.1 基礎圖表

帆軟自主研發的 HTML5 圖表，具有優秀的動态效果和強大的交互體驗，提供超強的個性化設置項，能在多種終端設備完美展示。

我們介紹一些典型的新圖表制作方法，并介紹了如何設置圖表的樣式，讓用戶能夠獨立制作出專業精美的分析圖表。

詳情請參見：[新]各圖表的使用場景列舉

2.3.2 擴展圖表

爲了滿足大屏等場景下的動畫及自動播放效果，帆軟團隊基於 WebGL 等技術新開發了此插件。插件中包含了一些展示形态新穎或展示效果酷炫的新圖表，同時此插件将保持持續更新，确保内容的豐富性。

詳情請參見：擴展圖表插件

3.1 前期準備

• 進行業務需求調研、根據業務場景抽取關鍵指标

• 确定可視化圖表類型

  可視化的最終目的是爲了更清晰地傳遞信息，也就是說，用什麽圖形展示數據，非常重要。同一個指标的數據，從不同維度分析就有不同結果。在我們确定了某個數據關系類型後，就可以根據該數據的使用場景查找出相對應的圖表和使用建議，并在其中進行選擇。

  
  

3.2 排版布局

明确大屏展現的目的，首要是服務於業務的。要讓業務内容、數據合理的展現，就要避免誤入瘋狂堆砌指标的歧途，要分清主次。主要指标是什麽？是反應核心業務内容的。次要指标是什麽？通常是用於進一步闡述主要指标的。一定要讓數據之美綻放在數據價值體現的基礎上。

下面推薦幾個常見版式給大家：

上面幾個版式，不是金科定律，只是通常推薦的主次分布版式，能讓信息一目了然。實際項目中，可能會遇到更加複雜的情況，有更多的指标要展示。

除了主次分布，還有平均分布，根據我們的基本原則進行微調就好

3.3 配色

合理的布局能讓業務内容更富有層次，合理的配色能讓觀看者更舒适。

3.3.1 Body 背景

背景的選擇要遵從兩點基本原則：深色調&一緻性

如下所示給大家幾個推薦的配色方案：

并不是說背景一定要用顔色，也可以采用深色系的圖片，可以搭配其他一些現實特性可以讓整體看着更有科技感。推薦使用一些帶有星空、條紋、漸變線、點綴效果之類的圖片等。

3.3.2 統一圖表系列、标簽配色

設置單一圖表背景通常爲無，統一設置系列顔色，修改标簽、坐标軸顔色

技巧：預先設置好圖表預定義配色，統一給圖表系列更換配色

3.3.3 設置标題字體大小、顔色

設置大屏主标題

統一組件标題大小和顔色

設置方式：

組件>樣式>自定義>标題

3.4 點綴

在大屏展現上，細節會極大的影響整體效果，需要通過适當給元素、标題、數字等添加一些諸如邊框、圖畫等在内的點綴效果，能幫助提升整體美觀度。

3.5 動态效果

動效的範圍很廣，可以從很多角度解讀，豐富的動态效果能讓大屏看上去科技感十足，讓大屏展示效果更加炫酷。合理的利用動态效果，可以幫助我們快速理解數據間的關系，爲決策分析提供了指導性的意義。

3.5.1 大屏可視化插件（擴展圖表）

基於 WebGL 等技術新開發，目的在於讓每一個用戶通過簡單拖拽即可實現自動播放、3D 動畫特效等多種效果，同時也能多維度地展示數據，提升大屏的視覺效果

3.5.2 動态效果索引

tab輪播、圖表輪播、報表塊監控刷新、圖表監控刷新、地圖監控刷新并動态彈出數據提示、圖表閃爍 、 報表塊滾動、圖表開啓自動數據點提示輪播接口、輪播時自動聯動其他組件

4.1 小分辨率的顯示器預覽大屏模板出現滾動條

問題描述：

使用分辨率較大的顯示器制作大屏模板，在小分辨率的顯示器上預覽時會出現滾動條的現象，需要再次調整模板，比較麻煩。

原因分析：

注：body 大小設置的像素和屏幕分辨率之間的關聯請參見：決策報表簡介 的 6.1 節内容。

高分辨率做的模板拿到低分辨率上預覽會出現滾動條，因爲最小縮放比爲 0.4 ，低分屏很容易低於 0.4 從而取 0.4 産生滾動條。

body 大小設置的像素表示的是畫布真實大小，如果 body 大小設置的像素是 3840×2160 和屏幕分辨率是 3840×2160 ，設計器不存在縮放（body 的組件大小與 body 像素大小一緻），模板展示以真實大小，不會做縮放。
相反如果 body 大小設置的像素是 3840×2160 ，屏幕分辨率是 1920*1080 ，就以兩倍的效果縮小，效果就是以前區域的1/4，這樣之前能顯示全的地方，因爲最小縮放比爲 0.4， 低分屏很容易低於 0.4 從而取 0.4 産生滾動條。

解決方案：

建議在低分辨率下做模板，需要開啓 字體自适應 ，放到高分辨率下如果還有細微問題，只需微調就能解決。
例如：客戶大屏是 3840×2160 ，以及常用分辨率都是 1920*1080 ，那麽最好在 1920*1080 的電腦上制作模板，比如客戶平常用的 1920*1080 以及 1366*766 ，那麽最好在 1366*766 或者更低，比如 960×540 分辨率的電腦上制作模板。