不用一行代碼，從0到1手把手教你製做酷炫可視化大屏

從大屏可視化出現以來，一直深受各界企業的追捧，最典型的就是每一年淘寶的雙十一銷售額大屏，最近我也剛接觸了一個大屏項目，藉此總結了一些可視化大屏製做經驗與你們分享。

這種大屏看着高端大氣上檔次，然而其開發步驟卻並不像想象中那麼簡單，基本步驟就有五步：

大屏開發工具

開發可視化大屏，通常有兩種方式，一是用代碼開發，還有一種是用現成的可視化工具製做。

用的比較多的就是JS+Ecahrts，但數據量支撐、後臺響應、實時更新、平臺運維等應該還要調用更多的技術，很是考驗技術水平，因此我推薦直接用可視化工具製做，好比FineReport、dataV等等，簡單又方便，重點是不須要寫一大堆代碼，自帶的圖表插件可視化效果很炫酷。下面就以FineReport爲例子，演示一下如何製做下面這樣一張可視化大屏。

數據準備

製做報表前首先須要定義數據來源，通常來講，企業的數據都是保存在數據庫中，而且在不斷更新，FineReport能夠直接和數據庫進行連接，使用數據庫中的數據來製做報表，而且報表內容會隨着數據庫的更新而更新。

新建決策報表

數據庫連接好後，咱們新建報表模板準備開始製做，FineReport有三種報表模式，普通報表適合用來作一些常規類型的統計報表，聚合報表主要用來作中國式的複雜表，決策報表適合用來製做大屏或者駕駛艙。

所以，咱們選擇決策報表來製做一張大屏，打開finereport設計器的決策報表模式，新建決策報表：

新建數據集

新建數據集，將數據庫中所須要的數據存放在數據集中：

設計報表

FineReport決策報表採用的是畫布式佈局，圖表組件自由拖拽、擺放，很靈活，內置了幾十種圖表類型，基本上夠用了。

咱們按照以前設計好的佈局，將圖表組建拖拽到對應位置，而後分別定義好數據連接，大屏雛形就完成了：

細節美化

圖表佈局以後，下一步就是要對顏色、背景、圖表標題等等細節進行美化。

• 配色

大屏背景最好使用深色暗色背景，由於深色暗色背景可減小拼縫帶來的不適感，並且還可以減小屏幕色差對總體表現的影響；同時暗色背景更能聚焦視覺，也方便突出內容、作出一些流光、粒子等酷炫的效果

給你們幾個推薦的配色方案：

背景不必定要用顏色，也能夠採用深色系的圖片，能夠搭配其餘一些現實特性可讓總體看着更有科技感。推薦使用一些帶有星空、條紋、漸變線、點綴效果之類的圖片等。

• 統一圖表系列、標籤配色

• 點綴

在大屏展示上，細節會極大的影響總體效果，須要經過適當給元素、標題、數字等添加一些諸如邊框、圖畫等在內的點綴效果，能幫助提高總體美觀度。

動態效果展現

到上一步，其實一張大屏就完成的差很少了，若是你以爲不夠炫酷，還可使用一些3D動效的圖表插件，增長科技感，FineReport提供不少這樣的插件能夠下載，提高大屏逼格。

最後保存，點擊預覽，一張完美的可視化大屏就製做完成了。

模板展現

文字來源：https://www.toutiao.com/i6820...