制作酷屏报表

1 概述

本文档通过制作一张简单的酷屏报表，让大家快速了解酷屏报表的制作过程。

1.1制作流程图

1.2示例效果

在开始制作前，我们先看下待制作酷屏报表的最终展示效果。

下面我们按照制作流程图来制作这张酷屏报表。

2 制作步骤

2.1 新建酷屏

在【数据分析】模块首页，点击新建分析下的酷屏。

弹出【选择酷屏模板】对话框，可以根据模板创建（鼠标移动到模板上会出现【创建】按钮，点击即可），也可以新建空白报表，这里我们选择从空白模板创建，点击【新建酷屏】，打开到酷屏设计器。 

2.2 设置最佳分辨率

在制作酷屏时，一般都会基于某个固定分辨率来制作，以达到在此分辨率下，酷屏的展示效果最佳。酷屏属性中的【最佳分辨率】就是用于指定酷屏大小。这里，我们设置最佳分辨率为1920*1080。

基于固定分辨率制作酷屏会导致依据大屏的分辨率制作的酷屏，在小屏上展示时会有滚动条；依据小屏的分辨率制作的酷屏，在大屏上展示时会有空白区域，撑不满。 为解决此问题，酷屏中提供了【缩放比例】属性设置，以适应不同分辨率。这里我们设置缩放比例为“自动缩放”，即缩放到正好一屏显示。

2.3 添加组件

接下来我们添加组件到中间设计区，并进行位置、大小等基本属性设置。

这里，我们先添加“通用标题边框”组件，并设置其位置和大小。

并设置其【标题文字】为人员信息表。

接着，添加一个表格轮播组件，并完成其位置和大小设置。

并设置其【每页条数】为32。

然后，按住Ctrl键，同时鼠标单击选中刚添加的两组件，将这两组件组合在一起，方便后续整体移动位置。

并修改组合的标题为人员信息。具体操作为：在设计区点击选中组合，然后右键【属性】打开组合的属性面板，修改【标题】属性为人员信息。

或者在组件面板的图层标签页中，在组合节点上右键，点击【属性】打开该组合的属性面板，修改【标题】属性为人员信息。

同理，依次完成其他组件的添加和基本属性设置。另外，除了通过属性设置调整组件的位置和大小外，还支持鼠标直接拖动调整位置和拖拉调整大小。

2.4 设置组件取数

1、“SQL”取数

组件添加完成后，接下来进行组件的取数设置。

以表格轮播组件为例，使用SQL数据源取数。在表格轮播组件上鼠标右键【取数】（注：表格轮播组件在一个组合中，第一次点击是选中组合，再次点击则是选中的表格轮播组件）， 右侧属性面板打开到该组件的取数设置界面：

首先需要设置【数据来源】，我们从“默认”切换至“SQL“，在【sql数据源】中点击【新增】新建

在SQL编辑器中，“rs1“为刚刚我们新建的SQL数据源，可在【数据来源】处自定义名称。

然后选择连接池，编辑SQL语句时，在【可选表】处点击表名可添加表名至sql语句中，在【可选字段】处点击字段名可添加字段至sql语句中。

这里，编写的SQL语句为：select QJDH,USERNAME_,QJLB,HJTS from FACT_YGQJ ，写完点击【测试SQL】效果如下，最后点击【确定】。 

然后在表格轮播组件的【取数设置】中勾选刚刚新建的数据源。

