今天談下自定義報(bào)表和可視化監(jiān)控大屏設(shè)計(jì)方面的內(nèi)容，準(zhǔn)備分三個部分來講，第一是先看下當(dāng)前主流的商用報(bào)表工具的功能特點(diǎn)，其次分別談下報(bào)表設(shè)計(jì)和可視化監(jiān)控大屏設(shè)計(jì)。

圖片來源網(wǎng)絡(luò)

最近在網(wǎng)上搜索自定義報(bào)表，監(jiān)控大屏制作，搜索到了FineReport報(bào)表制作工具。

FineReport報(bào)表軟件是一款純功能于一身的企業(yè)級web報(bào)表工具，它“專業(yè)、簡捷、靈活”的特點(diǎn)和無碼理念，僅需簡單的拖拽操作便可以設(shè)計(jì)復(fù)雜的中國式報(bào)表，搭建數(shù)據(jù)決策分析系統(tǒng)。

這款報(bào)表制作工具還是相對的火，你能夠想到的常見報(bào)表自定義，報(bào)表的多維度分析，統(tǒng)計(jì)匯總，上鉆和下鉆，圖形可視化等基本都能夠?qū)崿F(xiàn)?？梢詫痈鞣N關(guān)系型數(shù)據(jù)庫作為數(shù)據(jù)源，同時也支持你手工填報(bào)數(shù)據(jù)上來進(jìn)行采集后匯總，然后報(bào)表呈現(xiàn)。關(guān)鍵是該報(bào)表很多能力基于Excel來完成，只有你有基礎(chǔ)的Excel使用技能，并不需要太多的編碼能力就能夠完成報(bào)表的開發(fā)和制造。

而對于監(jiān)控大屏制作，是今年來報(bào)表的一個擴(kuò)展關(guān)鍵能力，F(xiàn)inedReport剛好提供了該能力。

可以看看這篇文章介紹：
http://bbs.fanruan.com/thread-94898-1-1.html

看了之后，會發(fā)現(xiàn)監(jiān)控大屏制作可以很容易，在沒有這個工具的時候我們也在考慮如何做監(jiān)控大屏，包括選擇類似百度Echart做相關(guān)的圖表，找美工進(jìn)行整體界面風(fēng)格的設(shè)計(jì)和配色，確定需要在監(jiān)控大屏上顯示的內(nèi)容等。

而看了上面的文章，給我最大的感受就是，做任何事情我們都可以從大量的特殊性和差異化中抽象中共性化的特征，同時將差異點(diǎn)進(jìn)行參數(shù)化和模板化，以完成對這類事情的普適化模板和套路設(shè)計(jì)。

拿監(jiān)控大屏來說，你要達(dá)到上面的能力，首先你就需要有大量的監(jiān)控到設(shè)計(jì)和開發(fā)實(shí)踐，或者至少觀察了大量的監(jiān)控屏實(shí)現(xiàn)例子。其次你需要具備足夠的抽象化能力，找尋共性，并完成從特殊到一般的過程。從FineReport體現(xiàn)的監(jiān)大屏制作能力，該思路也完全適用于我們?nèi)粘５漠a(chǎn)品化規(guī)劃和設(shè)計(jì)工作。

所謂的軟件產(chǎn)品化，也就是是一個從大量個性化業(yè)務(wù)場景中進(jìn)行共性能力抽取，個性能力參數(shù)化的過程而已。

再回來看監(jiān)控大屏實(shí)現(xiàn)，你會發(fā)現(xiàn)進(jìn)行抽象和模板化后整個實(shí)現(xiàn)過程本身很簡單。

1. 選擇布局和排版，這個本身可以表格化和模板化，足夠解決問題。

2. 選擇基本的配色體系，在前面我們可以預(yù)設(shè)常用的配色體系，供選擇即可。

