私人珍藏，7年整理了30個實用可視化大屏模板，附源文件+工具

最近新接手了一個大屏項目，從前期的調研需求到原型設計再到模型開發，前前後後折騰了大半個月，這個過程中也踩了不少坑，深感大屏項目開發的不易（領導要求實在是太高），也藉此把我之前收集的可視化大屏模板分享給大家，給大家做個參考，另外也講一下大屏開發易踩的

避坑一：動手前一定要調研好需求

不管是開發大屏還是僅僅做一張小小的報表，前期的需求調研都相當重要，需求搞不清楚貿然下手，一定會做很多無用功！這次我接手的項目是集團總公司的一個銷售業務監控大屏，前期和業務部門溝通需求的過程一些指標的展示沒有說清楚，項目搞到一半，銷售部的負責人過來和我扯皮，最後花了很大精力修改，所以需求調研這一步相當重要。

我們拿到一個可視化大屏的需求時，我們可以通過Why、Who、Where、What等角度將需求明確。

• WHY：首先我們要明確為什麼要設計可視化大屏，是輔助決策還是信息展示，如果是輔助決策我們可能要更多的去展示一下總結判斷性的信息來輔助用戶進行判斷，更看重信息傳達的有效性，如果是展示型大屏則更傾向於視覺表現。
• Who：其次需要明確可視化大屏所針對的用戶群是誰，有可能是高層管理人員、中層幹部、基層業務人員，這裡的用戶群並非單一的，有可能是多種類型用戶的綜合。
• Where：然後我們要明確可視化大屏是要在哪兒在什麼設備上進行演示，這裡一定要明確清楚，因為設備的尺寸、受眾距離大屏的距離都直接影響我們設計的布局、字體等。
• What：明確了前面三個問題之後，我們就可以思考可視化大屏的內容了，這過程非常重要且複雜，需要和業務方充分溝通，確定業務場景，然後根據場景抽取關鍵指標，選擇展現的圖表類型

避坑二：開發工具的選擇

大屏可以選擇開源可視化工具或現成的可視化軟體來實現，開源用的比較多的就是JS+Echarts，不得不說E charts的圖表很豐富，而且交互效果很好，用來做定製開發是不錯的選擇。

但是這種開發方式對開發人員的技術水平很高，維護成本也很大，需求一變動就要改代碼，如果涉及的數據量大，動態效果多的話，性能會大打折扣。而且最終的模板投放到led屏幕上，調試起來也相當麻煩，如果沒有足夠的技術水平和人力，不要輕易嘗試。

除了開源工具之外，另一個選擇就是可視化開發軟體，這次我們用的是國內帆軟的FineReport，大部分都知道它可以用來開發報表，沒想到它在大屏開發上功能也很強大，產品採用的是低代碼的設計理念，很多開源報表的功能都封裝好了，不用再寫代碼直接用，拖拖拽拽就能完成模板製作，後續的維護也很簡單。

除此之外，它本身自帶的圖表效果也很驚豔，有很多3D的特效組件和圖表，這對大屏來說就是點睛之筆，我們這次大屏就用到了一個3D場景地圖組件，給大家看下效果：

不過這裡也要提一嘴，動態效果的使用要慎重，不宜過多，1-2兩個動態效果能起到畫龍點睛的效果，但是過多使用動態效果極其容易喧賓奪主，讓觀看者的眼球不知道往哪裡聚焦，反而喪失了業務展現價值。這個度很難把握，既要平衡酷炫效果，又要突出內容。（有些領導可能就喜歡花裡胡哨的）

FineReport的大屏開發教程可以看這篇：不寫代碼，從0到1教你製作炫酷可視化大屏

demo分享

最後把之前整理的大屏的demo分享給大家，一些是js+E charts開發的，還有一些是FineReport開發的，源碼和demo用到的圖片素材都分享給大家，你們直接填充數據就可以用了：

js+E charts：

FineReport：

ps：FineReport製作的模板，源文件已內置在工具中，除了大屏模板，還有海量報表模板，可直可接套用。

轉發收藏本文，私信我「1」獲取大屏模板源文件和工具