今天談下自定義報表和可視化監控大屏設計方面的內容，準備分三個部分來講，第一是先看下當前主流的商用報表工具的功能特點，其次分別談下報表設計和可視化監控大屏設計。

圖片來源網絡

最近在網上搜索自定義報表，監控大屏制作，搜索到了FineReport報表制作工具。

FineReport報表軟件是一款純功能于一身的企業級web報表工具，它“專業、簡捷、靈活”的特點和無碼理念，僅需簡單的拖拽操作便可以設計復雜的中國式報表，搭建數據決策分析系統。

這款報表制作工具還是相對的火，你能夠想到的常見報表自定義，報表的多維度分析，統計匯總，上鉆和下鉆，圖形可視化等基本都能夠實現。可以對接各種關系型數據庫作為數據源，同時也支持你手工填報數據上來進行采集后匯總，然后報表呈現。關鍵是該報表很多能力基于Excel來完成，只有你有基礎的Excel使用技能，并不需要太多的編碼能力就能夠完成報表的開發和制造。

而對于監控大屏制作，是今年來報表的一個擴展關鍵能力，FinedReport剛好提供了該能力。

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

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

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

拿監控大屏來說，你要達到上面的能力，首先你就需要有大量的監控到設計和開發實踐，或者至少觀察了大量的監控屏實現例子。其次你需要具備足夠的抽象化能力，找尋共性，并完成從特殊到一般的過程。從FineReport體現的監大屏制作能力，該思路也完全適用于我們日常的產品化規劃和設計工作。

所謂的軟件產品化，也就是是一個從大量個性化業務場景中進行共性能力抽取，個性能力參數化的過程而已。

再回來看監控大屏實現，你會發現進行抽象和模板化后整個實現過程本身很簡單。

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

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

3. 選擇每個Panel里面的數據呈現方式(文字，數字，表格，各種圖形，地圖，關系等）

4. 為每個Panel的數據呈現配置相應的數據源

5. 實現一些最后的點綴，動態實時效果等。

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

最后對于FineReport報表本身的簡單易用性，強大的功能，網上有些總結，而這些總結本身體現的就是長期在一個專業方向或領域的持續不斷的積累，對簡單易用產品哲學的堅持，對用戶使用場景的深刻洞察，對各種產品細節的不斷優化，而所有上面的這些都缺一不可。

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

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

FineReport網址：
http://www.fanruan.com/finemax/

對于自定義報表，在前面講的商用報表平臺或工具來實現大屏展示，而實際上一談到報表大家談的比較多的還是BI分析應用中常用的各種報表類工具，類似水晶報表，國內的FineReport等。一個商用的報表平臺或工具可以看到功能會很強大，但是總結來說還是數據采集，設計，呈現幾個部分內容。

1. 數據采集：從結構化數據庫，各類文件數據源，也包括直接提供手工填報端的自動生成。

2. 報表設計器：提供獨立的報表設計器能力，支持類似分組，切片，鉆取等各類復雜場景，支持各類圖表。

3. 報表展示：報表展示支持各類圖表的展示，支持自定義參數查詢，支持類似監控大屏等。

在這里不打算詳細討論商用自定義報表能力。對于我們大部分業務系統來說，需要的報表能力往往并不需要類似BI系統報表這么強大，更多的可以理解為自定義查詢能力 可定制的圖表展現。那么我們在實現自定義報表的時候就應該從這兩個方面來考慮一個報表如何實現。

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

整體展示效果類似如下：

下面來拆分下幾個關鍵的功能。

1. 數據源的定義

數據源定義關鍵就是通過數據源形成可在報表界面上展示的數據集。因此該功能建議不僅僅是簡單定義數據源，同時包括數據集或數據對象的定義。因為數據集本身也是可復用的，不需要重復設計。

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

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

2. 單數據面板的定義

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

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

3. 整體查詢報表頁面的設計和定義

對整體查詢報表的設計實際上可以看到，主要工作就是定義自定義查詢面板，定義和選擇需要在該報表中展示的單數據面板。確定查詢結果面板的具體布局形式。

對于面板布局采用最簡單的Grid布局形式即可，在定義清楚一個標準的Grid布局后，我們就很容易來配置單個面板究竟占有幾列幾行。同時在單個面板設計的時候，我們還需要將單個面板中的待輸入參數項和自定義查詢中的查詢條件參數進行映射和綁定，完成查詢條件的傳入工作。

4. 最終的報表設計內容解析和呈現

這里有兩種實現方式，一種是代碼動態生成然后再自動編譯為獨立的部署包。另外一種方式就是所有報表呈現都只有一套動態代碼來執行，即整個頁面是基于配置參數完全動態生成的。

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

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

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

首先我們看到監控大屏可視化，實際上跟我們前面談到的自定義報表相當類似，其核心仍然是單面板設計，多面板組裝。基于這個思路我們逐一展開進行描述。

在講自定義報表的時候，我們單面板設計數據集和實際的數據呈現是耦合在一起的，而實際上更好的思路是數據集合和數據呈現進行分離。基于這個思路，逐一展開講關鍵功能點實現。

1.數據集設計

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

更加解耦的方法是數據集可以直接選擇具體的WS服務，由服務返回一個二維的數據集對象。這種方式可以進一步實現報表平臺和底層數據庫的解耦。

2.單面板設計

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

單面板設計完成后，最好提供預覽功能按鈕，可以馬上體驗到單面板展示的效果。

3.大屏設計

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

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

4.大屏整體的展示動態刷新能力

在以上設計完成后，我們整個大屏展示效果也就出來了。在該大屏設計中我們沒有考慮動態查詢功能。但是大屏監控仍然需要動態進行刷新。因此在設計大屏的時候需要具備動態刷新能力，為了考慮后續具備一定的擴展性，我們需要能夠將關鍵的一些變量參數傳遞到圖表展示中。

最關鍵的參數就是當前時間，當前的時間需要能夠傳遞到每一個數據集Sql中，方便我們根據時間進行數據過濾。同時對于大屏我們需要配置定時刷新頻率，基于該頻率對展示內容進行動態刷新。

END

更多精彩干貨分享

點擊下方名片關注

IT那活兒