手把手教你做酷炫的數據可視化大屏,零基礎的你僅需6步

2020-12-16 數據分析不是個事兒

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

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

答案當然是肯定的!!

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

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

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

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

大屏可視化行業demo

企業銷售部業績公示大屏

金融類雙11數據演示

國際業務的雙11數據演示

國內雙11物流數據演示

綜合類雙11作戰指揮室

工程部設計規劃指揮中心

大屏可視化現場案例

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

大屏可視化製作流程

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

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

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

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

2.磨刀不誤砍柴功

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

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

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

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

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

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

4.多樣化的炫酷插件

輪播GIS點地圖

輪播目標齒輪

時間齒輪

輪播夜光儀錶盤

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

5.添磚加瓦,細節雕琢

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

所以,我們先來給加一個全局指標,也就是我們關注的銷售總額數據,從快捷欄中拖入一個表格組件,並在表格中綁定銷售額數據。

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

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

那沒有美工怎麼辦呢?

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

6.持續迭代,精益求精

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

比如為頁面添加一些合適的圖片背景或者邊框元素,比如設置圖表的動畫效果,比如設置監控刷新來實時更新數據等等。

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

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

相關焦點

  • 大數據可視化大屏設計經驗,教給你
    大數據產業正在用一個超乎我們想像的速度蓬勃發展,大數據時代的來臨,越來越多的公司開始意識到數據資源的管理和運用,大數據可視化大屏展示被更多的企業青睞,身為UI設計師的我們,也要緊跟時代的步伐學習這方面的設計。
  • 只要10分鐘,教你配置出炫酷的數據可視化大屏
    現在這種立體化大屏幕似乎成了好萊塢大片的標配。其實,這種逼格很高的鏡頭就是一個數據可視化大屏。隨著社會信息化的高速增長,數據可視化大屏已經在很多商業領域彰顯價值。比如會議展廳、園區管理、城市交通調度中心、公安指揮中心、企業生產監控等重要場所。
  • 可視化駕駛艙製作教程詳解,手把手教你做一張開學迎新大屏
    最近各大高校都陸續開學,前陣子微博各種曬錄取通知書,現在又開始曬起了開學第一天,朋友圈刷到一個親戚家的孩子曬了一張學校做的迎新數據大屏,將各學院報導數據實時展現的大屏幕上,吸引了不少學生家長圍觀,體現了學校的科技實力。
  • 你的可視化大屏太醜了,來看看我整理的模板,建議收藏
    近來,數據可視化大屏受到眾多人的青睞,這其中就包括了傳統企業、網際網路公司、個人的一些需求,儘管可能完成了各種數據的準備:原始數據、指標數據、報表表格等等,但仍然無法解決「閱者」難以理解龐大數據。所以可視化大屏的重要性不言而喻。
  • 與Excel圖表相比,交互式數據可視化大屏的優勢有哪些?(1)
    編輯導語:數據可視化,這是近年來一個熱度比較高的詞,將數據以視覺形式來呈現,如圖表或地圖,以幫助人們了解這些數據的意義。數據可視化大屏,是當前可視化領域的一項熱門應用,好的數據可視化大屏是布局、色彩、圖表、動效的綜合運用。與Excel圖表相比,交互式數據可視化大屏的優勢有哪些?
  • 一個工具幫你實現酷炫可視化
    大部分人眼裡,數據可視化可以是這樣的:但其實,它也可以做成這樣:看著酷炫的可視化,有人會疑惑,是否有實實在在的用處。它可以快速製作報表,搭建統一的數據分析和可視化平臺。就因為其強大的數據整合性能,再結合其10多年來成熟的可視化組件,finereport可以製作各類數據可視化大屏。
  • 可視化大屏不會做,來套教學視頻怎麼樣?(附免費工具)
    這個時候,你需要一個可視化大屏。藉助圖形化的手段,清晰有效地傳達工況信息。雲視界簡潔易懂的操作界面搭配全套教學視頻,從界面組件到連接數據源,手把手教你做大屏。一起學起來吧!雲視界圖形可視化、產品輕量化,以主動直觀的可視化圖表動效,展示設備指標參數、工況統計信息、遠程監控頁面、綜合管理大屏等工業管理界面,形式友好、角度多樣、通用性強、適應面廣。
  • 「新冠疫情分析管控數據可視化」大屏設計總結
    此刻,疫情仍然在蔓延,如何利用全面、有效,及時的數據和可視化技術準確感知疫情態勢,為決策者、管理人員提供宏觀數據依據,節省決策時間,讓數據可視化成為管理者和時間賽跑的幫手,是快速打贏這場「戰疫」的關鍵。在家為祖國做貢獻期間,設計了該NCP疫情數據可視化大屏,並總結了一些關於數據可視化大屏設計的思考。
  • 零基礎怎麼玩轉數據可視化?看這份工具和技巧清單就夠了
    數據可視化是數據分析重要的一部分,通過圖形或視覺效果幫助讀者更好的理解或者表達數據。人類都是視覺動物,比起密密麻麻的文字和表格, 像下面這樣的圖表更加容易吸引人的眼球,在數據分析的工作中,不管你數據分析的結果如何,要先吸引住人才有機會給讀者分析。所以數據可視化也是數據分析師提高自身競爭力的一個重要技能。
  • 6大數據可視化應用設計規範
    現在企業常用的有無縫隙、1.7mm縫隙、3.5mm縫隙、三種拼接大屏,縫隙越小越貴。另外大屏設計還有一個比較重要的問題就是注意拼接屏之間的縫隙,設計時千萬不能跨屏設計,不然很影響美觀。3.在數據可視化設計中,由於大屏是偏暗的,所以需要選擇高飽和度的色彩,並且需要選擇統一的顏色,保持畫面協調。有時候會遇到客戶需要高飽和度的顏色並且多個顏色的時候,在選用時儘量選用飽和度不要太高的顏色,不然畫面會很不協調,也就是所說的晃眼。
  • 可視化大屏「華而不實」?試試這個BI工具
    作為一名苦逼的數據乙方,經常會接到一些諮詢:「就想做個大屏,要很炫的那種,其他的不需要!」「之前看過大屏案例,做個差不多的就行。」「我們公司想做個大屏,數據已經Excel列好了,一周能做出來嗎?」如果按照以上需求來,可視化大屏幾天就能做完展示出來,但這樣的大屏只是「花架子」,即使做得再炫酷,實際作用寥寥。
  • 大屏數據可視化規範總結
    最近關於大屏的項目做的比較多,目前手頭項目結束,有時間將內容整理分享,基於目前手上的某省監獄項目做可視化大屏規範分享希望能對大家有所幫助。大屏數據可視化概念數據可視化,是關於數據視覺表現形式的科學技術研究。
  • 大屏可視化—教育服務大數據模板
    課堂監管大屏前面五期小編在網上找了一些常用的大屏可視化模板(有需要的小夥伴們,可以點擊下面的連結直達,文章末尾了解更多都有直接獲取demo的地址)。好多小夥伴都在評論區留言想要關於教育行業的大屏可視化demo,小編苦苦追尋終於找到了,他來了,他帶著教育服務大數據模板來了,點擊文章末尾連結更多可直接獲取。
  • 數據可視化基本流程
    作為統計專業出身,學習數據可視化是必不可少的。第一次接觸可視化是在大三上學期,學校特意在我們有了一定的統計基礎和編程能力的情況下,開設了一門數據可視化的課程。這門課程的主要學習內容是利用SPSS、R語言編寫程序,繪製出一些簡單的統計圖形,比如箱線圖,散點圖,熱力圖等等,並根據得出的結果,整理成一份可視化報告。上圖是一張利用DataFocus製作的可視化大屏。今天呢,主要是想通過自己的理解,結合所學的內容,簡單整理出一些關於數據可視化的流程。
  • 開發數據可視化大屏,你還在寫代碼嗎?OUT了!
    數據可視化大屏作為最直觀,最有效的信息傳遞方式已經被廣泛接受。技術的發展也使得數據可視化大屏的開發越來越簡單。一些用Echarts等第三方前端可視化框架做數據可視化大屏開發的程序猿們,一定深有感觸:儘管這些第三方組件包含了許許多多的圖表元件,甚至還提供了詳盡的JS代碼,但是由於每個用戶的大屏需求都不一樣,每次大屏開發都得寫不少前端代碼,改很多CSS樣式。
  • 數據可視化大屏設計實戰分享
    重點概覽:了解數據可視化圖表設計指南;具體設計思路;大屏優化設計總結一、了解數據可視化可視化是為了幫助用戶更好的分析數據,信息的質量很大程度上依賴於其表達方式。四、大屏優化設計本次可視化大屏主要是為了實時展示相關數據監控情況,不同於網頁版可視化設計的展示
  • 21款酷炫的數據可視化工具
    這款工具幫你將數據可視化的時間從幾小時減少到了幾分鐘。它的操作非常簡單,你只需上傳數據,選擇一個圖表或地圖,然後點擊發布就可以了。Datawrapper是為你的需求定製化而存在的,版式和視覺效果都可以按照你的樣式規範而調整。Leaflet
  • 無一行代碼,實現可視化大屏,我是如何做到的
    不寫一行代碼,實現可視化大屏,肯定是要依賴工具的,又不能變魔術,對吧?本文詳細描述我時如何用DataFocus產品實現可視化大屏的製作。筆者既不懂資料庫SQL語言,也不會寫前端JS代碼,甚至連CSS都不明白,但是有DataFocus在手,這都不妨礙我開發出一款漂亮的數據可視化大屏。第一步:去DataFocus官方網站註冊下載相應的安裝包。邀請碼可以加客服微信索取,跟帖放郵箱,我也可以發給你。
  • 案例解析:電商大屏數據可視化設計經驗分享
    本文結合大量實際案例,來與大家分享電商類大屏設計的經驗,帶你了解電商大屏的設計技法與思考。數據可視化大屏設計大多以藍色調為主,因為藍色比較容易營造大屏所追求的科技感,所以在眾多行業中運用最廣泛。例如公安系統、城市交通、科技公司、政企單位、製造業等眾多行業。
  • 你的區位分析圖都是亂做的?告訴你一款工具,一鍵生成最有依據的分析圖!
    ,為了更直觀,往往需要來個「地圖可視化」。大部分研究者可能會先從公開的年鑑數據裡,找到各個行政區的學校數量,放入Excel,製作比柱狀圖進行對比:通過柱狀圖,我們可以發現成都市集中了全省大部分學校數量,卻無法一眼看出其他城市有什麼特點