這兩年資料視覺化大屏成為了各家公司的網紅,老闆動不動開口就要“酷炫大屏”,大屏的應用場景確實很多,不僅能實時監控重點資料,提高決策效率,放在公司會議室,展臺等地方,還能提升公司形象。
於是這兩年各種視覺化大屏的文章和技術分享部落格越來越多了,一些文章把大屏製作說的神乎其技,低門檻,成本低,給很多企業和IT從業者帶來了很多誤導,導致很多公司興沖沖去搞大屏專案,但是花費了巨大的時間和成本,做出來的大屏實用性並不高。
作為一個接觸視覺化大屏專案4年多的老技術,做了過大大小小十幾個大屏專案,給大家科普一下實際工作中,一個視覺化大屏專案的上線流程,順帶給大家掃一掃對大屏認知的誤區
視覺化大屏專案實施流程一般整個大屏開發流程可劃分為六個部分,之前的文章裡我介紹過,這邊再講一下:
1、需求調研:最耗費時間,最重要的一步。大屏需求調研是大屏專案的重中之重,搞清楚業務需求,做出來的大屏才有應用的價值,這個過程需要和業務方溝通確認,耗時很長,不少大屏專案前期需求沒溝通清楚就動手開發,後面改到哭爹喊娘。
除了業務需求調研之外,如果要在硬體上展示的大屏,還需要對大屏硬體進行需求調研,比如大屏顯示裝置採購、解析度輸出等等
2、原型設計:大屏展示什麼指標,指標如何佈局,一般需要列一個指標清單,和業務方明確。然後圖表的樣式,視覺化互動功能,如鑽取、聯動、輪播等,根據排版好的內容落地成盒原型圖demo。
3、藍圖方案:然後根據原型圖進行視覺美化,需要結合螢幕尺寸、解析度、大屏的風格來設計。對於大屏而言,藍圖方案除了業務、資料、技術、實施方案外,更重要的是對大屏的指標、功能點、預期效果進行整理輸出。
4、效果落地:根據藍圖在前端繪製demo
5、資料處理:資料處理大致分為三步,底層資料處理,前端資料展現,資料校對。根據資料量和實時性需求權衡是否需要做結果表。
資料量小(計算簡單),準實時,不需要結果表資料量大(計算複雜),準實時,需要結果表。資料量小(計算簡單),實時,不需要結果表。資料量大(計算複雜),實時,需要技術方案(如kafka+flink)6、大屏除錯:理論上顯示卡解析度和PC端除錯解析度一致的情況下且字型自適應,不需要過多除錯,在條件允許的情況下,建議在效果圖落地甚至原型圖設計階段就進行大屏預除錯。
這樣一套流程下來,一個大屏專案週期在10-20人天不等,如果需求複雜,很有可能一個專案耗費1-2個月,這之後還有相當大的維護工作要做,所以單純從技術角度去做一張大屏很容易,但是要完成一個實用的大屏專案並不簡單,望大家慎重考慮後動手。
自行開發。比如基於vue、Echart 框架構建大屏展示模板,網上有很多開源原始碼。
其自帶一些動效,比如資料動態重新整理渲染、螢幕適應、內部圖表自由替換、Mixins注入等功能,這個是前端。後端需要另寫一套框架請求資料,一般java。
後端開發比較麻煩,如果資料需求複雜的話,比如需要多源資料連線,不斷的資料抽取和更新,定製開發難度會上升,程式碼複雜了多了還有BUG,製作週期比較長,維護成本比較高。
我遇到的很多專案前期都是做了原始碼開發的嘗試,最後因為不穩定,沒人維護等原因走了商業開發。
大屏定製廠商:這種定製不是那種簡單的圖表展示。通常都是特殊需求,如3D建模,所以往往需要專業做視覺化的廠商來按需定製。技術上基於三維的引擎如ventuz或者unity來定製大屏效果。商業定製效果通常來說都是最優的,但實施成本和後期維護成本也是極其高昂的,實施幾百萬不等。
BI/報表做大螢幕。現在很多大屏專案都是用BI/報表工具來開發,比如帆軟的FineReport
雖然其本身是報表工具,但其實市面上能很好解決前端展示和後端資料讀取連線的平臺。再者本身提供構建視覺化的“畫布”(在FineReport裡叫設計器),拖拽操作,對大屏的和移動裝置也提供了一套高效可用的設計模式,構建視覺化的成本比較低,上手也比較容易,光這一點就能節約一週的人天。
視覺化方面,為大屏效果專門提供可複用模板和元件,能滿足絕大部分大屏的需求,涉及到特殊3D模型,也可和專業廠商做整合,提供建模實施方案。
另外,專案管理往往需要考慮成本,人力成本和後續的維護成本。FineReport具備前端展示和後端資料讀取的技術條件,平臺化的產品,後續維護成本很低。
大家對視覺化大屏有哪些認知誤區?誤區一:效果圖是效果圖,實際不一定能做出來
我們經常能在網上看到很多視覺效果非常驚豔的效果圖,拿來做參考,但是大部分的效果圖都不能百分百復現,因為我們實際實施時需要適配螢幕解析度,比如字型能否自適應大小。一些動態展示如3D旋轉以及圖表空間和資料重新整理的速率也無法看見,基本上實際圖做出來會和效果圖差那麼一兩成。
誤區二:大屏不僅僅是前端技術
很多人把大屏理解為單純的前端展現技術,想的太簡單了,資料從哪裡來,是讀業務資料庫還是建立中間庫,資料更新的頻率要求是什麼,資料質量有無問題還要先做底層資料處理?
硬體方面,需要明確大屏的尺寸、種類、驅動大屏的主機?業務方面,大屏展示什麼指標和維度,業務分析邏輯誰來支撐?這些都是要考慮的。
誤區三:大屏成本低,零程式碼實現?NO!
據我所知,一個大屏專案十幾萬是常有的事,上千萬的大屏專案我也見過。
大屏的成本除去前端設計和定製還有硬體費用,一個大屏硬體都是十幾萬、幾十萬起步。另外有一些智慧城市、製造行業有3D建模需求的,需要定製建模渲染,那成本就是無底洞了,有待商榷。
大屏的前端技術實現有很多種方案,有低程式碼的繪製,也有全程式碼的定製,取決於技術和需求,技術和業務需求總是相互取捨的,後面會詳細講這塊。