教你製做類雙十一的可視化大屏

每一年雙十一，天貓都會在整點時刻直播戰績，可怕的戰績背後，不知道你們是否留意到背後的數據大屏，簡直炫吊炸天。

屏幕上不只實時刷新着數據，更滾動着全球交易記錄，用商業智能實時分析交易數據，以淘寶的數據體量，簡直尤物。

所謂大屏，顧名思義就是一個很大很大的屏，是一種可視化技術的展示，常常用在園區展覽中心，城市交通管控中心，交易大廳，還有老闆們的辦公室。

其原理就是將一些業務的關鍵指標以數據可視化的方式展現。好比天貓大屏中的不一樣地區、不一樣品類、不一樣品牌的銷售額仍是交易單數、用戶數等等。而後投到一塊或多塊LED大屏上。（通常上到大屏的都是很關鍵的指標）。

大家必定都好奇，相似天貓雙十一的大屏是怎麼作出來的？

其實技術上能夠用代碼開發或現成的可視化工具來實現，但數據量支撐、後臺響應、實時更新、平臺運維等需求，性能卻各有差別。

若是用代碼開發，雖然只要有足夠的人力、財力和技術，捨得投入，都能作出來，但應用成本對你們甚至大部分企業來說，就過高了。

用現成的產品，能相對簡單高效的搭建一個數據大屏。

這不，立即就有用戶用FineReport簡單作了一個。（忽略2017）

本文就藉着雙11的這波熱點，一塊兒來瞅瞅如何快速的搭建一個大屏頁面，藉助FineReport。

1、工欲善其事必先利其器

第一步咱們得先下載安裝FineReport。

大多數工具都不是專作數據大屏的，好比報表類工具，BI類工具，大屏只是其中的一種應用。像FineReport，它本質上是一款商用的報表工具，不只能作可視化，還更多用於企業的業務報表製做。

（PS：商用指企業部署啊，這裏本身作作大屏仍是免費的哈！）

2、鏈接數據

運行FineReport，並創建好數據鏈接，從萬千數據中，取出你要展現的數據表。

鏈接的數據能夠是常見的關係型數據庫，也能夠是像Excel這樣的文件數據，也支持和大數據平臺對接。

如圖所示，是咱們鏈接的測試數據，此次示例分析一下雙11銷售數據。

3、大屏模板製做

數據準備好以後，接下來就是大屏的模板製做。

先建一個空白大屏模板（決策報表），以下所示，原理就是再下面這個空白版上拖拽一個一個可視化組件（圖表之類的），而後綁定數據。

在製做以前，咱們須要思考在這個空白界面上，要展現哪些有關雙11的數據。

仔細琢磨了一下，大概設計了以下佈局，中間是主要展現的主題，左右兩側是子主題。

4、選擇合適的可視化元素

肯定了要展現的內容以後，須要思考用什麼樣的可視化形式來展示每個主題的內容。

常見的就是套圖表，FineReport中內置幾十種可視化圖表，光數據地圖就有近十種，再結合不一樣的動效。

下圖是梳理了十幾種常見圖表類型適用的場景：

從FineReport設計器的快捷欄中，拖拽合適的元素到畫布中，以下示意圖所示。中間主要展現雙11全國區域的訂單狀況，因此咱們選了熱力地圖，其餘模塊根據須要分別選了柱形圖、餅圖、詞雲圖等。

而後基於步驟二中準備好的數據，分別爲每一個圖表組件設置好數據來源。

至此，初版初稿完成了，在瀏覽器中預覽的效果以下圖：

5、添磚加瓦，美化細節

以上咱們把大體的框架搭好，可是總以爲不那麼好看？

爲何呢？由於缺幾樣東西，一個是主心骨（總領全局的突出指標），一個是配色。

so，咱們先來給加一個全局指標，也就是咱們關注的銷售總額數據。

從快捷欄中拖入一個表格組件，並在表格中綁定銷售額數據。

能夠瀏覽一下效果，是否是瞬間以爲整個頁面有了主心骨？

