關于可視化大屏的制作，帆軟君了解到許多朋友關于數據可視化大屏的痛點問題，如缺少美工素材、不知如何構建數據可視化大屏場景、可視化細節調整困難、可視化多屏自適應問題等等。

為了幫大家快速上手可視化大屏的開發，今天用FineReport為例詳細講解一下：

場景規劃

大屏場景的需求規劃，必定是大屏開發的第一步。我們可以把大屏場景需求分數據需求和風格需求兩部分，同時兼顧大屏展示需求。

1、數據需求

在大屏開發前，必須確定清楚需要展示的數據具體有哪些內容，同時探明每部分數據對實時性的要求，從而一一確定數據對應的可視化元素。

以這張公司綜合展示大屏為例，大屏數據展示的內容可分為“公司簡介”、“產品介紹”、“經營狀況”和“人力資源”4個部分，每個部分對應的數據實時性要求可能各不相同，例如公司和產品簡介需要半年或者一年以上才需要手動更新，而公司規模、銷售額等數據可能以月份甚至更大的頻率刷新，公司新簽單用戶等數據，則可能每日更新。

對簡介信息，我們用報表塊里的圖片結合文字展示；對公司規模、銷售額，我們用指標卡展示；對公司新簽單用戶，我們則用了可監控刷新的表格；市場占有率、項目完成狀態等涉及百分比的數據，我們使用儀表盤或者水球圖展示……

2、風格

在明確數據需求后，我們還需要規劃大屏風格。

在色系風格方面，首先給大家的第一條建議是“大屏盡量使用深色調”，除了深色比淺色用在大屏上更具科技感、更酷炫外，還有以下原因：

1.深色比淺色造成的視覺疲勞更少，更容易形成視覺聚焦；

2.深色可減少屏幕色差、拼接屏縫隙帶來的影響；

3.深色大屏比淺色大屏耗費的能源更少，更環保。

對于大屏主色調的選擇，我們最常用的是藍色系，其次是青色，再次是紅、黃、綠等偏亮的顏色，其它色系并非不可用，但對新手而言是很難把控的。

除此之外，色調還需要考慮使用場景和行業屬性，例如IT、公安、水利行業重藍色調，電網、能源、環保行業重青綠色調，零售、電商行業的購物節數據大屏多用歡快的紅黃色調，黨建主題大屏多用紅色調等等。

在布局排版方面，我們常見的布局方式有以下幾種。主要信息可以居中、居左、居右或者偏上展示，次要信息環繞主要信息。其中用大屏的“中心呈現主要信息、周圍對稱分布次要信息”是最穩定、最好上手的結構，也是最推薦剛上手大屏的用戶使用的布局方式。

大屏開發工具

我所用的FineReport大屏依托決策報表制作，先新建一張決策報表，并選擇大屏常用的「絕對布局」方式；緊接著設置畫布大小，使之符合場景規劃中的大屏模板比例；然后就可以拖拽需要的組件到畫布中了。

大屏實踐開發

1、選取模板：

進入帆軟大屏官方demo系統，從大屏業務場景、數據指標、整體風格上綜合評估你需要的大屏模板。

2、下載模板：

進入帆軟市場-模板庫下載選中的模板，在設計器中打開這個模板，你可以另存為并基于這個模板的框架改造出你需要的大屏，或者參考這個模板的結構、內容重制一張大屏。

效果打磨

對于通過復用的方式制作好的大屏模板，我們需要經歷更換數據源、調整圖表樣式、調整所有組件、補充特效4個步驟。

1、更換數據源

需要把復用過來的示例組件中的數據改為真實的大屏業務數據

2、調整圖表樣式

首先去掉大屏中不常用的圖表元素，如圖表原配的標題、單系列圖表的圖例、密密麻麻的標簽、圖表特效中的工具欄以及坐標軸線、系列框線和背景的橫線等；

最后再根據大屏的色彩風格調整系列配色，可以使用設計器內置的配色方案，其中「xx高亮」系列為大屏專屬的配色；

3、調整所有組件

在我們將圖表調整成大屏適合的樣式后，還需要統一為組件添加背景、標題，調整組件的文字、位置和大小。

4、補充效果

經過以上效果調整后，大屏已經基本滿足展示需要了，再添加一些跑馬燈、組件輪播、圖表高亮的效果，一張完整的大屏模板就制作成功了。

總結

以上是生活随笔為你收集整理的超全干货：数据可视化的设计总结，工具，技术要点统统都有的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。