最近接手了一个新的大屏项目，从之前的研究需求到原型设计再到模型开发，前前后后花了半个多月。在这个过程中，我也踩过很多坑。深感大屏项目开发不易(领导要求真的太高了)。我也想和大家分享一下我之前收集的可视化大屏模板，供大家参考，也说说大屏开发容易踩的坑。 　　

　　#避坑1:开工前一定要调查需求。 　　

　　无论是开发大屏还是只是做个小报告，前期的需求调研都是非常重要的。如果你不知道需求，你会做很多无用的工作！我这次接手的项目是集团总公司的一个销售业务监控屏。在早期，与业务部门沟通需求的过程并不清晰。项目进行到一半，销售部负责人过来跟我争论，最后花了很大力气修改，所以需求调研这一步很重要。 　　

　　当我们得到一个大的可视屏幕的需求时，我们可以从为什么、谁、在哪里、什么等角度来阐明这个需求。 　　

　　*WHY：:首先，我们需要明确为什么要设计一个大的可视屏幕，无论是辅助决策还是信息展示。如果是辅助决策，我们可能需要展示更多的总结和判断信息来辅助用户判断，更加注重信息传递的有效性。如果是大显示屏，更倾向于视觉表现。 　　

　　*Who：其次需要明确大视屏针对的用户群体是谁，可能是高层管理人员、中层干部、基层业务人员。这里的用户组不是单一的，可以是各种类型用户的组合。 　　

　　*Where：然后，我们需要弄清楚在哪里以及在什么设备上展示大的可视屏幕。这里一定要明确，因为设备的大小和观众到大屏幕的距离直接影响我们设计的布局和字体。 　　

　　*在What：明确了前三个问题之后，我们可以思考一下视觉大屏的内容。这个过程很重要也很复杂，需要和业务方充分沟通，确定业务场景，然后根据场景提取关键指标，选择要显示的图表类型。 　　

　　#避坑二：开发工具选择 　　

　　大屏幕可以通过开源可视化工具或者现成的可视化软件来实现。JS Echarts在开源中被广泛使用，所以我不得不说e。 　　

　　Charts的图表丰富，交互效果好，是定制开发的好选择。 　　

　　然而，这种开发方法对开发人员来说技术水平高，维护成本高。当需求改变时，代码也会改变。如果涉及的数据量很大，并且有许多动态影响，性能将大大降低。而且最后的模板放在led屏幕上，调试起来相当麻烦。如果没有足够的技术水平和人力，不要轻易尝试。 　　

　　除了开源工具，另一个选择是可视化开发软件。这次我们用的是国内软件公司FineReport，大部分都知道可以用来开发报表。没想到，它在大屏开发方面也非常强大。产品采用低代码的设计理念，将开源报表的很多功能打包，通过拖拽就可以完成模板制作，后续的维护也非常简单。 　　

　　此外，它本身的图表效果也很惊人。有很多3D特效组件和图表，是大屏幕的点睛之笔。这次我们在大屏幕上使用了3D场景地图组件，向您展示了以下效果： 　　

　　然而，在这里，我们还应该提到，动态效果应该谨慎使用，而不是过多使用。1-2个动态效果可以画龙点睛，但是过度使用动态效果极其容易篡夺主持人的角色，让观众的眼睛不知道聚焦在哪里，反而失去商业展示价值。这个度很难把握，要平衡酷炫效果，突出内容。(有些领导可能喜欢华而不实) 　　

　　FineReport的大屏开发教程可以看看这篇文章：不写代码，教你如何从0到1做出炫酷的视觉大屏。 　　

　　#演示分享 　　

　　最后分享一下之前安排的大屏演示，有些是js E。 　　

　　开发了图表，有些是由FineReport开发的。演示使用的源代码和图片资料与大家分享。您可以通过直接填写数据来使用它们： 　　

　　js+E charts： 　　

FineReport：

ps：FineReport制作的模板，源文件已内置在工具中，除了大屏模板，还有海量报表模板，可直可接套用。