創建于2017/7/23 最后更新于2017/7/25

關鍵詞：大數據，監控大屏，實時大屏，大屏，數屏，React，Redux，

提綱：

自助式報表、魔盒和數屏的產生邏輯

共享能力

數屏的技術棧

數屏的能力

---

? ?數屏（DataB）?是數據中心吳佰清組推出的高逼格數據應用，它的目標是通過圖形化界面快速搭建可視化監控大屏，數屏可以提供豐富的可視化數據組件，滿足業務監控、會議展覽、投資咨詢等多種業務的展示需求，尤其要滿足PC瀏覽器或者手機瀏覽器訪問下的自適應布局。

?

圖1 數屏默認首頁

?

? ?感謝前臺的吳佰清，董建昌，劉永飛，趙亮，孫錚，后臺的趙興申，袁丙澤，李少杰，呂中舟，高川川。

? ?數據中心2016年提供了實時監控大屏，云縱總部門口電視上投放的就是當面付和縱橫客的大屏。它的運行原理是，數據庫變更訂閱中心（背后是canal）-->Kafka-->HBase/Redis/MySQL-->workman--websocket-->大屏。它的問題是每次都得開發，雙十二時的多張監控大屏就是如此。所以自然而然產生一個想法：大屏能不能所見即所得，不用或減少開發？

?

0x00，自助式報表、魔盒和數屏為什么誕生？

? ?2014年時我提出所謂商業智能平臺無非這么幾個 feature：

• 自助式報表；

• 即席查詢；

• 數據可視化（在自助式報表基礎上）；

• 數據融合；

• 數據倉庫。

? ?那時候自助式報表的目標是，可視化自定義報表，并將報表和圖表組裝成儀表盤。這樣可以節省數據中心的開發人力，不用陷入到每張報表都必須開發的泥潭，專注做好數據倉庫即可。

? ?2014年12月12日，少明主持開發的自助式報表一期上線發布，我們認為初期不需要對外提供自助定義報表的能力，能讓內部開發人員可視化自定義報表（含圖表）、授予其他部門訪問權限即可。

?

圖2 自助式報表平臺-配置報表的向導界面

?

? ?后來又看到了美團的自助ETL規劃，即開放數據的存儲和計算環境，讓ETL流程的編寫和部署Web化，讓其他組織里有能力的研發人員，可以自己在數據倉庫上部署計算流程，計算自己需要的數據。

? ?數據中心沿著這兩個思路一路走來，現如今都有了對應的解決方案：

自助式報表，有了；

即席查詢，實際上被數據開放實驗室（OpenDataLab）間接又實現了一遍；

數據可視化，對應于數屏（DataB）；

自助ETL，對應于魔盒（DataCube）。

這些解決方案的目的都是一個：

共享數據，共享計算資源，共享能力。

?

0x01，共享能力

? ?我們的研發哲學講求，凡是被不斷重復的（coding）過程，就要將其工具化，綁定到自動化流程之中，目的是解放生產力，提高生產效率，為的是讓大家不陷入日復一日年復一年的重復性工作里。

? ?自助式報表對外提供了報表的圖形化設計界面。

? ?數屏對外提供了監控大屏的圖形化設計界面。

? ?魔盒對外提供了 Spark/SparkSQL 等離線計算的圖形化操作界面。

? ?數據開放實驗室對外提供了對授權數據的查詢、發布和下載的圖形化操作界面。

? ?這樣，數據、資源、能力都共享之后，同一個集群，不同研發團隊，可以心無旁騖地做更多的事情。

?

0x02，數屏的技術棧

前端：

React+Redux+D3.js+Three.js等。

后端：

Java+HBase。

前端所使用的包清單為：

包名稱	描述
QS	發起 Ajax 請求時 JSON 串轉換成 form-data
D3	圖表繪圖工具
Less	CSS 構建工具
Three	3D 繪圖工具
Axios	AJAX 請求工具，僅支持 CORS 模式
React	React
Redux	Redux
CountUp	翻牌器
Immutable	數據層有 HASH 值，主要判斷組件是否更新 用于加速 React 渲染
Normalize	去掉 input、body 等默認樣式值（多瀏覽器兼容）
Redux-Saga	Redux 流程中的 AJAX 數據請求異步
React-Router	React 路由模塊
History	管理路由層會話歷史
React-Ace	在線代碼編輯器
React-Color	顏色選擇器
React-ID-Swiper	分屏滾動
SortableContainer	頁面拖拽
Dom-To-Image	基于 Canvas 的 DOM 轉換成圖片

