每年双十一,天猫都会在整点时刻直播战绩,可怕的战绩背后,不知道大家是否留意到背后的数据大屏,简直炫吊炸天 。
屏幕上不仅实时刷新着数据,更滚动着全球交易记录 , 以淘宝的数据体量,简直尤物 。

图片源自网络
所谓大屏,顾名思义就是一个很大很大的屏,是一种可视化技术的展现,经常用在园区展览中心,城市交通管控中心,交易大厅 , 还有老板们的办公室 。
其原理就是将一些业务的关键指标以数据可视化的方式展示 。比如天猫大屏中的不同地区、不同品类、不同品牌的销售额还是交易单数、用户数等等 。然后投到一块或多块LED大屏上 。(一般上到大屏的都是很关键的指标) 。
你们一定都好奇,类似天猫双十一的大屏是怎么做出来的?
其实技术上可以用代码开发或现成的可视化工具来实现 , 但数据量支撑、后台响应、实时更新、平台运维等需求,性能却各有差异 。
如果用代码开发 , 虽然只要有足够的人力、财力和技术,舍得投入,都能做出来,但应用成本对大家甚至大部分企业来讲,就太高了 。
用现成的产品 , 能相对简单高效的搭建一个数据大屏 。
这不 , 当即就有用户用FineReport简单做了一个 。(忽略2017)

本文就借着双11的这波热点,一起来瞅瞅如何快速的搭建一个大屏页面,借助FineReport 。
一、工欲善其事必先利其器
第一步我们得先下载安装FineReport 。大多数工具都不是专做数据大屏的,比如报表类工具,BI类工具,大屏只是其中的一种应用 。像FineReport,它本质上是一款商用的报表工具 , 不仅能做可视化,还更多用于企业的业务报表制作 。
(PS:商用指企业部署啊,这里自己做做大屏还是免费的哈?。?
二、连接数据
运行FineReport,并建立好数据连接 , 从万千数据中,取出你要展示的数据表 。连接的数据可以是常见的关系型数据库,也可以是像Excel这样的文件数据 , 也支持和大数据平台对接 。
如图所示,是我们连接的测试数据,这次示例分析一下双11销售数据 。


三、大屏模板制作
数据准备好之后,接下来就是大屏的模板制作 。先建一个空白大屏模板(决策报表),如下所示,原理就是再下面这个空白版上拖拽一个一个可视化组件(图表之类的),然后绑定数据 。

在制作之前,我们需要思考在这个空白界面上,要展示哪些有关双11的数据 。
仔细琢磨了一下,大概设计了如下布局,中间是主要展示的主题 , 左右两侧是子主题 。

四、选择合适的可视化元素
确定了要展示的内容之后,需要思考用什么样的可视化形式来展现每一个主题的内容 。常见的就是套图表,FineReport中内置几十种可视化图表,光数据地图就有近十种,再结合不同的动效 。
下图是梳理了十几种常见图表类型适用的场景:

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

然后基于步骤二中准备好的数据,分别为每个图表组件设置好数据来源 。
至此,第一版初稿完成了,在浏览器中预览的效果如下图:

五、添砖加瓦,美化细节
以上我们把大致的框架搭好,但是总觉得不那么好看?为什么呢?因为缺几样东西,一个是主心骨(总领全局的突出指标),一个是配色 。
so,我们先来给加一个全局指标,也就是我们关注的销售总额数据 。
从快捷栏中拖入一个表格组件,并在表格中绑定销售额数据 。

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

紧接着,开始对配色进行调整 。
这个时候,如果你懂一些美工方面的知识,或者说公司有专门的美工同学,那就事半功倍,照着美工的效果图,以及给的颜色参数和边框素材 , 调整就行 。
如果没有美工怎么办呢?那就只能任由自己审美发挥了......
参照着官方给的demo样式,各种配色调整 。背景色、图表显色、线条、字体样式、动画效果......
这方面FineReport正如新版Excel样式功能,可以各种自定义设置,针对各个细节美化调整 。比如我随手调了几个深色系样板(忽略我被人诟病的直男审美,美工集体三亚玩去了,只能做到这样了):


六、所谓大屏,要能酷炫,还要能动态刷新
到上一步,搭出的demo基本可以看了,顶多是差强人意,离优秀还有些距离的 。好吧,继续优化 。比如为页面添加一些合适的图片背景或者边框元素,比如设置图表的动画效果 。
其次,也是大家比较好奇的 , 如何产生实时数据?其实就是设置监控刷新,来实时更新数据 。
下图是我给地图添加了数据监控及自动数据提示 , 会根据后台数据变更情况实时在页面上展示 。


七、进阶大屏玩法,炫酷随心
如果你开始熟练掌握FineReport , 还可以发现更多有趣的玩法 。这里碍于篇幅,就不展开细讲了 , 大家可以通过finereport的教学文档进一步了解,也可以通过帆软社区进行视频课程的学习,下面秀几张高阶效果图给大家看看 。


最后、数据大屏,不只是秀
也许大家对这样的大屏会嗤之以鼻,眼花缭乱,毫无实用 , 用华丽的视效堆叠起来博人眼球 。在效果之外 , 还是提倡大家更注重可视化能否经得住业务价值的推敲?数据是否带来了价值?是否为企业经营提供了帮助?
在设计展现指标时多调研多涉猎,从以往“酷炫就行”的思维模式中走出来,更多关注数据本身的价值 。
最后的最后,还没完事,做好的样式要投到大屏上?。?/b>
一般可选用LED拼接屏,或者一体机 。
一套完整拼接屏具备哪些硬件?
最合理的,还是要找大屏硬件商去实地勘察、沟通需求 , 因为受场地及客户实际需求、应用场景的影响,每个项目做实施时用到的设备肯定不一样 。
一些常用设备如下,仅供参考:
A用于最终呈现图像的拼接单元:液晶拼接屏屏、DLP背投单元、PDP等离子拼接屏等,一般单个尺寸在46-55寸,通常是FHD屏幕;
B用于固定拼接单元的支架:一般都是由提供拼接单元的厂家配套提供,因为只有厂家本身最了解自己产品是如何固定安装的 , 特别是大规模的拼接系统,更需要高效率、高稳定性的原配支架;
C用于实现信号接入处理并输出给拼接单元的拼接处理器:一般为基于FPGA架构的纯硬件拼接处理器 , 可以实现多达上百路的高清、4K信号输入和输出;当然也有通过多屏显卡来实现的低成本X86架构的系统,缺点是再想接入更多其他信号(如来自DVD、摄像头)的话 , X86架构会比较吃力 。
D传输专用的视频线缆:DVI、HDMI、SDI等与信号格式相匹配的高品质线缆 。如果采用的线缆品质有问题,可能引发噪点、无信号、闪屏等异常情况
E一般还要配置一台电脑,用于安装拼接屏与拼接器的管理软件:控制拼接屏的开关、拼接器的预案、窗口布局、信号切换等 。软件由提供拼接处理器的厂家配套提供;
F稳定的供电:拼接系统整体功率比较大,特别是开关机的瞬时电流很高 , 因为要预防电涌对系统造成的异常损坏,不能通过一次性拉闸的方式直接开关,所以超过15块屏幕的系统最好还需要时序电源进行控制开关(也就是一组一组陆续开机关机) 。当然如果为了省钱,也可以用人工逐个开启接线板的方式 。

【教你制作类双十一的可视化大屏】还不赶紧下finereort尝试下?