緊接着，開始對配色進行調整。

這個時候，若是你懂一些美工方面的知識，或者說公司有專門的美工同窗，那就事半功倍，照着美工的效果圖，以及給的顏色參數和邊框素材，調整就行。

若是沒有美工怎麼辦呢？那就只能任由本身審美髮揮了......

參照着官方給的demo樣式，各類配色調整。背景色、圖表顯色、線條、字體樣式、動畫效果......

這方面FineReport正如新版Excel樣式功能，能夠各類自定義設置，針對各個細節美化調整。好比我隨手調了幾個深色系樣板（忽略我被人詬病的直男審美，美工集體三亞玩去了，只能作到這樣了）：

6、所謂大屏，要能酷炫，還要能動態刷新

到上一步，搭出的demo基本能夠看了，頂可能是差強人意，離優秀還有些距離的。好吧，繼續優化。

好比爲頁面添加一些合適的圖片背景或者邊框元素，好比設置圖表的動畫效果。

其次，也是你們比較好奇的，如何產生實時數據？其實就是設置監控刷新，來實時更新數據。

下圖是我給地圖添加了數據監控及自動數據提示，會根據後臺數據變動狀況實時在頁面上展現。

7、進階大屏玩法，炫酷隨心

若是你開始熟練掌握FineReport，還能夠發現更多有趣的玩法。

這裏礙於篇幅，就不展開細講了，你們能夠經過finereport的教學文檔進一步瞭解，也能夠經過帆軟社區進行視頻課程的學習，下面秀幾張高階效果圖給你們看看。

最後、數據大屏，不僅是秀

也許你們對這樣的大屏會嗤之以鼻，眼花繚亂，毫無實用，用華麗的視效堆疊起來博人眼球。

在效果以外，仍是提倡你們更注重可視化可否經得住業務價值的推敲？數據是否帶來了價值？是否爲企業經營提供了幫助？

在設計展示指標時多調研多涉獵，從以往「酷炫就行」的思惟模式中走出來，更多關注數據自己的價值。

最後的最後，還沒完事，作好的樣式要投到大屏上啊！

通常可選用LED拼接屏，或者一體機。

一套完整拼接屏具有哪些硬件？

最合理的，仍是要找大屏硬件商去實地勘察、溝通需求，由於受場地及客戶實際需求、應用場景的影響，每一個項目作實施時用到的設備確定不同。

一些經常使用設備以下，僅供參考：

A用於最終呈現圖像的拼接單元：液晶拼接屏屏、DLP背投單元、PDP等離子拼接屏等，通常單個尺寸在46-55寸，一般是FHD屏幕；

B用於固定拼接單元的支架：通常都是由提供拼接單元的廠家配套提供，由於只有廠家自己最瞭解本身產品是如何固定安裝的，特別是大規模的拼接系統，更須要高效率、高穩定性的原配支架；

C用於實現信號接入處理並輸出給拼接單元的拼接處理器：通常爲基於FPGA架構的純硬件拼接處理器，能夠實現多達上百路的高清、4K信號輸入和輸出；固然也有經過多屏顯卡來實現的低成本X86架構的系統，缺點是再想接入更多其餘信號（如來自DVD、攝像頭）的話，X86架構會比較吃力。

D傳輸專用的視頻線纜：DVI、HDMI、SDI等與信號格式相匹配的高品質線纜。若是採用的線纜品質有問題，可能引起噪點、無信號、閃屏等異常狀況

E通常還要配置一臺電腦，用於安裝拼接屏與拼接器的管理軟件：控制拼接屏的開關、拼接器的預案、窗口布局、信號切換等。軟件由提供拼接處理器的廠家配套提供；

F穩定的供電：拼接系統總體功率比較大，特別是開關機的瞬時電流很高，由於要預防電涌對系統形成的異常損壞，不能經過一次性拉閘的方式直接開關，因此超過15塊屏幕的系統最好還須要時序電源進行控制開關（也就是一組一組陸續開機關機）。固然若是爲了省錢，也能夠用人工逐個開啓接線板的方式。