報(bào)表自動(dòng)化: 如何選擇可視化大屏開發(fā)利器?www.coologic.cn

我們在前文完成了各種數(shù)據(jù)的準(zhǔn)備：原始數(shù)據(jù)、指標(biāo)數(shù)據(jù)、報(bào)表表格等等，但仍然無法解決“閱者”難以理解龐大數(shù)據(jù)。我們需要用圖文并茂的形式來提高信息的可理解性、易理解性，并以固定的排布方式使“閱者”逐漸構(gòu)成數(shù)據(jù)-狀態(tài)、數(shù)據(jù)-決策的“反射弧”。

工具選擇

常規(guī)的數(shù)據(jù)可視化方式我們可以選擇直接讀取數(shù)據(jù)庫，通過繪圖軟件/庫進(jìn)行繪制，最終構(gòu)成自建的前端顯示效果，比如使用 Apache ECharts (incubating) 等工具。

除此以外，追求效率的我們還可以選擇成熟的報(bào)表套件，這類套件往往具有一系列的圖表模板+支持推拽且可視化的配置頁面，方便我們快速的構(gòu)建出可視化大屏。其實(shí)大部分套件的機(jī)理差異并不大，為了降低文章內(nèi)容量，本文直接講解某一種套件，

當(dāng)然報(bào)表套件又分為三類：

• 桌面應(yīng)用產(chǎn)品，生成的是桌面端程序，程序往往直接連接云端數(shù)據(jù)庫，需要數(shù)據(jù)庫開放公網(wǎng) ip。也有部分會(huì)有服務(wù)端提供 crud api 來降低數(shù)據(jù)泄露風(fēng)險(xiǎn)
• web 端直連數(shù)據(jù)庫 / 自建后端產(chǎn)品，這種產(chǎn)品較少，畢竟已經(jīng)做到 web 了再配個(gè)服務(wù)器豈不是更好，否則還是要數(shù)據(jù)庫開放 ip
• B-S 產(chǎn)品，服務(wù)端提供與多源數(shù)據(jù)庫的連接、數(shù)據(jù)提取、前端頁面生成，前端負(fù)責(zé)顯示、用戶交互與動(dòng)態(tài)刷新等等

本文選擇第三類的一款套件作為講解 -- 帆軟的 FineReport，選擇此產(chǎn)品原因：1、中文文檔、中文配置界面，對于國內(nèi)讀者友好度高；2、無意間看到此產(chǎn)品

請勿將本文內(nèi)容當(dāng)做推薦 or 引戰(zhàn)，我盡量從可視化報(bào)表工具的角度出發(fā)描述，而不是針對某個(gè)具體的產(chǎn)品，只是為了形象且可查證會(huì)給出 FR 在下面各方面的實(shí)踐方式 / 方案，不作任何額外評價(jià)

既然是個(gè)套件應(yīng)該有很多完整成熟的功能，我們以這幾個(gè)維度來聊聊：

• 環(huán)境與基礎(chǔ)設(shè)施：設(shè)計(jì)環(huán)境搭建，生產(chǎn)環(huán)境搭建，故障傳遞與追溯，數(shù)據(jù)安全，協(xié)作開發(fā)，功能擴(kuò)展性
• 視覺效果與用戶交互：布局，配色，交互，可復(fù)用組件，組件自定義

設(shè)計(jì)環(huán)境搭建

首先說說環(huán)境的類型：

• 傳統(tǒng)的桌面應(yīng)用的設(shè)計(jì)器，前者往往直接安裝打開使用即可，對于 B-S 類的產(chǎn)品，往往設(shè)計(jì)器安裝包會(huì)自帶一個(gè)服務(wù)在啟動(dòng)后自動(dòng)運(yùn)行可用于調(diào)試的服務(wù)環(huán)境
• 基于 Web 的設(shè)計(jì)器，這種設(shè)計(jì)器有些是支持同時(shí)設(shè)計(jì)與提供展示服務(wù)的，即一次搭建后根據(jù)登錄賬號的 role 進(jìn)入不同的環(huán)境，有些是完全分離的兩套環(huán)境。

FineReport 屬于前者，對于不同系統(tǒng)均由輕松安裝的安裝包，不需要復(fù)雜配置。

生產(chǎn)環(huán)境搭建

對于 B-S 產(chǎn)品，和搭建后端類似，只是不需要復(fù)雜的配置了，直接根據(jù)教程安裝一下就即可啟動(dòng)服務(wù)（一般來說是這樣的）

