本文是個人原創，未經允許，禁止轉載！
隨著企業數位化建設的發展，領導對數據價值的利用意識越來越高，數據分析和展現需求日益增長。對於管理層來說，可視化大屏和駕駛艙項目尤其受歡迎，這兩年我遇到的BI項目有半數會有開發管理駕駛艙、大屏的需求。
一方面大屏項目能夠全面的展示經營數據，將管理策略具象化，另一方面通過科技感的數據展現也能提升企業形象。最近剛參與一個金融行管理駕駛艙的開發，在項目中也探索了一些新的心得與經驗分享給大家
大屏項目的開發流程大概如上圖，其中重中之重就是前期的需求調研，調研業務需求，討論選取指標，有硬體展示需求的，要對硬體設備需求進行調研及選型
今天我主要教大家如何快速開發一張大屏demo，話不多說，進入正題
在完成指標的選取後，我們要針對指標分析的維度，選擇合適的可視化圖表來展示數據信息，確定圖表類型後，排版布局，確定我們的原型圖。
圖表選擇可以參考下圖：
大屏展示的數據指標多，往往需要藉助豐富的圖表才能實現多樣化和美觀，我們選擇圖表時儘量不要過於單一，想辦法多樣化，比如比率可以使用餅圖，餅圖又可以通過多層嵌套實現多層餅圖，還可以使用水球、刻度槽型百分比、以及展示比率的比率，再加上邊框的點綴就可以實現既又實用的效果了。
另外一些3D或者動畫效果的使用，會起到畫龍點睛的效果，讓整張大屏科技感十足，有人會覺得加動態效果肯定又要多寫幾百行代碼了，但其實根本不用！（方法下面講）
常規的大屏模板開發一般選擇直接讀取資料庫，通過js+圖表庫進行繪製，常見比如Echarts、Highchart等等，最終實現前端顯示效果。
但是在BI項目中，我一般會選擇效率更高的報表軟體去開發，成熟的報表軟體支持的圖表類型多，而且有很多配置好的可視化組件可以直接拿來用，雖然部分個性化的需求難滿足，但是絕大部分的常規需求都能滿足，而且開發效率是原始的js+圖表庫的好幾倍，後期維護也更省事。
下面以我熟悉的FineReport為例，教大家如何快速開發一張可視化大屏
FineReport報表 - 專業的企業級Web報表工具www.finereport.com下載安裝後，打開設計器，我們要用到的是決策報表開發功能，界面如下：
打開設計器，在伺服器>定義數據連接中定義需要連接的資料庫，即可建立需要的數據連接，並自定義查詢語句創建數據集，從而製作報表。
FineReport 支持多種數據源連接方式，支持通過 JDBC 的方式直接連接資料庫，或者以 JNDI 的方式與應用伺服器共享數據連接，或者以 XMLA 數據連接的方式來與多維資料庫進行連接，還支持通過 JCO 連接 SAP 系統。
新建一張決策報表模板，新建數據集，用sql語句創建大屏所要用到數據集，作為圖表組件的數據來源，為了使模板能夠適應不同解析度的屏幕，我們要給模板設置一下自適應屬性
下一步，常規操作就是將圖表組件拖拽到畫布上，調整布局，在右側圖表屬性中設置好圖表數據連接和圖表顏色、背景、邊框等自定義設置
圖表屬性設置
除了基礎的柱形圖、折線圖、雷達圖等基礎圖表之外，FineReport還提供了視覺效果非常棒的擴展圖表，利用3D和動畫效果，讓圖表組件更加簡潔、炫酷，安裝擴展圖表插件後，直接拖拽到畫布上就能用，不需要寫代碼：
比如這樣的動態輪播儀錶板：
還有這樣的三維地球：
3D場景地圖：
基礎布局完成之後，調整圖表的整體配色，加一些細節點綴。利用圖表預定義顏色功能，可以快速將大屏配色統一：自定義一個配色方案，命名為demo1，選擇默認配色方案為demo1。
推薦一個配色網站：http://colorschemedesigner.com/csd-3.5/ ，對於不太會色彩搭配色的同學很友好。
除了配色以外，還可以給圖表添加一些標題框，動態背景等等，也可以利用js實現一些動態輪播，或者動態效果，在產品的幫助文檔裡有各種功能的詳細代碼，大家直接對著抄就行
如果你覺得這樣的開發方式還不夠簡單，在圖表選擇和細節配置上沒有把握，FineReport還有一個王炸級的功能，叫組件復用功能，我最近剛發現。
安裝組件復用插件（插件免費）後，在設計器右側組件欄，會有很多已經配置好功能、樣式、場景的圖表塊和報表塊，裡面有200個組件供用戶使用，只要拖拽組件塊到畫布上，然後替換業務數據就可以：
指標卡類組件：
指標卡類組件
常用圖表組件：
標題組件：
用上組件復用的功能，大屏開發就變成了簡單的排版工作，不用找視覺設計師，自己拖拖拽拽就能做出非常專業級視覺效果的可視化大屏。
而且除了能夠直接復用這些配置好的組件之外，你也可以自主創建組件，並且分享組件文件給團隊其他人，或者直接從別人的模板裡創建組件，復用到自己的模板，提高開發的效率：
給大家展示一個我純用組件復用裡提供的組件塊製作的一張大屏demo:
最後，老規矩，工具已經案例完了，再給大家送上寶貴的大屏模板，直接替換數據就能用：
1、銀行服務監管大屏：
2、集團綜合管理駕駛艙：
3、機場航班數據大屏：
4、金融業投資管理營收大屏