為什么要做數據大屏？

現如今的大數據逐漸發揮出了它的力量，并無形的改變著我們的生活。但大數據在不是從事技術開發的人來說沒有很明顯的感受，很多人對大數據的概念只是停留在每年網易云音樂對個人聽歌的匯總上、知乎2017年解鎖的知識成就、微信新年的個人社交分析、支付寶的年終賬單等。其迫切的需要通過一些媒介展現數據的威力，而數據大屏作為大數據展示媒介的一種，廣泛運用于各種展示廳、會展、發布會及各種狂歡節中，其中不乏一些通用的處理方案：阿里巴巴集團的DataV產品。其大屏有多種主題，提供多種模版，設計的非常的震撼，DataV也用于展現歷年雙十一的盛況。

而公司的大數據工作組就需要通過數據大屏展示一些處理過后有價值的信息，因此需求孕育而生。下面的截圖是產品迭代四次之后在公司大屏展示廳的照片，第五次迭代還在開發中。

公司數據大廳照片

用Vue做基礎的框架是不是合適？

絕對合適，就現在運用的情況來說，Vue適合95%的網頁應用開發，幾乎任何的網頁應用Vue都有對應的解決方案，而且開發效率極高，甚至由于它組件化的特性，尤其適合完成一些需求不明確、需求在應用開發的過程中一直會發生變化、需要快速迭代出一個新版本的開發。而最終參與制作的產品就是一個在需求不明確的情況下慢慢變成一個產品的。

程序員如何產生想法再落實到實際開發？

眾所周知，程序員是碼代碼的，而設計產品不是程序員的強項，很不巧的是我就是那個碼代碼，不太會設計的程序員，但通過一些訣竅，還是能夠設計出一款不錯的大屏應用的。下面就來介紹一下里面的一些技巧，這些技巧其實還適用于其他的產品設計。

數據大屏設計歸根結底就是一個在極端寬闊的屏幕上做應用的開發，因此大屏設計往往強調的是大數據迸發的一瞬間大量的數據信息通過一定的可視化形式瞬間沖入腦海的驚艷感。讓人感覺數據距離大家不是這么的遙遠，而給人一種觸手可及的感覺。

數據大屏的設計其實是有訣竅的，掌握了一些訣竅，在知道了公司大數據組大概需要展示哪些內容之后，不需要UI，程序員自己也能配合產品經理、企劃部和DBA完成一個數據大屏產品的設計。

步驟分為

確定基色->尋找靈感->思考實施->作出第一個原型->再次了解需求->多次修改產品->優化細節

后面的步驟需要循環多次，歸根結底就是一個典型的需求不明確快速迭代的原型開發。

確定基色和尋找靈感

確定基色不是很難，由于是大屏，采用深色做背景，最重要的是要有靈感，初期的需求分析了解到了需要在大屏上存放的內容如下：

兩塊地圖

三個大數據數值的統計

流程圖展示

實時提單詳細展示

收發報文統計展示

在確定了初期的需求之后，接下來就是思考如何把這些需求落實到頁面上。如何在頁面上展示這些內容。而數據大屏的展示，數據大屏的核心就是數據的拼接，具體到展示層可以歸納成數據塊的拼接，由于公司大屏是8*4的32塊屏，因此起初的尋找靈感就是從分塊開始。

切分尋找靈感.jpg

這樣做的好處是每個屏幕切分的很清晰，靈感也在切分中越來越清晰，到往后就是一個個模塊的排列組合，和細節的優化，經過初期對需求的解讀，初步劃分如下圖所示。

大屏模塊劃分.png

地圖1

標題

實時提單展示

地圖2

全鏈路

數據統計

7-11：報文詳細

在開發上，歸功于Vue的組件化思想，當設計出一個模塊框和些許組件之后，后面的內容就是按照內容劃分進行填充，極其的快速，馬上，第一個原型孕育而生，而且出了圖標采用開源解決方案，其他的內容都是自己從零開始開發的，維護效率也偏高，產品設計也更加統一。

第一個原型

下圖展示了第一個原型的誕生，運用Vue進行開發，圓環和統計圖采用ECharts進行繪制，上面的實時提單展示會一直滾動，并且實時可以查看單子的詳細。

第一個原型

再次了解需求

下面開始就是快速迭代中比較重要的一點：快速了解進一步的需求，在第一個原型誕生之后，必然帶來第二稿的修改，因為模糊的需求并不能精確命中用戶的真實需求，而用戶的正式需求往往是設計人員在設計出第一個原型之后誕生的。

此時用戶在見到了一些內容之后會有更加近一步的想法，甚至有些設計因為需求不明確和真實需求并不相符，不是用戶真正想要的內容，就比如上圖那個全鏈路的圓環，在進一步了解需求之后發現，有可能一天有多個步驟同時發生，那運用圓環表示比率的做法就沒有任何的意義，而這些只有在第一個原型出來之后才能發現的。

于是配合用戶、業務部門和DBA，誕生了第二個原型，和第一個原型比更加的豐富，業務也發生了相應的變化。

多次修改產品、優化細節

第二個原型

第三個原型

經過多次和用戶、企劃、公司大數據組人員進行溝通后，變成了最終文章開始的展示模式，原型確定之后的具體后端接口的開發了。

這其中最方便的一點是開發完原型后前端應用展示方面的內容無需修改分毫，因此運用假接口調用和后端確定規范就變得非常必要，只需要編寫后端數據，編寫完之后直接修改HOST就能做到，由于原型開發面臨這不斷的修改，而且后端也不清楚最后能夠提供什么樣的數據，這樣溝通成本就變得很大，如何降低溝通成本，制定一個規范，就是我們必須要考慮的問題。

原先會通過原型變更后端的假接口也相應發生變化，讓前端去調用，這樣做非常低效，后端工程師的時間也浪費了，測試也要等到后端假接口寫完之后，但得益于YAPI這個開源項目(這是由去哪兒的工程師開發的一套前后端開發規范管理系統)運用mockjs做假數據的生成，原型直接調用這套系統的接口。后端也無需考慮數據結構，前端把定義好的數據結構寫成YAPI內部對應的一個個測試接口，當輪到后端開發的時候直接按照這套系統的API規范進行開發，降低了溝通成本，對于任何一個團隊來說都非常便捷。

代碼結構設計

組件化拆分變的尤為重要，又是webpack打包的項目，因此模塊也相對比較清晰，對于后期運維也相對好維護。

組件

data-block：數據模塊框組件

data-link：全鏈路組件

data-map：地圖組件

data-marquee：實時滾動組件

data-step：嵌套在data-link內部的步驟條詳細

data-title：標題組件

svg-circle：原型內部鏈路圓環(已被需求淘汰)

圖表全在utils內部的chart.js內部維護，圖標采用SVG，和鏈路項的順序單獨維護在配置文件內部，便于需求變化后的修改。樣式運用less進行開發，統一配色、樣式。

PS：用戶就是領導😂

總結

以上是生活随笔為你收集整理的web大屏展示用到的组件_从零开始设计数据大屏—基于Vue的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。