首页
/
每日頭條
/
科技
/
實時數據可視化大屏
實時數據可視化大屏
更新时间:2024-11-23 13:40:00

都說「數不如圖」,在數據報告中,就常常借助圖形化的手段将數據清晰表達出來,可以更簡單有效地傳達和溝通。

這兩年,數據可視化大屏在數據報告中的占比越來越大,企業和政府會更傾向于選擇炫酷大屏進行數據分析展示。炫酷大屏不僅能實時監控重點數據,提高決策效率,放在公司會議室,展台等地方,還能提升公司形象。

實時數據可視化大屏(從0-1制作數據可視化大屏)1

作為一個從事可視化大屏項目3年多的秃頭技術,做過大大小小幾十個大屏項目,給大家科普一下實際工作中,一個可視化大屏項目的上線流程。

實時數據可視化大屏(從0-1制作數據可視化大屏)2

可視化大屏項目實施流程

一般整個大屏開發流程可劃分為六個部分,分别是:

  • 需求調研
  • 原型設計
  • 效果圖設計
  • 效果落地
  • 數據接入
  • 大屏調試
需求調研

需求調研是整個大屏制作過程中最耗費時間,最重要的一步。隻有搞清楚業務需求,做出來的大屏才有應用的價值,這個過程需要和業務方溝通确認,耗時很長,不少大屏項目前期需求沒溝通清楚就動手開發,後面改到哭爹喊娘。

除了業務需求調研之外,如果要在硬件上展示的大屏,還需要對大屏硬件進行需求調研,比如大屏分辨率,大屏顯卡所支持的分辨率輸出,顯卡是否支持自定義分辨率,HDMI 線支持的分辨率。了解物理大屏分辨率,确定設計稿尺寸。

原型設計

确認展示需求之後,我們要梳理大屏展示的關鍵指标,一般情況下,一個指标在大屏上獨占一塊區域,所以通過關鍵指标定義,我們就知道大屏上大概會顯示哪些内容以及大屏會被分為幾塊。确定關鍵指标後,根據業務需求拟定展示指标的布局。

提供幾個常用的大屏布局樣式:

(1)左右分布

實時數據可視化大屏(從0-1制作數據可視化大屏)3

(2)中心環繞

實時數據可視化大屏(從0-1制作數據可視化大屏)4

(3)上下布局

實時數據可視化大屏(從0-1制作數據可視化大屏)5

拟定展示指标的布局後,需要和業務方進行确認。業務方同意後,再設計圖表的樣式,交互功能,如鑽取、聯動、輪播等,根據排版好的内容落地成原型圖。

效果圖設計

原型圖确認後,需要美工需要結合屏幕尺寸、分辨率、大屏的風格來設計效果圖。對于大屏而言,效果圖主要對大屏的指标、數據、預期效果進行整理輸出。

效果落地

根據效果圖在前端制作大屏,一般有兩種方式,一是用代碼開發,還有一種是用現成的可視化工具制作。

用的比較多的就是JS Echarts,但數據量支撐、後台響應、實時更新、平台運維等應該還要調用更多的技術,非常考驗技術水平,所以我推薦直接用可視化工具制作,比如億信ABI、dataV等等,簡單又方便,重點是不需要寫一大堆代碼,自帶的圖表插件可視化效果很炫酷,拖拖拽拽即可生成數據可視化大屏。

在制作大屏時,可以選擇各平台提供的行業模闆,在模闆的基礎上進行修改設計,節省制作大屏的人力、周期。給大家分享下億信ABI提供的行業酷屏模闆。

衛生行業

實時數據可視化大屏(從0-1制作數據可視化大屏)6

制造行業

實時數據可視化大屏(從0-1制作數據可視化大屏)7

實時數據可視化大屏(從0-1制作數據可視化大屏)8

司法行業

實時數據可視化大屏(從0-1制作數據可視化大屏)9

實時數據可視化大屏(從0-1制作數據可視化大屏)10

酷屏模闆到手後,該如何“為我所用”呢?下面這個動圖講得清清楚楚明明白白,您可根據如下操作步驟來試用或購買體驗哦

實時數據可視化大屏(從0-1制作數據可視化大屏)11

數據接入

數據接入大緻分為三步,底層數據接入,前端數據展現,數據校對,同時需要考慮數據量和實時性需求。

大屏調試

理論上顯卡分辨率和PC端調試分辨率一緻的情況下且字體自适應,不需要過多調試,在條件允許的情況下,建議在效果圖落地甚至原型圖設計階段就進行大屏預調試。

這樣一套流程下來,一個大屏項目周期在10-20人天不等,如果需求複雜,很有可能一個項目耗費1-2個月,這之後還有相當大的維護工作要做,所以單純從技術角度去做一張大屏很容易,但是要完成一個實用的大屏項目并不簡單。

,
Comments
Welcome to tft每日頭條 comments! Please keep conversations courteous and on-topic. To fosterproductive and respectful conversations, you may see comments from our Community Managers.
Sign up to post
Sort by
Show More Comments
Copyright 2023-2024 - www.tftnews.com All Rights Reserved