昨晚双十一，明明是光棍节

但朋友圈里却炸出了一众“脱单炫富装逼”的狂欢

FPX夺冠！女神泰勒百年难遇演出！还有晒订单炫富的！

真是男女通吃的一晚！

但暴击远没结束~

一早打开电脑，就被某IT精致主义群（宅男撸毛党）里大家的卓越战绩刷屏：

.45万抢到RMBP5的

抢到airpods2代的

多抢到3双NIKE的

还有0元送阿迪洗发水沐浴露套装的

然而我只撸了一盒浪莎袜，只能在群里捧哏…

好在中午食堂双十一打折，块4个菜，弥补了我一点安慰…

哎，双十一的规则越来越复杂，满减越来越套路.....

有盖楼的时间，还不如多做几张漂亮的模板找老板邀功！

（其实我提早把要买的东西偷偷加进媳妇的购物车，示弱我没有券、抢不到、不懂规则。没想到平常水瓶盖都拧不开，瞬间眼睛放光，一句巾帼不让须眉“我来”！）

——回到话题——

今早看到新闻，天猫双十一仅个多小时，成交额超过人民币亿元。剁手党们在屏幕一端买买买，而我关心的则是不断刷新着这场“数字经济奥林匹克”纪录的大屏。

没错！每年双十一我都要蹭这场热点，力劝大家学做大屏！

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

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

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

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

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

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

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

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

工欲善其事必先利其器

第一步先下载安装FineReport。

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

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

二、连接数据

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

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

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

三、大屏模板制作

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

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

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

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

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

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

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

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

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

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

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

五、添砖加瓦，美化细节

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

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

so，我们先来给加一个全局指标，也就是我们