可视化大屏设计尺寸（教你制作类双十一的可视化大屏）

每年双十一，天猫都会在整点时刻直播战绩，可怕的战绩背后，不知道大家是否留意到背后的数据大屏，简直炫吊炸天。

屏幕上不仅实时刷新着数据，更滚动着全球交易记录，以淘宝的数据体量，简直尤物。

图片源自网络

所谓大屏，顾名思义就是一个很大很大的屏，是一种可视化技术的展现，经常用在园区展览中心，城市交通管控中心，交易大厅，还有老板们的办公室。

其原理就是将一些业务的关键指标以数据可视化的方式展示。比如天猫大屏中的不同地区、不同品类、不同品牌的销售额还是交易单数、用户数等等。然后投到一块或多块LED大屏上。（一般上到大屏的都是很关键的指标）。

你们一定都好奇，类似天猫双十一的大屏是怎么做出来的？

其实技术上可以用代码开发或现成的可视化工具来实现，但数据量支撑、后台响应、实时更新、平台运维等需求，性能却各有差异。

如果用代码开发，虽然只要有足够的人力、财力和技术，舍得投入，都能做出来，但应用成本对大家甚至大部分企业来讲，就太高了。

用现成的产品，能相对简单高效的搭建一个数据大屏。

这不，当即就有用户用FineReport简单做了一个。（忽略2017）

本文就借着双11的这波热点，一起来瞅瞅如何快速的搭建一个大屏页面，借助FineReport。

一、工欲善其事必先利其器

第一步我们得先下载安装FineReport。

大多数工具都不是专做数据大屏的，比如报表类工具，BI类工具，大屏只是其中的一种应用。像FineReport，它本质上是一款商用的报表工具，不仅能做可视化，还更多用于企业的业务报表制作。

（PS：商用指企业部署啊，这里自己做做大屏还是免费的哈！）

二、连接数据

运行FineReport，并建立好数据连接，从万千数据中，取出你要展示的数据表。

连接的数据可以是常见的关系型数据库，也可以是像Excel这样的文件数据，也支持和大数据平台对接。

如图所示，是我们连接的测试数据，这次示例分析一下双11销售数据。

三、大屏模板制作

数据准备好之后，接下来就是大屏的模板制作。

先建一个空白大屏模板（决策报表），如下所示，原理就是再下面这个空白版上拖拽一个一个可视化组件（图表之类的），然后绑定数据。

在制作之前，我们需要思考在这个空白界面上，要展示哪些有关双11的数据。

仔细琢磨了一下，大概设计了如下布局，中间是主要展示的主题，左右两侧是子主题。

四、选择合适的可视化元素

确定了要展示的内容之后，需要思考用什么样的可视化形式来展现每一个主题的内容。

常见的就是套图表，FineReport中内置几十种可视化图表，光数据地图就有近十种，再结合不同的动效。

下图是梳理了十几种常见图表类型适用的场景：

从FineReport设计器的快捷栏中，拖拽合适的元素到画布中，如下示意图所示。中间主要展示双11全国区域的订单情况，所以我们选了热力地图，其他模块根据需要分别选了柱形图、饼图、词云图等。

然后基于步骤二中准备好的数据，分别为每个图表组件设置好数据来源。

至此，第一版初稿完成了，在浏览器中预览的效果如下图：

五、添砖加瓦，美化细节

以上我们把大致的框架搭好，但是总觉得不那么好看？

为什么呢？因为缺几样东西，一个是主心骨（总领全局的突出指标），一个是配色。

so，我们先来给加一个全局指标，也就是我们关注的销售总额数据。

从快捷栏中拖入一个表格组件，并在表格中绑定销售额数据。

可以浏览一下效果，是不是瞬间觉得整个页面有了主心骨？

紧接着，开始对配色进行调整。

这个时候，如果你懂一些美工方面的知识，或者说公司有专门的美工同学，那就事半功倍，照着美工的效果图，以及给的颜色参数和边框素材，调整就行。

如果没有美工怎么办呢？那就只能任由自己审美发挥了......

参照着官方给的demo样式，各种配色调整。背景色、图表显色、线条、字体样式、动画效果......

这方面FineReport正如新版Excel样式功能，可以各种自定义设置，针对各个细节美化调整。比如我随手调了几个深色系样板（忽略我被人诟病的直男审美，美工集体三亚玩去了，只能做到这样了）：

六、所谓大屏，要能酷炫，还要能动态刷新

到上一步，搭出的demo基本可以看了，顶多是差强人意，离优秀还有些距离的。好吧，继续优化。

比如为页面添加一些合适的图片背景或者边框元素，比如设置图表的动画效果。

其次，也是大家比较好奇的，如何产生实时数据？其实就是设置监控刷新，来实时更新数据。

下图是我给地图添加了数据监控及自动数据提示，会根据后台数据变更情况实时在页面上展示。

七、进阶大屏玩法，炫酷随心

如果你开始熟练掌握FineReport，还可以发现更多有趣的玩法。

这里碍于篇幅，就不展开细讲了，大家可以通过finereport的教学文档进一步了解，也可以通过帆软社区进行视频课程的学习，下面秀几张高阶效果图给大家看看。

最后、数据大屏，不只是秀

也许大家对这样的大屏会嗤之以鼻，眼花缭乱，毫无实用，用华丽的视效堆叠起来博人眼球。

在效果之外，还是提倡大家更注重可视化能否经得住业务价值的推敲？数据是否带来了价值？是否为企业经营提供了帮助？

在设计展现指标时多调研多涉猎，从以往“酷炫就行”的思维模式中走出来，更多关注数据本身的价值。

最后的最后，还没完事，做好的样式要投到大屏上啊！

一般可选用LED拼接屏，或者一体机。

一套完整拼接屏具备哪些硬件？

最合理的，还是要找大屏硬件商去实地勘察、沟通需求，因为受场地及客户实际需求、应用场景的影响，每个项目做实施时用到的设备肯定不一样。

一些常用设备如下，仅供参考：

A用于最终呈现图像的拼接单元：液晶拼接屏屏、DLP背投单元、PDP等离子拼接屏等，一般单个尺寸在46-55寸，通常是FHD屏幕；

B用于固定拼接单元的支架：一般都是由提供拼接单元的厂家配套提供，因为只有厂家本身最了解自己产品是如何固定安装的，特别是大规模的拼接系统，更需要高效率、高稳定性的原配支架；

C用于实现信号接入处理并输出给拼接单元的拼接处理器：一般为基于FPGA架构的纯硬件拼接处理器，可以实现多达上百路的高清、4K信号输入和输出；当然也有通过多屏显卡来实现的低成本X86架构的系统，缺点是再想接入更多其他信号（如来自DVD、摄像头）的话，X86架构会比较吃力。

D传输专用的视频线缆：DVI、HDMI、SDI等与信号格式相匹配的高品质线缆。如果采用的线缆品质有问题，可能引发噪点、无信号、闪屏等异常情况

E一般还要配置一台电脑，用于安装拼接屏与拼接器的管理软件：控制拼接屏的开关、拼接器的预案、窗口布局、信号切换等。软件由提供拼接处理器的厂家配套提供；

F稳定的供电：拼接系统整体功率比较大，特别是开关机的瞬时电流很高，因为要预防电涌对系统造成的异常损坏，不能通过一次性拉闸的方式直接开关，所以超过15块屏幕的系统最好还需要时序电源进行控制开关（也就是一组一组陆续开机关机）。当然如果为了省钱，也可以用人工逐个开启接线板的方式。

还不赶紧下finereort尝试下？

,