需要设置的有表头数据，表体内容和列宽。表头数据值，我们根据【默认】给出的表头示例数据["ColumnA","ColumnB","ColumnC","ColumnD"]，参考该格式输入常量["请假单号,"员工姓名","请假类别","合计天数"]

表体内容值，下拉勾选对应的sql数据源字段即可。这里的字段顺序与【SQL数据源】中SQL语句的字段顺序一致，所以，如果字段顺序不对，则需要调整sql语句中字段顺序。

列宽值，采用【默认】中给出的列宽数据示例，填写["25%","25%","25%","25%"]，这样，表格轮播组件的取数设置就完成了。

点击菜单栏中的预览，预览效果如下图：

2、“静态数据”取数

接下来，我们以光晕玫瑰图为例，使用“静态数据”设置取数。假设光晕玫瑰图不需要从数据库表、接口等取数，而是需要录入固定的常量数据，可使用“默认”或“静态数据”取数，推荐使用“静态数据”取数，更方便录入数据。

选中光晕玫瑰图，【数据来源】选取“静态数据”，然后鼠标单击需要修改的”值“，在弹出的【取数设置】窗口中，鼠标双击表格单元格即可编辑录入数据。

如行数不够，可使用“插入上方行“和”插入下方行“等功能。至于多余的行和列，可使用”删除行“和”删除列“功能。

同理，我们依次完成其他组件的取数设置。

3、“接口数据”取数

接下来，我们以“走马灯表格”为例，展示“年份、型号对应的汽车价格”，使用“接口取数”。

先拖入“走马灯表格”组件，鼠标右键选中【取数】，右侧属性【取数设置】中的【数据来源】选择【接口数据】，选择在“接口数据源”模块配置的接口“汽车价格接口”。

标题titles：["年份","型号","价格"]；

轮播内容txts：选取接口中对应的三个字段；

列宽colsWid：["33%", "33%", "34%"]，

最终预览效果如下。

4、“数据表格”取数

接下来，我们以动态细长进度条为例，展示“请假工时排名前五的部门以及对应请假工时”，使用“数据表格”取数。

先拖入“动态细长进度条”组件，鼠标右键选中【取数】，右侧属性【取数设置】中的【数据来源】选择【数据表格】，双击属性值对应“拾取”按钮。

弹出“拾取数据表格数据”子页面，点击【新建表格】按钮，会弹出“数据表格”编辑窗口。

“新建表格”编辑框，左侧是“新建数据集”，可以选择添加主题表、上传本地文件、添加数据库连接池以及添加文件数据源，具体操作可以参考新建“敏捷看板”；中间是“分析表格编辑区”，右侧是表格属性面板，方便写表格过滤条件，筛选出需要展示的数据。

这里我们选择之前创建好的“个人周报表”主题表“FACT_GRZB”，使用表格计算出“部门以及对应请假工时”。具体操作可以参考“报表分析”模块中“浮动分析表的制作”。

我们取员工id字段和请假工时字段，由于员工id字段绑定过维“员工维”，展示级次选到部门就可按部门分组展示，【TopN设置】为5，【排序】按字段“B2请假工时”降序，即可计算展示“请假工时排名前五的部门以及对应请假工时”。表格取数设计完成后点击左上角【保存并返回】。

注意：过滤条件不写代表计算所有数据。这里<#=mkfilter("left(FACT_GRZB.RQ,4)=@ny")#>表示过滤只查询个人周报“FACT_GRZB”主题表的RQ字段前四位与@ny的值相等的数据，@ny为空查询全部数据。这里的“@ny”是传过来的参数，后面会使用【联动式】传参，需要参数名一致，展示所选年的数据。

预览效果如下图：查询请假总工时排名前五的部门和对应的请假工时。

点击【保存并返回】后，配置取数，LeftArr值：<#=GRID1.A2$.select(true,@.txt) #>

DataArr值：<#=GRID1.B2$#>；GRID1是“数据表格”表格代号，A2表元是部门编码，<#=GRID1.A2$.select(true,@.txt) #>这个写法取出显示部门名称。

最终根据“数据表格”取数，酷屏预览效果，

这边添加一个“下拉框”去选择年份，查询对应年份的请假工时，以【参数】组件中的“带删除下拉框”组件为例，实现联动效果，点击“添加”按钮将参数添加到酷屏中。

“酷屏设计器”中选中下拉框参数，鼠标右键选择【取数】，在右侧属性面板的参数“事件”中，选取“钻取设置”中的的【联动式】，“联动组件”下拉框选择需要联动的组件HHH2（动态细长进度条）和HHH9(富文本组件)，

参数名是需要自己填写的，例如@ny，将参数名@ny的值data传给动态细长进度条组件（HHH2）以及传给富文本组件（HHH9）实现联动效果。

也可以使用【参数设置】右边的“+”添加其他参数传给联动的组件，例如传个固定值“年”在富文本中显示统计标题信息。

注意：传的参数名一般以@符号开头；参数显示的是名称但传的值是编码id（维下拉参数：编码id和名称）；传的值是给组件使用的“数据表格”当成过滤条件，过滤条件写的参数名要与钻取设置传的参数名一致。

富文本变量名固定为txt，可以使用宏表达式：<#=txt#>取出富文本的值。这边取前五名的部门名称展示，变量“txt”取数来源和“动态细长进度条”是同一个“数据表格GRID1”，所以取数写法<#=GRID1.A2$.select(true,@.txt) #>。

如下图，根据选择的参数值，展示“2017年请假工时排名前五的部门以及对应请假工时”。

同时我们还支持类似二列数组的走马灯表格取数效果[<#=GRID1.A2$#>,<#=GRID1.B2$#>]

具体效果如下，

参数组件取二维数组：使用“数据表格”取数，主题表字段是存的编码并且绑定了对应维度。

写法<#=[GRID3.A2$, GRID3.A2$.select(1=1, @.txt)].matrix()#>，取GRID3表格的A2字段，

调用数组对象的matrix()方法，实现转置。

实际的二维数组值如右侧，可以用于我们的下拉框。

注意：一个酷屏可以建立多个数据表格取数。但是统计图取数，一个图形只能从一个数据表格取数，不支持从多表取数，所以一个取数里不能是  [<#=GRID1.A1$#>,<#=GRID2.A1$#>]。

GRID1.A1$.select(true,@.txt)取到的是A1表元浮动出来的结果维表元的文字组成的数组；

GRID1.A1$.select(true,@.txt).join(",") 取到的是A1表元浮动出来的结果表表元文字组成的数组元素用逗号连接的字符串。

2.5 调整组件样式

接下来对部分组件进行样式调整。

针对光晕玫瑰图组件完成系列等属性调整。

针对绿色主题线状图组件完成图例、提示框、坐标轴等属性调整。.

2.6 预览并保存

最后，点击菜单栏中【预览】，查看页面开发效果。

预览结果：

点击菜单栏中【保存】按钮，完成酷屏报表开发。