隨著企業數字化建設的發展，領導對資料價值的利用意識越來越高，資料分析和展現需求日益增長。對於管理層來說，視覺化大屏和駕駛艙專案尤其受歡迎，這兩年我遇到的BI專案有半數會有開發管理駕駛艙、大屏的需求。

一方面大屏專案能夠全面的展示經營資料，將管理策略具象化，另一方面透過科技感的資料展現也能提升企業形象。最近剛參與一個金融行管理駕駛艙的開發，在專案中也探索了一些新的心得與經驗分享給大家。

視覺化大屏開發流程

大屏專案的開發流程大概如上圖，其中重中之重就是前期的需求調研，調研業務需求，討論選取指標，有硬體展示需求的，要對硬體裝置需求進行調研及選型。

今天我主要教大家如何快速開發一張大屏demo，話不多說，進入正題

大屏demo製作

在完成指標的選取後，我們要針對指標分析的維度，選擇合適的視覺化圖表來展示資料資訊，確定圖表型別後，排版佈局，確定我們的原型圖。

圖表選擇可以參考下圖：

大屏展示的資料指標多，往往需要藉助豐富的圖表才能實現 多樣化和美觀，我們選擇圖表時儘量不要過於單一，想辦法多樣化，比如比率可以使用餅圖，餅圖又可以透過多層巢狀實現多層餅圖，還可以使用水球、刻度槽型百分比、以及展示比率的比率，再加上邊框的點綴就可以實現既又實用的效果了。

另外一些3D或者動畫效果的使用，會起到畫龍點睛的效果，讓整張大屏科技感十足，有人會覺得加動態效果肯定又要多寫幾百行程式碼了，但其實根本不用！（方法下面講）

常規的大屏模板開發一般選擇直接讀取資料庫，透過js+圖表庫進行繪製，常見比如Echarts、Highchart等等，最終實現前端顯示效果。

但是在BI專案中，我一般會選擇效率更高的報表軟體去開發，成熟的報表軟體支援的圖表型別多，而且有很多配置好的視覺化元件可以直接拿來用，雖然部分個性化的需求難滿足，但是絕大部分的常規需求都能滿足，而且開發效率是原始的js+圖表庫的好幾倍，後期維護也更省事。

下面以我熟悉的FineReport為例，教大家如何快速開發一張視覺化大屏

下載安裝後，開啟設計器，我們要用到的是決策報表開發功能，介面如下：

開啟設計器，在伺服器>定義資料連線中定義需要連線的資料庫，即可建立需要的資料連線，並自定義查詢語句建立資料集，從而製作報表。

FineReport 支援多種資料來源連線方式，支援透過 JDBC 的方式直接連線資料庫，或者以 JNDI 的方式與應用伺服器共享資料連線，或者以 XMLA 資料連線的方式來與多維資料庫進行連線，還支援透過 JCO 連線 SAP 系統。

新建一張決策報表模板，新建資料集，用sql語句建立大屏所要用到資料集，作為圖表元件的資料來源，為了使模板能夠適應不同解析度的螢幕，我們要給模板設定一下自適應屬性

下一步，常規操作就是將圖表元件拖拽到畫布上，調整佈局，在右側圖表屬性中設定好圖表資料連線和圖表顏色、背景、邊框等自定義設定

除了基礎的柱形圖、折線圖、雷達圖等基礎圖表之外，FineReport還提供了視覺效果非常棒的擴充套件圖表，利用3D和動畫效果，讓圖表元件更加簡潔、炫酷，安裝擴充套件圖表外掛後，直接拖拽到畫布上就能用，不需要寫程式碼：

比如這樣的動態輪播儀表板：

還有這樣的三維地球：

3D場景地圖：

基礎佈局完成之後，調整圖表的整體配色，加一些細節點綴。利用圖表預定義顏色功能，可以快速將大屏配色統一：自定義一個配色方案，命名為demo1，選擇預設配色方案為demo1。

除了配色以外，還可以給圖表新增一些標題框，動態背景等等，也可以利用js實現一些動態輪播，或者動態效果，在產品的幫助文件裡有各種功能的詳細程式碼，大家直接對著抄就行

如果你覺得這樣的開發方式還不夠簡單，在圖表選擇和細節配置上沒有把握，FineReport還有一個王炸級的功能，叫 元件複用功能，我最近剛發現。

安裝元件複用外掛（外掛免費）後，在設計器右側元件欄，會有很多已經配置好功能、樣式、場景的圖表塊和報表塊，裡面有200個元件供使用者使用，只要拖拽元件塊到畫布上，然後替換業務資料就可以：

指標卡類元件：

常用圖表元件：

標題元件：

用上元件複用的功能，大屏開發就變成了簡單的排版工作，不用找視覺設計師，自己拖拖拽拽就能做出非常專業級視覺效果的視覺化大屏。

而且除了能夠直接複用這些配置好的元件之外，你也可以自主建立元件，並且分享元件檔案給團隊其他人，或者直接從別人的模板裡建立元件，複用到自己的模板，提高開發的效率：

給大家展示一個我純用元件複用裡提供的元件塊製作的一張大屏demo:

最後，老規矩，工具已經案例完了，再給大家送上寶貴的大屏模板，直接替換資料就能用：

1、銀行服務監管大屏：

2、集團綜合管理駕駛艙：

3、機場航班資料大屏：

4、金融業投資管理營收大屏