創(chuàng)建于2017/7/23 最后更新于2017/7/25

關(guān)鍵詞：大數(shù)據(jù)，監(jiān)控大屏，實(shí)時(shí)大屏，大屏，數(shù)屏，React，Redux，

提綱：

自助式報(bào)表、魔盒和數(shù)屏的產(chǎn)生邏輯

共享能力

數(shù)屏的技術(shù)棧

數(shù)屏的能力

---

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

?

圖1 數(shù)屏默認(rèn)首頁

?

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

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

?

0x00，自助式報(bào)表、魔盒和數(shù)屏為什么誕生？

? ?2014年時(shí)我提出所謂商業(yè)智能平臺(tái)無非這么幾個(gè) feature：

• 自助式報(bào)表；

• 即席查詢；

• 數(shù)據(jù)可視化（在自助式報(bào)表基礎(chǔ)上）；

• 數(shù)據(jù)融合；

• 數(shù)據(jù)倉庫。

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

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

?

圖2 自助式報(bào)表平臺(tái)-配置報(bào)表的向?qū)Ы缑?/span>

?

? ?后來又看到了美團(tuán)的自助ETL規(guī)劃，即開放數(shù)據(jù)的存儲(chǔ)和計(jì)算環(huán)境，讓ETL流程的編寫和部署Web化，讓其他組織里有能力的研發(fā)人員，可以自己在數(shù)據(jù)倉庫上部署計(jì)算流程，計(jì)算自己需要的數(shù)據(jù)。

? ?數(shù)據(jù)中心沿著這兩個(gè)思路一路走來，現(xiàn)如今都有了對應(yīng)的解決方案：

自助式報(bào)表，有了；

即席查詢，實(shí)際上被數(shù)據(jù)開放實(shí)驗(yàn)室（OpenDataLab）間接又實(shí)現(xiàn)了一遍；

數(shù)據(jù)可視化，對應(yīng)于數(shù)屏（DataB）；

自助ETL，對應(yīng)于魔盒（DataCube）。

這些解決方案的目的都是一個(gè)：

共享數(shù)據(jù)，共享計(jì)算資源，共享能力。

?

0x01，共享能力

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

? ?自助式報(bào)表對外提供了報(bào)表的圖形化設(shè)計(jì)界面。

? ?數(shù)屏對外提供了監(jiān)控大屏的圖形化設(shè)計(jì)界面。

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

? ?數(shù)據(jù)開放實(shí)驗(yàn)室對外提供了對授權(quán)數(shù)據(jù)的查詢、發(fā)布和下載的圖形化操作界面。

? ?這樣，數(shù)據(jù)、資源、能力都共享之后，同一個(gè)集群，不同研發(fā)團(tuán)隊(duì)，可以心無旁騖地做更多的事情。

?

0x02，數(shù)屏的技術(shù)棧

前端：

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

后端：

Java+HBase。

前端所使用的包清單為：

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

?

為什么使用Redux？

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

? ?Redux 框架解決了這個(gè)問題，簡單來說，它將 React 由父級(jí)傳遞數(shù)據(jù)，變?yōu)榱擞梢粋€(gè)統(tǒng)一的數(shù)據(jù)源 store 單向地向各個(gè)組件傳遞數(shù)據(jù)。

? ?我們通過使用 Redux 能夠?qū)?shù)據(jù)集中統(tǒng)一管理起來放到組件的最頂層，然后分發(fā)給所有組件，每個(gè)組件只管渲染，不處理數(shù)據(jù)邏輯。

?

0x03，數(shù)屏的能力

? ?登錄系統(tǒng)之后，點(diǎn)擊“新建可視化”大按鈕，進(jìn)入編輯向?qū)А?/span>

? ?第一步需要先選擇模板。目前只有兩個(gè)模板。點(diǎn)擊創(chuàng)建大屏即可。

?

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

?

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

?

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

?

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

?

第四步，選中組件，設(shè)置數(shù)據(jù)源，如下圖所示：

?

圖6 新建可視化-編輯組件數(shù)據(jù)源

?

目前，數(shù)據(jù)源類型有三種：

靜態(tài)數(shù)據(jù)：即按規(guī)定格式，寫在 JSON 靜態(tài)數(shù)據(jù)里，不可變；

API：即自己在遠(yuǎn)端提供一個(gè)返回規(guī)定格式 JSON 數(shù)據(jù)的 Web Service；

數(shù)據(jù)庫：如下圖所示，選好數(shù)據(jù)庫，寫標(biāo)準(zhǔn)SQL了：

?

圖7 新建可視化-組件數(shù)據(jù)源-數(shù)據(jù)庫

?

? ?通過右上角的預(yù)覽功能，測試通過之后，就可以點(diǎn)擊“發(fā)布”了。發(fā)布的時(shí)候需要設(shè)定這張大屏的驗(yàn)證密碼。

? ?至此，這張監(jiān)控大屏就配好了。

?

-EOF-

贈(zèng)圖四枚

語錄若干：

---

Facebook 終于讓步了，React 許可又改為標(biāo)準(zhǔn)的 MIT 協(xié)議。

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

信用經(jīng)不起折騰啊。

/*

React 是 2013 年 5 月開源的。

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

今年7月16號(hào)，Apache 基金會(huì)把 Facebook BSD + Patents 加入了黑名單，并從開源項(xiàng)目中移除。

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

*/

---

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

---

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

?

-END-

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。