對于后續(xù)要說的功能擴(kuò)展性，可能會(huì)影響此步驟，如果產(chǎn)品具有功能擴(kuò)展性，那么額外擴(kuò)展的功能需要單獨(dú)部署在服務(wù)上并配置相關(guān)連接，如果是基于插件化的擴(kuò)展需要在服務(wù)端安裝對應(yīng)插件。

此部分建議構(gòu)建完整的環(huán)境搭建文檔，如果產(chǎn)品可以通過腳本安裝，建議直接將部署過程腳本化。

FineReport 環(huán)境安裝也是安裝包直接搞定，其具有插件平臺(tái)，若有補(bǔ)充插件需要通過 web 登錄后添加對應(yīng)插件

故障傳遞與追溯

往往數(shù)據(jù)可視化以后就逐漸地產(chǎn)生了可視化大屏，單頁面信息含量極其豐富、跨越的業(yè)務(wù)部門繁多、數(shù)據(jù)分析維度全面，我們需要保證單一故障不會(huì)大面積的波及其他信息。

• 設(shè)計(jì)器出現(xiàn)故障是否會(huì)影響服務(wù)端？尤其是通過 role 區(qū)分環(huán)境的 web 設(shè)計(jì)器。
• 個(gè)別數(shù)據(jù)庫通訊問題是否會(huì)影響整個(gè)產(chǎn)品服務(wù)的運(yùn)行？
• 個(gè)別指標(biāo)的計(jì)算錯(cuò)誤是否會(huì)導(dǎo)致同頁面其他指標(biāo)均無法顯示？
• 個(gè)別指標(biāo)計(jì)算緩慢是否影響同頁面其他指標(biāo)均無法刷新？

對于故障還有額外要做的是實(shí)時(shí)處理方式：

• 關(guān)鍵指標(biāo)計(jì)算錯(cuò)誤是否也要報(bào)警？因?yàn)榭梢暬笃吝\(yùn)行狀態(tài)也許也是一個(gè)指標(biāo)呢
• 指標(biāo)計(jì)算錯(cuò)誤時(shí)顯示 0 還是現(xiàn)實(shí)錯(cuò)誤信息？尤其注意在指標(biāo)具有其獨(dú)特的存在性意義時(shí)，不建議隨意的用同類型數(shù)據(jù)作為展示，避免錯(cuò)誤統(tǒng)計(jì)

雖然我們保證了故障波及的可控性，但我們還希望能夠追溯到問題產(chǎn)生的原因，這就需要確定相關(guān)產(chǎn)品是否有足夠的日志，尤其是需要在于數(shù)據(jù)庫交互式的執(zhí)行語句與執(zhí)行響應(yīng)。

繼續(xù)說 FR 的情況：
報(bào)表單一指標(biāo)計(jì)算錯(cuò)誤不會(huì)影響其他指標(biāo)顯示。
單一指標(biāo)計(jì)算速度慢不會(huì)影響整體打開速度，會(huì)逐步更新算的指標(biāo)值，但初始打開時(shí)計(jì)算過程中未算得結(jié)果的在頁面布局上有一定概率不正確，此問題會(huì)逐步計(jì)算后動(dòng)態(tài)的調(diào)整布局，最終效果正確。
設(shè)計(jì)調(diào)試階段有完整執(zhí)行日志，可查詢執(zhí)行的 sql 指令追溯計(jì)算錯(cuò)誤問題，但對于復(fù)雜多層嵌套/頁面聯(lián)動(dòng)等行為追溯相對復(fù)雜可考慮開發(fā)日志處理工具
生產(chǎn)環(huán)境（服務(wù)器版）部署后的日志并未調(diào)研

數(shù)據(jù)安全

理想狀態(tài)我們的數(shù)據(jù)庫不應(yīng)該使用公網(wǎng) IP，這方面針對前面提到的三種類型：

• 桌面應(yīng)用程序：此類程序往往也支持不直接連接數(shù)據(jù)庫，可以通過自建的后端或套件的后端來獲取數(shù)據(jù)。
• web 直連產(chǎn)品：此類產(chǎn)品只提供了基于 Web 的 UI 快速搭建，類似于后臺(tái)框架等等，具體的數(shù)據(jù)讀取方式可以選擇 API or 直連數(shù)據(jù)庫，需要自行維護(hù)數(shù)據(jù)安全
• B-S 產(chǎn)品：此類型產(chǎn)品完整的提供了前后端，后端負(fù)責(zé)和多源數(shù)據(jù)庫的連接，前端只負(fù)責(zé)接受數(shù)據(jù)、傳遞指令，相對可以更好地保護(hù)數(shù)據(jù)庫安全，只需要將服務(wù)端與數(shù)據(jù)庫放到同一云供應(yīng)商，避免開啟公網(wǎng) IP 即可。但同樣的風(fēng)險(xiǎn)轉(zhuǎn)嫁到了此類型產(chǎn)品的后端，無論是后端服務(wù)還是此產(chǎn)品提供的基于 Web 的后臺(tái)。