?

為什么使用Redux？

? ?大型應用中不同組件共享同一個數據源的情況是常見的，如果都讓組件自身來維護一份的數據，很容易造成數據混亂。組件內部也由于夾帶著處理數據的邏輯，從而和數據耦合到一起了。

? ?Redux 框架解決了這個問題，簡單來說，它將 React 由父級傳遞數據，變為了由一個統一的數據源 store 單向地向各個組件傳遞數據。

? ?我們通過使用 Redux 能夠將數據集中統一管理起來放到組件的最頂層，然后分發給所有組件，每個組件只管渲染，不處理數據邏輯。

?

0x03，數屏的能力

? ?登錄系統之后，點擊“新建可視化”大按鈕，進入編輯向導。

? ?第一步需要先選擇模板。目前只有兩個模板。點擊創建大屏即可。

?

圖3 新建可視化-選擇模板

?

第二步，在大屏編輯界面上，我們可以看到很多組件，如柱狀圖，餅圖，數字翻牌器，折線圖，漏斗圖，地圖，標題，時間器，等等，往大屏上拖拽即可，如下圖所示：

?

圖4 新建可視化-拖拽組件

?

第三步，選中組件，設置樣式。如下圖所示，我選中了一個折線圖：

?

第四步，選中組件，設置數據源，如下圖所示：

?

圖6 新建可視化-編輯組件數據源

?

目前，數據源類型有三種：

靜態數據：即按規定格式，寫在 JSON 靜態數據里，不可變；

API：即自己在遠端提供一個返回規定格式 JSON 數據的 Web Service；

數據庫：如下圖所示，選好數據庫，寫標準SQL了：

?

圖7 新建可視化-組件數據源-數據庫

?

? ?通過右上角的預覽功能，測試通過之后，就可以點擊“發布”了。發布的時候需要設定這張大屏的驗證密碼。

? ?至此，這張監控大屏就配好了。

?

-EOF-

贈圖四枚

語錄若干：

---

Facebook 終于讓步了，React 許可又改為標準的 MIT 協議。

但以后 FB 再開源別的什么神器，還有人敢用嗎？

信用經不起折騰啊。

/*

React 是 2013 年 5 月開源的。

隨著 React 用戶的增多，Facebook 在 2016 年7月修改了開源許可協議中的附加專利條款 Additional patent grant。

今年7月16號，Apache 基金會把 Facebook BSD + Patents 加入了黑名單，并從開源項目中移除。

8月份，Facebook 發表了一篇名為《關于React使用許可協議的官方聲明》的申明，任何人不能將 React 用于與 Facebook 及其合作公司有直接或間接競爭關系的項目中，否則 Facebook 公司將自動取消其使用許可。

*/

---

騙中騙，局中局，中國互聯網生態：《百合網紅娘直言好多用戶是假的：天天都有投訴》，前有校園貸、裸條，再有招聘網站淪為傳銷圍獵場，而隱藏在水下的是相親網站上多年來融合了茶托、酒托、業務推銷、網店、微商、借錢、傳銷等經典騙局。

---

無極說如果只談修身治國平天下那是錯的，因為這只是后半句話，前面還有半句呢：“物格而后知至。知至而后意誠。意誠而后心正。心正而后身修。身修而后家齊。家齊而后國治。”修身得從最開始的格物致知做起，否則單純修身也沒有意義（悶在小黑屋里修什么身吟詩做賦?）。什么是格物致知？那就是先要了解業務，真刀真槍干起來，看清楚事物的規律，借事修人，借人成事，修身才有意義。

?

-END-

總結

以上是生活随笔為你收集整理的#研发解决方案#共享能力的数屏的全部內容，希望文章能夠幫你解決所遇到的問題。

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