只要一提起可视化，很多人第一个想到的，肯定就是火得一塌糊涂的大屏了。

从我身边很多从事可视化的朋友来看，越来越多的公司都将可视化大屏作为企业数据工作展示的“高级手段”和“对外平台”，这就苦了这些做大屏的人，甚至造成很多IT人最怕听到老板的一句话就是：“给我做一个高端大气的可视化大屏！”

其实，可视化大屏不仅是要在视觉上美观炫酷和与数据契合的科技感，更重要地是突出重点数据，做到美观性与实用性共存的效果。我之前也曾经在一个团队里为公司做过可视化大屏，经历了与需求方的不断交涉、修改，最终做出了几张比较满意的大屏：

FineReport大屏

FineReport大屏

FineReport大屏

这样的大屏不仅拥有着高端的科技感，而且都是经过了多次的版面设计和修改，这次大屏效果在同行业内部交流过程中反响不错，在这次大屏的开发过程中，我亦总结了一些独家的大屏技巧略作分享。

做大屏的一点经验分享

首先要说一下我们制作大屏使用的工具——FineReport 10.0，是采用最新的可视化大屏图表，默认采用深色背景+荧光配色，非常符合浸入式的大屏体验；而且能根据图表类型和数据要求，提供 '轮播'或'刷新'两种动画形式，能够满足不同场景下的业务需求。

同时FineReport10.0最厉害之处，在于它基于webgl等技术，对动画不断优化调整，能让做出来的效果更加简洁炫酷。

通用的大屏设计原则

一个大屏的设计主要可以分为两块，一个是数据指标的选用，一个是与这些指标对应的组件的使用。

其中我们首先要明确要分析的指标有哪些：

• 比率类指标：指两个值相除后的指标，如销售额完成率，产品达标率等。
• 时间序列类指标：指按照时间粒度排序的指标，如分月销售额统计等。
• 数字总计类指标：表现形式为一个总的数字，如销售总额，用户总量等。
• 文本类指标：这一类是以纯文本展示的指标，如词云图，人员名单等。
• 子部分布类指标：这一类指标是指将一个主要指标按照不同地区，不同分公司，不同产品线等子部分布展示的指标，如地图和各分公司销售额分布图等。

明确了指标之后，就要选择这些指标对应的组件，一般来说要遵循下面几个原则：

1、大屏指标在8-12个为宜

FineReport大屏

大屏上的展示空间是有限的，我们不能将所有的数据都堆到大屏中，领导想要看到的也只是一些关键数据，因为大屏上的指标数量最好在8到12个之间，这也是数据指标数量的主流配置，这个数量的时候，大屏整体看起来不空也不挤。

少于8个的话，大屏就会显得空旷，而且也不经济；多于12个的话，这么多的数据指标挤在在一个张大屏上，要做到井然有序，确实很考验设计者的功力。

但是如果数据指标真的很多，实在是不能删减，那么我建议使用报表块，将这些数据整合到一起。这样，多个数据指标就可以在一个报表里面展现出来，不用占用很多空间。比如像下面这样：

2、比率类、数字类和子部分布类指标要合理布局比率类、数字总计类和子部分布类指标就像食物中的碳水化合物、脂肪和蛋白质，既要保证摄入量，也要营养均衡。

比率，数字总计和子部分布这三类指标在每张大屏中几乎必然出现，并且出现的次数也很多，次数分布也比较均匀，究其原因是这样的：

一般大屏都需要有数字总计类的指标，而且往往是核心指标，这样方便领导知道核心指标目前的总体状况。但是仅仅一个数字并不能反映出当前指标的完成情况，所以也需要有比率指标，它反映了部分占总体的占比。

另外，比率也只能体现一个占比情况，要想知道总计类指标的各个组成部分的具体情况，还需要子部分布类指标，例如用地图展示出全国营业额中各个地区的营业额情况。

所以大家要善用这三类指标，都要有，而且数量要均衡。

3、时间序列指标、文本指标不可过量

时间序列类指标和文本类指标就像食物里的微量元素，是必须摄入的营养，但是不可过量。

对于文本类的指标，因为领导们看大屏就是想摆脱枯燥的传统表格类报表，如果在大屏上还是大量出现，领导肯定是要发火的。

而时间序列指标的出现概率甚至跟数字总计类指标的概率一样，这是因为时间序列类的指标可以反应某个数据随着时间变化的趋势，这是相当直观而有意义的。不过，虽然我们可以通过季度，月度和日这些不同的粒度将一个数据指标用多个图表展示，但是这样并没有意义，选择最合适的一个粒度就好，多了没有必要。

4、高频组件尽量减少重复

报表块、饼图、柱形图、仪表盘、折线图、条形图和地图这几个组件出现的频率都非常高，可以说是大屏图表组件里面的常规武器了。

很多同学可能都觉得这些组件大家都用烂啦，这有什么可说的啊？

我本来也这样以为，但是看完了所有的这些经典大屏后，我发现自己还是tooyoung,too simple！原来这些常见的组件也可以千变万化，玩出花来，比如地图可是是这种：

仪表盘也可以做成这种：

还有这些

其他的组合图，饼图，折线图等等也有好多千变万化的玩法，大家在以后做大屏的时候可以多尝试变换一个样式，可能会有意想不到的效果哦。

5、使用3D效果

通过设计师设计的图片作为背景来拓宽图表样式，实现3D柱形图、3D圆环图等效果，设计师设计自定义图片，图片为具有一定特效的图表，把数据去掉。

或者，可以通过上文提到的报表块叠加，将图片作为底层背景，上层叠加数据，即可实现自制图表效果。

6、自定义地图

通过自定义图片作为地图背景，重新描点形成json文件，实现地图的3D倾斜效果。

• 设计师设计自定义地图，输出地图图片（压缩到1M以内最好，不然加载太慢）
• 设计器点击服务器->地图数据，进入地图编辑页面，自建自定义地图，放入压缩好的图片
• 对地图描点，根据实际业务情况描点（可按省份描也可按大区描）
• 保存json文件，重启设计器即可在地图图层中选到自定义地图。

总结

其实大屏的设计一方面需要不断积累经验，另一方面也需要善用大屏工具，一个好的可视化工具能够让你做起大屏来得心应手，像我这一次用的FineReport就完全没有涉及编程，换成是数据小白也一样能够做出高端大气的大屏。