3. 選擇每個Panel里面的數(shù)據(jù)呈現(xiàn)方式(文字，數(shù)字，表格，各種圖形，地圖，關(guān)系等）

4. 為每個Panel的數(shù)據(jù)呈現(xiàn)配置相應(yīng)的數(shù)據(jù)源

5. 實(shí)現(xiàn)一些最后的點(diǎn)綴，動態(tài)實(shí)時效果等。

而上面這些步驟也是我們自己進(jìn)行監(jiān)控大屏開發(fā)的時候常用的方法和步驟，只是FineReport把這個過程進(jìn)一步參數(shù)化和模板化了而已。難的地方就在于大量觀察和實(shí)踐后，這種通用模型和能力的抽象。

最后對于FineReport報(bào)表本身的簡單易用性，強(qiáng)大的功能，網(wǎng)上有些總結(jié)，而這些總結(jié)本身體現(xiàn)的就是長期在一個專業(yè)方向或領(lǐng)域的持續(xù)不斷的積累，對簡單易用產(chǎn)品哲學(xué)的堅(jiān)持，對用戶使用場景的深刻洞察，對各種產(chǎn)品細(xì)節(jié)的不斷優(yōu)化，而所有上面的這些都缺一不可。

一個產(chǎn)品要能夠做成功，往往需要的就是這種長期的堅(jiān)持和努力，不斷優(yōu)化改進(jìn)，對一線用戶使用需求的積極響應(yīng)和分析。我們很多時候產(chǎn)品沒有做好，一個是脫離用戶，一個就是迎合潮流和趕時髦，很多產(chǎn)品做到中途由于推廣的不好就放棄，又換一個新產(chǎn)品進(jìn)行研發(fā)，和猴子掰玉米本質(zhì)上并沒有大的區(qū)別。

真正的產(chǎn)品成功之道，里面最重要的就是長期的堅(jiān)持和積累，不輕言放棄。真正好用的產(chǎn)品往往都是你對用戶需求的重視，由用戶需求幫你不斷打磨和抽象出來的模型。

FineReport網(wǎng)址：
http://www.fanruan.com/finemax/

對于自定義報(bào)表，在前面講的商用報(bào)表平臺或工具來實(shí)現(xiàn)大屏展示，而實(shí)際上一談到報(bào)表大家談的比較多的還是BI分析應(yīng)用中常用的各種報(bào)表類工具，類似水晶報(bào)表，國內(nèi)的FineReport等。一個商用的報(bào)表平臺或工具可以看到功能會很強(qiáng)大，但是總結(jié)來說還是數(shù)據(jù)采集，設(shè)計(jì)，呈現(xiàn)幾個部分內(nèi)容。

1. 數(shù)據(jù)采集：從結(jié)構(gòu)化數(shù)據(jù)庫，各類文件數(shù)據(jù)源，也包括直接提供手工填報(bào)端的自動生成。

2. 報(bào)表設(shè)計(jì)器：提供獨(dú)立的報(bào)表設(shè)計(jì)器能力，支持類似分組，切片，鉆取等各類復(fù)雜場景，支持各類圖表。

3. 報(bào)表展示：報(bào)表展示支持各類圖表的展示，支持自定義參數(shù)查詢，支持類似監(jiān)控大屏等。

在這里不打算詳細(xì)討論商用自定義報(bào)表能力。對于我們大部分業(yè)務(wù)系統(tǒng)來說，需要的報(bào)表能力往往并不需要類似BI系統(tǒng)報(bào)表這么強(qiáng)大，更多的可以理解為自定義查詢能力 可定制的圖表展現(xiàn)。那么我們在實(shí)現(xiàn)自定義報(bào)表的時候就應(yīng)該從這兩個方面來考慮一個報(bào)表如何實(shí)現(xiàn)。

在考慮這個問題的時候，我們先考慮報(bào)表設(shè)計(jì)器的問題。對于最終的報(bào)表展現(xiàn)效果我們看到，分為自定義查詢條件部分，和報(bào)表內(nèi)容展示區(qū)域。報(bào)表內(nèi)容展示區(qū)域可以理解為一個個的獨(dú)立Widget面板，每個面板就展示一個內(nèi)容，可以是一個曲線圖，也可以是一個表格，Panel面板里面的內(nèi)容可以自己進(jìn)行定制。

整體展示效果類似如下：

下面來拆分下幾個關(guān)鍵的功能。

1. 數(shù)據(jù)源的定義

數(shù)據(jù)源定義關(guān)鍵就是通過數(shù)據(jù)源形成可在報(bào)表界面上展示的數(shù)據(jù)集。因此該功能建議不僅僅是簡單定義數(shù)據(jù)源，同時包括數(shù)據(jù)集或數(shù)據(jù)對象的定義。因?yàn)閿?shù)據(jù)集本身也是可復(fù)用的，不需要重復(fù)設(shè)計(jì)。