FR 作為 B - S 產(chǎn)品，有完整的服務(wù)端，前后端交互在數(shù)據(jù)方面一般以 POST 請求。
簡單查看：請求參數(shù)是控件 id、控件內(nèi)容、行為等，不會(huì)涉及到要執(zhí)行的 sql。返回結(jié)果為控件信息及控件內(nèi)數(shù)據(jù)。不確定是否有遺漏的情況。再加上使用 SSL 可進(jìn)一步提高安全性
另外注意，其具有插件平臺(tái)，部分插件由第三方開發(fā)，不確定各種外帶的插件是否能保證數(shù)據(jù)庫結(jié)構(gòu)的零泄露。

協(xié)作開發(fā)

報(bào)表并不是一件簡單的事情，無論是經(jīng)過數(shù)倉的手段還是數(shù)據(jù)中臺(tái)的手段，從業(yè)務(wù)角度來看，我們都是先打破了部門壁壘，然后讓各部門數(shù)據(jù)相互碰撞，挖掘出更多的剩余價(jià)值，這就導(dǎo)致了我們報(bào)表業(yè)務(wù)的復(fù)雜性以及開發(fā)的工作量，我們不得不進(jìn)行協(xié)作開發(fā)，尤其是可視化大屏。

一個(gè)可視化大屏可能有幾十個(gè)模塊，每個(gè)模塊有三五個(gè)甚至更多一些的分析指標(biāo)，一個(gè)頁面上輕松可以出現(xiàn)過百的指標(biāo)，因此能夠讓開發(fā)過程可協(xié)作是極其重要的環(huán)節(jié)。

首先對于協(xié)作我們需要考慮下面幾個(gè)問題：

• 協(xié)作過程數(shù)據(jù)庫如何連接：由于數(shù)據(jù)庫在云上，為了安全也不會(huì)開放對外接口，此時(shí)推薦三種方式：1、使用 QA 環(huán)境，如果 QA 環(huán)境已經(jīng)積攢了足夠多的虛假數(shù)據(jù)且對數(shù)據(jù)結(jié)構(gòu)安全性并不敏感，可考慮此方案，但不太推薦。2、使用 VPN，讓我們能夠在本地經(jīng)過 VPN 連上數(shù)據(jù)庫。3、使用云服務(wù)器，通過云上開發(fā)來實(shí)現(xiàn)在內(nèi)網(wǎng)訪問數(shù)據(jù)庫。
• 單一頁面分工開發(fā)方法：一個(gè)頁面過百指標(biāo)數(shù)量，根據(jù)業(yè)務(wù)內(nèi)容進(jìn)行一定分組安排任務(wù)，但同時(shí)要考慮如何此工具的記錄文件是否能夠自動(dòng) merge，如果不能自動(dòng) merge 如何進(jìn)行人工 merge，merge 時(shí)能否正常的保留邏輯以及布局等信息……
• 重復(fù)性樣式是否可方便復(fù)用：當(dāng)樣式重復(fù)只是邏輯和標(biāo)題/標(biāo)簽差異時(shí)，是否能復(fù)用，是否有模板的概念，復(fù)用后是否能保證只是邏輯改變其他具有完全一致性以保證風(fēng)格統(tǒng)一
• ……

FR 支持通過更改工作目錄為遠(yuǎn)端的工作目錄的方式，直接開始協(xié)作開發(fā)，此方式只是將設(shè)計(jì)文件的存儲(chǔ)位置放到了遠(yuǎn)端，真正操作執(zhí)行等還是在本地，類似于一個(gè)設(shè)計(jì)文件版本管理器，但無法解決數(shù)據(jù)庫無公網(wǎng) IP 問題，會(huì)導(dǎo)致本地?zé)o法查閱效果，且開發(fā)過程中有關(guān)數(shù)據(jù)操作的配置頻繁報(bào)錯(cuò)（無法連接獲取信息）
復(fù)用相關(guān)請見下

功能擴(kuò)展性

