1. 程式人生 > >手把手教你做酷炫的資料視覺化大屏,零基礎的你僅需6步

手把手教你做酷炫的資料視覺化大屏,零基礎的你僅需6步

手把手教你做酷炫的資料視覺化大屏,零基礎的你僅需6步

 

手把手教你做酷炫的資料視覺化大屏,零基礎的你僅需6步

 

今年視覺化大屏又被大家推上了熱搜,什麼500強企業分析大屏、指揮中心大屏、大屏視覺化分析等,處處都有著大屏視覺化分析的背景。

那我們作為一名普通人,在沒有天貓雙十一發佈會那種財力下,也沒有程式設計師的開發能力,我們能自己創作出一款大屏嗎?

答案當然是肯定的!!

想象一下,你在向老闆彙報的時候,突然告訴老闆,我有能力去開發一款高階大氣上檔次的視覺化大屏,可以媲美雙11大屏,老闆是否會對你刮目相看呢,升職加薪,迎娶白富美,走上人生巔峰不是夢!

小編之前也曾經在一個團隊裡為公司做過視覺化大屏,經歷了與需求方的不斷交涉、優化,最終做出了幾張比較滿意的大屏:

手把手教你做酷炫的資料視覺化大屏,零基礎的你僅需6步

 

手把手教你做酷炫的資料視覺化大屏,零基礎的你僅需6步

 

這樣的大屏不僅擁有著高階的科技感,而且都是經過了多次的版面設計和修改,這次大屏效果在同行業內部交流過程中反響不錯。下面我就給大家介紹一下用FineReport這款個人免費軟體,是如何做出屬於自己的大屏的。

首先,來看一下業內各個行業的大屏demo和實景。

大屏視覺化行業demo

企業銷售部業績公示大屏

手把手教你做酷炫的資料視覺化大屏,零基礎的你僅需6步

 

金融類雙11資料演示

手把手教你做酷炫的資料視覺化大屏,零基礎的你僅需6步

 

國際業務的雙11資料演示

手把手教你做酷炫的資料視覺化大屏,零基礎的你僅需6步

 

國內雙11物流資料演示

手把手教你做酷炫的資料視覺化大屏,零基礎的你僅需6步

 

綜合類雙11作戰指揮室

手把手教你做酷炫的資料視覺化大屏,零基礎的你僅需6步

 

工程部設計規劃指揮中心

手把手教你做酷炫的資料視覺化大屏,零基礎的你僅需6步

 

大屏視覺化現場案例

手把手教你做酷炫的資料視覺化大屏,零基礎的你僅需6步

 

手把手教你做酷炫的資料視覺化大屏,零基礎的你僅需6步

 

手把手教你做酷炫的資料視覺化大屏,零基礎的你僅需6步

 

(實際案例,出於保密,部分內容已做模糊處理,大家將就著看哈,現場動態效果比單純看照片震撼很多!)

大屏視覺化製作流程

下面我們就來介紹一下大屏具體是如何製作的。

1.工欲善其事比先利其器

第一步我們得先安裝FineReport,免費獲取大屏啟用碼並安裝。

手把手教你做酷炫的資料視覺化大屏,零基礎的你僅需6步

 

PS:偷偷告訴你,這是一款個人使用者可以免費使用的神器,當然了,Finereport的定位還是企業版web報表工具。

2.磨刀不誤砍柴功

先建一個空白大屏模板(決策報表),如下所示。

手把手教你做酷炫的資料視覺化大屏,零基礎的你僅需6步

 

接下來,我們要思考一下,在這個空白介面上,我們的大屏需要怎樣的佈局?

有如下幾種常見的佈局體系

手把手教你做酷炫的資料視覺化大屏,零基礎的你僅需6步

 

手把手教你做酷炫的資料視覺化大屏,零基礎的你僅需6步

 

以上是幾種常見的大屏排布方式,一句各個大屏模板所需要展示的具體資訊我們可以自行選擇,需要注意的點就是需要有重點資訊,有輔助資訊,重點資訊重點展示,輔助資訊用來輔描述重點資訊。

3.選擇合適的視覺化元素

FineReport內建了數十種視覺化元素,不同型別的圖表,可以表達的含義不同,樣式構思完畢之後 ,就需要考慮在帆軟眾多的圖表庫中挑選合適的圖表來展示相應的資訊了。

手把手教你做酷炫的資料視覺化大屏,零基礎的你僅需6步

 

4.多樣化的炫酷外掛

手把手教你做酷炫的資料視覺化大屏,零基礎的你僅需6步

 

輪播GIS點地圖

手把手教你做酷炫的資料視覺化大屏,零基礎的你僅需6步

 

輪播目標齒輪

手把手教你做酷炫的資料視覺化大屏,零基礎的你僅需6步

 

時間齒輪

手把手教你做酷炫的資料視覺化大屏,零基礎的你僅需6步

 

輪播夜光儀表盤

手把手教你做酷炫的資料視覺化大屏,零基礎的你僅需6步

 

FineReport大屏外掛有很多,小編在這裡列舉幾個,想要下載外掛話可以在這裡找到:伺服器>外掛管理>安裝/更新擴充套件圖表3.0

手把手教你做酷炫的資料視覺化大屏,零基礎的你僅需6步

 

5.添磚加瓦,細節雕琢

上一步我們把大致的框架搭好啦,但是總覺得不那麼好看?為什麼呢?因為我們缺幾樣東西。一個是主心骨(總領全域性的突出指標),一個是配色。

所以,我們先來給加一個全域性指標,也就是我們關注的銷售總額資料,從快捷欄中拖入一個表格元件,並在表格中繫結銷售額資料。

手把手教你做酷炫的資料視覺化大屏,零基礎的你僅需6步

 

可以瀏覽一下效果,是不是瞬間覺得整個頁面有了主心骨呢?

手把手教你做酷炫的資料視覺化大屏,零基礎的你僅需6步

 

緊接著,我們開始對配色進行調整。這個時候,如果你懂一些美工方面的知識,或者說公司有專門的美工同學,那就事半功倍啦,照著美工出具的效果調整就行。

那沒有美工怎麼辦呢?

不要緊哈,按照我們的一般套路&參考官方demo樣式,人人都可以自主調出好看的效果。而且FineReport提供了非常簡單、靈活的自定義設定,可以針對各個細節進行自由調整。比如小編這樣隨手調了幾個深色系樣板:

手把手教你做酷炫的資料視覺化大屏,零基礎的你僅需6步

 

手把手教你做酷炫的資料視覺化大屏,零基礎的你僅需6步

 

6.持續迭代,精益求精

到上一步,我們搭出的demo基本可以看了,但頂多也是差強人意,離優秀還是有一些距離的,我們可以通過更多的技巧來繼續優化。

比如為頁面新增一些合適的圖片背景或者邊框元素,比如設定圖表的動畫效果,比如設定監控重新整理來實時更新資料等等。

下圖GIF是我們給地圖添加了資料監控及自動資料提示,會根據後臺資料變更情況實時在頁面上展示。

手把手教你做酷炫的資料視覺化大屏,零基礎的你僅需6步

 

手把手教你做酷炫的資料視覺化大屏,零基礎的你僅需6步

 

其實大屏的設計一方面需要不斷積累經驗,另一方面也需要善用大屏工具,一個好的視覺化工具能夠讓你做起大屏來得心應手,像我這一次用的FineReport就完全沒有涉及程式設計,換成是資料小白也一樣能夠做出高