教你制做类双十一的可视化大屏

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

屏幕上不只实时刷新着数据，更滚动着全球交易记录，用商业智能实时分析交易数据，以淘宝的数据体量，简直尤物。

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

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

大家必定都好奇，相似天猫双十一的大屏是怎么作出来的？

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

若是用代码开发，虽然只要有足够的人力、财力和技术，舍得投入，都能作出来，但应用成本对你们甚至大部分企业来说，就过高了。

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

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

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

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

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

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

（PS：商用指企业部署啊，这里本身作作大屏仍是免费的哈！）

2、链接数据

运行FineReport，并创建好数据链接，从万千数据中，取出你要展现的数据表。

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

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

3、大屏模板制做

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

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

在制做以前，咱们须要思考在这个空白界面上，要展现哪些有关双11的数据。

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

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

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

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

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

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

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

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

5、添砖加瓦，美化细节

以上咱们把大体的框架搭好，可是总以为不那么好看？

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

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

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

能够浏览一下效果，是否是瞬间以为整个页面有了主心骨？

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

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

若是没有美工怎么办呢？那就只能任由本身审美发挥了......

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

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

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

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

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

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

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

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

若是你开始熟练掌握FineReport，还能够发现更多有趣的玩法。

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

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

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

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

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

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

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

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

最合理的，仍是要找大屏硬件商去实地勘察、沟通需求，由于受场地及客户实际需求、应用场景的影响，每一个项目作实施时用到的设备确定不同。

一些经常使用设备以下，仅供参考：

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

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

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

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

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

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