2021年第一份可視化模板教程,手把手教你做出黑科技感的大屏

講到可視化大屏展示,終於可以輪到我上場了!

 

其實一般大屏都能用代碼開發或現成的可視化工具來實現,用得比較多的就是JS+Ecahrts,但數據量支撐、後臺響應、實時更新、平臺運維等應該還要調用更多的技術,這方面我不是專家,就不多贅述了。

比較簡單快速的方法是用現成的可視化工具,比如FineReport,阿里dataV等等,這裏給大家介紹一下FineReport的演示:

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

比如下面這樣的:

1、工程建設指揮大屏:

 

2、高速監控大屏

 

3、項目管理大屏

 

4、銀行經營管理大屏

 

5、快遞業務管理駕駛艙

 

6、零售業務分析大屏

 

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

 

8、銷售管理駕駛艙

 

9、汽車大屏駕駛艙

 

10、雙十一大屏

 

上面的圖應該都是動態的,因爲太大了不能展示,可以找我要原圖!!!

大屏模板製作教程

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

一張大屏其實就是多個圖表組件的集合,通過排版佈局,將核心數據放在醒目位置,輔助次要信息核心數據旁。

 

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

 

FineReport裏面內置了豐富的圖表類型,常見的柱形圖、條形圖、氣泡圖、散點圖等等,還有一些高級的擴展圖表插件,比如3D地圖、3D動態儀表盤、自動輪播、動畫特效等等,提升大屏科技感。

不過對於動效圖表的使用,切忌不要過多堆砌,一到兩個足以起到畫龍點睛的效果,過多使用動態圖表和特效會讓人覺得眼花繚亂。

 

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

設置大屏背景

大屏建議選擇深色,數據展示更加的明顯,也容易營造科技感。所有圖表的背景顏色也要統一,不能左邊紅,右邊黃,看上去很不協調、分散人的注意力。另外,大屏背景除了使用顏色之外,可也可以用圖片或者動態效果背景,效果會更好,官方文檔裏也提供了很多背景素材:

 

圖表配色設置方法如下:

 

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

 

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

 
 

設置方法如下:

最後點擊預覽,就能查看最終效果了,製作完成的大屏模板還能以鏈接形式分享給其他人看:

 

以上的所有可視化都是由FineReport製作.

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章