產(chǎn)品是否提供了模塊化 or 插件化平臺(tái)，以通過公開流程關(guān)鍵節(jié)點(diǎn)的接口或其他方式來支持第三方插件、自定義組件的接入，來實(shí)現(xiàn)“無限可能”的未來。

插件包括但不限于：

• 更多地圖表模板
• 用戶交互過程更多的動(dòng)畫效果
• 花式提示框
• 設(shè)計(jì)階段布局工具
• 運(yùn)行階段日志處理工具
• 整體的配色方案（皮膚? 主題?）
• 自定義計(jì)算模板/公式、領(lǐng)域?qū)I(yè)公式集
• 鑒權(quán)認(rèn)證插件
• 數(shù)據(jù)庫驅(qū)動(dòng)
• ……

FR 有插件平臺(tái)，包含多種分類分組，有官方插件及第三方插件，且有插件開發(fā) API 文檔

布局與配色

• 是否有整體的配色方案？便于在不追求高度定制的情況下快速成型，比如夜間模式……
• 設(shè)計(jì)階段是否能進(jìn)行規(guī)范的布局：水平、垂直、柵格、流、填表專用（label+editbox）……
• 圖層、透明度、可見性、盒模型
• 特效方面是否可控制事件流
• 響應(yīng)式布局
• ……

沒有過多的研究，初步感覺有一套自帶的默認(rèn)配色
布局上可以選擇絕對布局（一切靠手拖拽），或者選擇自適應(yīng)布局，其可以配置雙向單項(xiàng)（水平、垂直、柵格）同時(shí)可配置內(nèi)邊距與組件間邊距，但沒有發(fā)現(xiàn)明顯的瀑布流布局。
布局需要有層次傳遞性，對多層復(fù)雜布局的傳遞效果與可控性未做研究

交互

• 圖自動(dòng)刷新
• 圖表聯(lián)動(dòng)
• 參數(shù)配置聯(lián)動(dòng)
• 動(dòng)畫效果
• 提示窗口

可復(fù)用組件

可復(fù)用性也直接或間接地影響到了協(xié)作開發(fā)的效率、最終展示效果一致性等多方面。

FR 提供了網(wǎng)頁插件，可通過插入網(wǎng)頁控件來引用其他的組件，以嵌套的方式組合多種顯示塊，但初步測試感覺此功能破壞了布局逐層傳遞性
還提供了模板插件，通過將選中的多個(gè)組件打包成一個(gè)模板，同時(shí)打包了組件間布局關(guān)系、數(shù)據(jù)操作邏輯，實(shí)現(xiàn)了邏輯、關(guān)系與控件的整體遷移復(fù)用，但其只能記憶布局關(guān)系，無法記憶布局最終尺寸，在多次復(fù)用后需要調(diào)整整體的尺寸問題。

組件自定義

此類型工具是通過將多種常用功能進(jìn)行持久化的方式提高開發(fā)效率，但難免遇到特殊的需要，這時(shí)候就需要高度的自由行，比如提供插件平臺(tái)、組件設(shè)計(jì)方式、API 接口、可編程……

FR 提供了對 JS 的支持，可以在很多空間里在點(diǎn)擊等操作時(shí)觸發(fā)對應(yīng)的 JS 腳本。。。后面就看自己的了
同時(shí)有插件平臺(tái)，可將重復(fù)使用的功能通過插件的方式持久化
同時(shí)有模板插件，可將重復(fù)的組件/組件集進(jìn)行持久化

感謝閱讀，歡迎關(guān)注微信公眾號：coologic

報(bào)表相關(guān)的系列文章請參考：

• 報(bào)表自動(dòng)化: 商業(yè)智能背后的秘密
• 報(bào)表自動(dòng)化: 打開數(shù)據(jù)倉庫的大門
• 報(bào)表自動(dòng)化: 沒有壓力的維度建模
• 報(bào)表自動(dòng)化: 抓住時(shí)間流逝的瞬間
• 報(bào)表自動(dòng)化: 薅出數(shù)字背后的價(jià)值
• 報(bào)表自動(dòng)化: 事實(shí)、維度與指標(biāo)的三方會(huì)談
• 報(bào)表自動(dòng)化: 數(shù)據(jù)倉庫建模實(shí)踐經(jīng)驗(yàn)干貨
• 報(bào)表自動(dòng)化: 神奇的粘合劑 ETL 工具

總結(jié)

以上是生活随笔為你收集整理的润乾报表列太多导致渲染速度慢_报表自动化: 如何选择可视化大屏开发利器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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