極簡視覺化大屏製作攻略,附精美大屏模版欣賞

@李啟方

這兩年隨著大數據的發展,資料視覺化大屏專案漸漸從原來的政府企事單位逐漸應用到了企業端。這些年,對於大屏的需求也在不斷變化。

大屏場景

兩年前,大家都喜歡用“資料大屏”這個詞,但現在,資料大屏已經不光是簡單把資料以視覺化的形式展現在大屏上這麼簡單, 企業對大屏有了更多的要求,比如“互動性”、“3D”、“動態”等等,渴望像電影科幻片裡那樣炫酷、自由的掌握操控資料。

大屏應用

從身邊很多從事資料產品開發的朋友來看,越來越多的公司都將視覺化大屏作為企業資料工作展示的“高階手段”和“對外平臺”,老闆動不動就是一句:“給我做一個高階大氣的視覺化大屏!”,然後團隊就陷入大屏視覺化開發的噩夢。

其實,視覺化大屏不過是資料視覺化展現的一種形式,雖然要在視覺上美觀炫酷,但核心還是要展現重點資料,做到美觀性與實用性共存的效果。
不少人做大屏往往在視覺上過分下了功夫,介面設計花裡胡哨,最後反而影響了關鍵資料的展示。

為了幫助大家避坑,今天就給大家分享幾個各行業精美的大屏視覺化模板,並附上簡單易學的大屏模板製作教程。

大屏視覺化一般有這樣四個應用場景:監控預警、實時指揮、資訊公示、公開彙報

✦監控預警類大屏,比如生產車間監控大屏,需要實時監控各項關鍵指標資料,當指標出現異常可以實時預警。

✦實時指揮類大屏,比如交通指揮大屏,需要同時監控多現場影片,實時展示多個指標資料,下發交通管理任務

✦資訊公示、公開彙報類大屏,比如公司的銷售管理大屏,多角度展示、彙報業績或者業務運作情況

1、工程建設指揮大屏

2、高速監控大屏

3、專案管理大屏

4、銀行經營管理大屏

5、快遞業務管理駕駛艙

6、零售業務分析大屏

7、製造業生產作業指標分析

8、銷售管理駕駛艙

9、汽車大屏駕駛艙

10、雙十一大屏

關於大屏專案的整體流程和模板開發前的準備工作,我之前在文章裡講過了,今天就單說大屏模板的製作過程。

大屏可以用程式碼開發或現成的視覺化工具來實現,用的比較多的就是JS+Ecahrts,但資料量支撐、後臺響應、實時更新、平臺運維等應該還需要叫更多的技術。

比較簡單快速的方法是用現成的視覺化工具,比如帆軟FineReport,阿里dataV等等。就以我熟悉的FineReport簡單演示一下製作過程:

FineReport其實是一個報表開發工具,功能強大,基本能滿足所有的報表開發需求,它的決策報表模式是專門用來開發視覺化大屏、駕駛艙的。採用的互動性的操作介面,低程式碼開發理念,滑鼠點選+拖拽就可以完成圖表製作。

將資料庫與FineReport連線,定義製作過程要用到的資料集(具體操作可以看官方的幫助文件,節約篇幅我就不講了),然後新建一張決策報表,從面板上選擇你想要使用的圖表元件,拖拽進面板上:

然後將資料集與圖表進行繫結,比如你想要展示不同銷售員的銷量情況,點選右側面板上的資料,選擇合適的分類、系列名和系列值,圖表就製作完成了:

一張大屏其實就是多個圖表元件的集合,透過排版佈局,將核心資料放在醒目位置,輔助次要資訊核心資料旁。常見的排版有以下幾種:

然後我們按照設計好的大屏佈局,在設計器中將對應的圖表拖拽到面板的對應位置,再分別定義好資料連線:

FineReport裡面內建了豐富的圖表型別,常見的柱形圖、條形圖、氣泡圖、散點圖等等,還有一些高階的擴充套件圖表外掛,比如3D地圖、3D動態儀表盤、自動輪播、動畫特效等等,提升大屏科技感。
不過對於動效圖表的使用,切忌不要過多堆砌,一到兩個足以起到畫龍點睛的效果,過多使用動態圖表和特效會讓人覺得眼花繚亂。

基本的圖表佈局、圖表資料連線搞定之後,我們還要對大屏進行配色和細節的最佳化,讓大屏整體視覺統一,美觀。

大屏建議選擇深色,資料展示更加的明顯,也容易營造科技感。所有圖表的背景顏色也要統一,不能左邊紅,右邊黃,看上去很不協調、分散人的注意力。

另外,大屏背景除了使用顏色之外,可也可以用圖片或者動態效果背景,效果會更好,官方文件裡也提供了很多背景素材:

漫天繁星

圖表配色設定方法如下:

背景圖片的設定方法:選中body,點選屬性>樣式,選擇背景圖片,圖片格式設定為拉伸:

除了背景之外,我們還可以給大屏增加一些細節點綴,比如給圖表加新增邊框,新增大屏文字主題、邊框、視覺化圖示等等。

設定方法如下:

最後點選預覽,就能檢視最終效果了,製作完成的大屏模板還能以連結形式分享給其他人看:

本文中涉及到的大屏工具Finereport下載地址 https://www.finereport.com/tw/products/frlogin,可免費試用

這是一個專注於數據分析職場的內容部落格,聚焦一批數據分析愛好者,在這裡,我會分享數據分析相關知識點推送、(工具/書籍)等推薦、職場心得、熱點資訊剖析以及資源大盤點,希望同樣熱愛數據的我們一同進步! 臉書會有更多互動喔:https://www.facebook.com/shujvfenxi/