最近新接手了一个大屏项目，从前期的调研需求到原型设计再到模型开发，前前后后折腾了大半个月，这个过程中也踩了不少坑，深感大屏项目开发的不易(领导要求实在是太高)，也借此把我之前收集的可视化大屏模板分享给大家，给大家做个参考，另外也讲一下大屏开发易踩的坑

避坑一：动手前一定要调研好需求

不管是开发大屏还是仅仅做一张小小的报表，前期的需求调研都相当重要，需求搞不清楚贸然下手，一定会做很多无用功！这次我接手的项目是集团总公司的一个销售业务监控大屏，前期和业务部门沟通需求的过程一些指标的展示没有说清楚，项目搞到一半，销售部的负责人过来和我扯皮，最后花了很大精力修改，所以需求调研这一步相当重要。

我们拿到一个可视化大屏的需求时，我们可以通过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制作的模板，源文件已内置在工具中，除了大屏模板，还有海量报表模板，可直可接套用。