可視化大屏項(xiàng)目操作步驟詳解

1、可視化大屏項(xiàng)目操作步驟詳解可視化大屏項(xiàng)目實(shí)施流程1需求調(diào)研：最耗費(fèi)時(shí)間，最重要的一步。大屏需求調(diào)研是大屏項(xiàng)目的重中之 重，搞清楚業(yè)務(wù)需求，做出來的大屏才有應(yīng)用的價(jià)值，這個(gè)過程需要和業(yè)務(wù)方溝 通確認(rèn)，耗時(shí)很長，不少大屏項(xiàng)目前期需求沒溝通清楚就動手開發(fā)，后面改到哭 爹喊娘。除了業(yè)務(wù)需求調(diào)研之外，如果要在硬件上展示的大屏，還需要對大屏硬件進(jìn)行需 求調(diào)研，比如大屏顯示設(shè)備采購、分辨率輸出等等:大屏展示什么指標(biāo)，指標(biāo)如何布局，一般需要列一個(gè)指標(biāo)清單，和業(yè)務(wù)方明確。然后圖表的樣式，可視化交互功能，如鉆取、聯(lián)動、輪播等，根 據(jù)排版好的內(nèi)容落地成盒原型圖demo。JlBcDImwi.博g 指不身罕不HKR0C

2、正峰1?妙 fj序節(jié)E痞m 噥3類養(yǎng)斥H m近季宦照西戒本為海14 捋陶成4消*酎1兄 _斐灌鉉近定宦佃勇_蛭點(diǎn)爆如8再“ 裁銀 旋匠1成即如將照夷憎第1 花家P!扇三WUUSJ?正瀏瑁皿話里炎拙初=!.蓄段州SfiSE自上三.隹耳W矢夠*2后曲fl： 蟀能！仲4E赫 的丘排名B借望志麗6： 鄰宙瞰皿廟里蕓碰占 詢塑嬤疝控W天尊彭3-SSEP&e = 茵.門差以映 近旺1期融據(jù)口演右式：高紙沽單Cl h U1 . El n 113.藍(lán)圖方案：然后根據(jù)原型圖進(jìn)行視覺美化，需要結(jié)合屏幕尺寸、分辨率、大 屏的風(fēng)格來設(shè)計(jì)。對于大屏而言，藍(lán)圖方案除了業(yè)務(wù)、數(shù)據(jù)、技術(shù)、實(shí)施方案外， 更重要的是對大屏的指標(biāo)

3、、功能點(diǎn)、預(yù)期效果進(jìn)行整理輸出。4,效果落地：根據(jù)藍(lán)圖在前端繪制demo立件BtB Wtt HE曰聲 IS; 2D：2S 12 hrip -nln-*D? -mc-2 ERRCA |uvwlird| JuwjaIOEkcC5 d El國走.宜U國章Ki理， 4 * X =b *fc Kdl 4 stir ill.n ,ffi IE菱臣觸jMF.nineivcn玷MBE加白tWO品牌布lh Id h據(jù)處理：數(shù)據(jù)處理大致分為三步，底層數(shù)據(jù)處理，前端數(shù)據(jù)展現(xiàn)，數(shù)據(jù)校 對。根據(jù)數(shù)據(jù)量和實(shí)時(shí)性需求權(quán)衡是否需要做結(jié)果表。數(shù)據(jù)量?。ㄓ?jì)算簡單），準(zhǔn)實(shí)時(shí)，不需要結(jié)果表數(shù)據(jù)量大（計(jì)算復(fù)雜），準(zhǔn)實(shí)時(shí)，需要結(jié)果表。數(shù)

4、據(jù)量?。ㄓ?jì)算簡單），實(shí)時(shí)，不需要結(jié)果表。數(shù)據(jù)量大（計(jì)算復(fù)雜），實(shí)時(shí)，需要技術(shù)方案（如kafka+flink）6、大屏調(diào)試：理論上顯卡分辨率和PC端調(diào)試分辨率一致的情況下且字體自適應(yīng)，不需要過多調(diào)試，在條件允許的情況下，建議在效果圖落地甚至原型圖設(shè)計(jì)階段就進(jìn)行大屏預(yù)調(diào)試。這樣一套流程下來，一個(gè)大屏項(xiàng)目周期在10-20人天不等，如果需求復(fù)雜，很 有可能一個(gè)項(xiàng)目耗費(fèi)1-2個(gè)月，這之后還有相當(dāng)大的維護(hù)工作要做，所以單純從技術(shù)角度去做一張大屏很容易，但是要完成一個(gè)實(shí)用的大屏項(xiàng)目并不簡單，望大家慎重考慮后動手?？梢暬笃良夹g(shù)上如何實(shí)現(xiàn)？通常做大屏前端方案設(shè)計(jì)有三類選擇，是自行開發(fā)，利用開源的自定義可視化