數(shù)據(jù)源連接可以是JDBC方式，也可以是WebService接口方式，而實(shí)際上最佳方案是采用WS服務(wù)接口方式來獲取數(shù)據(jù)集。這樣可以進(jìn)一步保障后端數(shù)據(jù)庫的安全性。

為了更好的支撐參數(shù)化查詢，對于數(shù)據(jù)集的定義可以帶參數(shù)化查詢條件，由外圍傳入。

2. 單數(shù)據(jù)面板的定義

單數(shù)據(jù)面板的定義實(shí)際上思路很簡單，就是要實(shí)現(xiàn)數(shù)據(jù)集和數(shù)據(jù)展示組件之間的綁定。數(shù)據(jù)面板可以是常規(guī)的表格，折線圖，曲線圖，餅圖等。當(dāng)前如果采用百度Echart圖表庫的話，我們可以做到對Echart圖表庫的大部分圖形展現(xiàn)都支持。

數(shù)據(jù)集籠統(tǒng)來說就是一個二維結(jié)構(gòu)的數(shù)據(jù)對象返回，這個二維結(jié)構(gòu)可以很容易影響到表格，也可以映射為類似折線，曲線，餅圖等各種我們希望展示的形狀。

3. 整體查詢報(bào)表頁面的設(shè)計(jì)和定義

對整體查詢報(bào)表的設(shè)計(jì)實(shí)際上可以看到，主要工作就是定義自定義查詢面板，定義和選擇需要在該報(bào)表中展示的單數(shù)據(jù)面板。確定查詢結(jié)果面板的具體布局形式。

對于面板布局采用最簡單的Grid布局形式即可，在定義清楚一個標(biāo)準(zhǔn)的Grid布局后，我們就很容易來配置單個面板究竟占有幾列幾行。同時在單個面板設(shè)計(jì)的時候，我們還需要將單個面板中的待輸入?yún)?shù)項(xiàng)和自定義查詢中的查詢條件參數(shù)進(jìn)行映射和綁定，完成查詢條件的傳入工作。

4. 最終的報(bào)表設(shè)計(jì)內(nèi)容解析和呈現(xiàn)

這里有兩種實(shí)現(xiàn)方式，一種是代碼動態(tài)生成然后再自動編譯為獨(dú)立的部署包。另外一種方式就是所有報(bào)表呈現(xiàn)都只有一套動態(tài)代碼來執(zhí)行，即整個頁面是基于配置參數(shù)完全動態(tài)生成的。

第一種方式性能更好，但是配置變更后需要重新部署；第二種方式性能稍差，但是好在能夠完全動態(tài)調(diào)整。

最終的單個完整報(bào)表的呈現(xiàn)可以理解為就是一個url地址，傳入具體的報(bào)表id信息。同時單個報(bào)表的呈現(xiàn)還需要考慮單點(diǎn)集成，并預(yù)留用戶id，組織id，姓名等Session相關(guān)的全局參數(shù)。

在網(wǎng)上搜索下，可以看到有不少專門做監(jiān)控大屏可視化解決方案的，包括一些好的報(bào)表平臺軟件，也專門對監(jiān)控大屏可視化做了優(yōu)化，能夠很好的做到定制和可配置。而對于監(jiān)控大屏實(shí)現(xiàn)，當(dāng)前我們完全可以采用百度Echart來定制實(shí)現(xiàn)，而這篇文章主要想談下如何對監(jiān)控大屏可視化做到靈活可配置。

首先我們看到監(jiān)控大屏可視化，實(shí)際上跟我們前面談到的自定義報(bào)表相當(dāng)類似，其核心仍然是單面板設(shè)計(jì)，多面板組裝?；谶@個思路我們逐一展開進(jìn)行描述。