5、圖表；是利用日【/報(bào)表廠商的工具來制作；是找集成商定制，可以軟硬件一 體化承包。自行開發(fā)。比如基于vue、Echart框架構(gòu)建大屏展示模板，網(wǎng)上有很多開源源碼。其自帶一些動效，比如數(shù)據(jù)動態(tài)刷新渲染、屏幕適應(yīng)、內(nèi)部圖表自由替換、Mixins 注入等功能，這個(gè)是前端。后端需要另寫一套框架請求數(shù)據(jù)，一般java。后端開發(fā)比較麻煩，如果數(shù)據(jù)需求復(fù)雜的話，比如需要多源數(shù)據(jù)連接，不斷的數(shù) 據(jù)抽取和更新，定制開發(fā)難度會上升，代碼復(fù)雜了多了還有BUG，制作周期比 較長，維護(hù)成本比較高。我遇到的很多項(xiàng)目前期都是做了源碼開發(fā)的嘗試，最后因?yàn)椴环€(wěn)定，沒人維護(hù)等 原因走了商業(yè)開發(fā)。大屏定制廠商：這種定制不是那種簡單的

6、圖表展示。通常都是特殊需求，如3D 建模，所以往往需要專業(yè)做可視化的廠商來按需定制。技術(shù)上基于三維的引擎如 ventuz或者unity來定制大屏效果。商業(yè)定制效果通常來說都是最優(yōu)的，但實(shí) 施成本和后期維護(hù)成本也是極其高昂的，實(shí)施幾百萬不等。BI/報(bào)表做大屏幕。現(xiàn)在很多大屏項(xiàng)目都是用BI/報(bào)表工具來開發(fā)，比如帆軟的FineReport雖然其本身是報(bào)表工具，但其實(shí)市面上能很好解決前端展示和后端數(shù)據(jù)讀取連接 的平臺。再者本身提供構(gòu)建可視化的“畫布”（在FineReport里叫設(shè)計(jì)器）， 拖拽操作，對大屏的和移動設(shè)備也提供了一套高效可用的設(shè)計(jì)模式，構(gòu)建可視化 的成本比較低，上手也比較容易，光這一點(diǎn)就能

7、節(jié)約一周的人天。SJ Im- 1 L 一# X管WH歸立件WBt 牡區(qū)曰聲 蠢 20:31:22 hrip-niD-&O7S-iKac-2 ERRC |ttvwlird| JjwjalOEK-43 C E反定夕.ms部皿1 * *崩屯牛Xj? DtmoHS.Irm責(zé) demGa.FrmM 02derrw.FrmM iQ Fomi? L_frm 叫dtmo doc ffcne Fie portISdEnra AWAn Ifi# 旬I Q *BngUrQ CeMO.frm Q OflrrfiMT-月 saUftWHiP)癰牌懺，國川0 iJBt-HiG：!.,.導(dǎo) HABEH -供用定丈麻林 國

8、ififltfiiwi.l 曰史r m 害 *JW: AdUdl* MfcB* 1UHJB1 MJM： aiui JA1CQg,11,3可視化方面，為大屏效果專門提供可復(fù)用模板和組件，能滿足絕大部分大屏的需求，涉及到特殊3D模型，也可和專業(yè)廠商做集成，提供建模實(shí)施方案。盤品 H團(tuán)糖制8爵9M1 瑋. * trLi u3543S400319145n rii.MKI H4 口 AM MA H?J0 J5IM SEbt*一_ , _ T二三三*三XF芯壬M:另外，項(xiàng)目管理往往需要考慮成本，人力成本和后續(xù)的維護(hù)成本。FineReport 具備前端展示和后端數(shù)據(jù)讀取的技術(shù)條件，平臺化的產(chǎn)品，后續(xù)維護(hù)成本

9、很低。大家對可視化大屏有哪些認(rèn)知誤區(qū)？我們經(jīng)常能在網(wǎng)上看到很多視覺效果非常驚艷的效果圖，拿來做參考，但是大部 分的效果圖都不能百分百復(fù)現(xiàn)，因?yàn)槲覀儗?shí)際實(shí)施時(shí)需要適配屏幕分辨率，比如 字體能否自適應(yīng)大小。一些動態(tài)展示如3D旋轉(zhuǎn)以及圖表空間和數(shù)據(jù)刷新的速率 也無法看見，基本上實(shí)際圖做出來會和效果圖差那么一兩成。很多人把大屏理解為單純的前端展現(xiàn)技術(shù)，想的太簡單了，數(shù)據(jù)從哪里來，是讀 業(yè)務(wù)數(shù)據(jù)庫還是建立中間庫，數(shù)據(jù)更新的頻率要求是什么，數(shù)據(jù)質(zhì)量有無問題還 要先做底層數(shù)據(jù)處理？硬件方面，需要明確大屏的尺寸、種類、驅(qū)動大屏的主機(jī)？業(yè)務(wù)方面，大屏展示 什么指標(biāo)和維度，業(yè)務(wù)分析邏輯誰來支撐？這些都是要考慮的。