在講自定義報(bào)表的時候，我們單面板設(shè)計(jì)數(shù)據(jù)集和實(shí)際的數(shù)據(jù)呈現(xiàn)是耦合在一起的，而實(shí)際上更好的思路是數(shù)據(jù)集合和數(shù)據(jù)呈現(xiàn)進(jìn)行分離?；谶@個思路，逐一展開講關(guān)鍵功能點(diǎn)實(shí)現(xiàn)。

1.數(shù)據(jù)集設(shè)計(jì)

數(shù)據(jù)源定義，對于數(shù)據(jù)源定義，最好也進(jìn)行獨(dú)立，一個報(bào)表前端呈現(xiàn)本身也可能涉及到多個數(shù)據(jù)源。數(shù)據(jù)集設(shè)計(jì)，即返回一個二維的數(shù)據(jù)集合，可以有多列。我們需要通過配置的方式來實(shí)現(xiàn)，即首先選擇數(shù)據(jù)源，然后自定義Sql語句，然后返回具體的數(shù)據(jù)集對象。在sql過程中我們可以對字段標(biāo)題名稱等進(jìn)行轉(zhuǎn)義。

更加解耦的方法是數(shù)據(jù)集可以直接選擇具體的WS服務(wù)，由服務(wù)返回一個二維的數(shù)據(jù)集對象。這種方式可以進(jìn)一步實(shí)現(xiàn)報(bào)表平臺和底層數(shù)據(jù)庫的解耦。

2.單面板設(shè)計(jì)

單面板設(shè)計(jì)簡單來說就是將前端的呈現(xiàn)方式，究竟是折線圖，餅圖還是雷達(dá)圖等，和后端的數(shù)據(jù)集進(jìn)行綁定。在這個過程中重點(diǎn)是要確認(rèn)具體的圖表呈現(xiàn)的一些關(guān)鍵配置，包括X，Y軸顯示，圖表名稱，圖例是否顯示等關(guān)鍵配置，都需要在單面板設(shè)計(jì)的是配置完成。

單面板設(shè)計(jì)完成后，最好提供預(yù)覽功能按鈕，可以馬上體驗(yàn)到單面板展示的效果。

3.大屏設(shè)計(jì)

對于大屏設(shè)計(jì)，實(shí)際上里面有幾個關(guān)鍵點(diǎn)，首先就是大屏展示需要有一個CSS模板，這個模板決定了所有的單面板圖表的配色風(fēng)格，包括具體的底色，前端的色系選擇等。選擇模板就是確保最終的大屏展示各個單面板風(fēng)格能夠完全保持一致。

大屏版面設(shè)計(jì)，仍然采用標(biāo)準(zhǔn)的Grid布局模式即可，可以看到所有的大屏展示基本都采用Grid布局模式。每個單面板你唯一要確定的就是橫向跨幾行，縱向跨幾列即可。類似上面的圖，我們采用4*4Grid進(jìn)行布局，中間的地圖展示則是橫向跨3行，縱向跨兩列。

4.大屏整體的展示動態(tài)刷新能力

在以上設(shè)計(jì)完成后，我們整個大屏展示效果也就出來了。在該大屏設(shè)計(jì)中我們沒有考慮動態(tài)查詢功能。但是大屏監(jiān)控仍然需要動態(tài)進(jìn)行刷新。因此在設(shè)計(jì)大屏的時候需要具備動態(tài)刷新能力，為了考慮后續(xù)具備一定的擴(kuò)展性，我們需要能夠?qū)㈥P(guān)鍵的一些變量參數(shù)傳遞到圖表展示中。

最關(guān)鍵的參數(shù)就是當(dāng)前時間，當(dāng)前的時間需要能夠傳遞到每一個數(shù)據(jù)集Sql中，方便我們根據(jù)時間進(jìn)行數(shù)據(jù)過濾。同時對于大屏我們需要配置定時刷新頻率，基于該頻率對展示內(nèi)容進(jìn)行動態(tài)刷新。

END

更多精彩干貨分享

點(diǎn)擊下方名片關(guān)注

IT那活兒