1.概述编辑
适用场景:安装了「FVS大屏编辑模式」插件的用户,可参考本文了解 FVS 模板的相关功能。
注:不支持移动端。
1.1 版本
报表服务器版本 | JAR包 | 插件版本 |
---|---|---|
11.0 | 2021-11-15 | V1.0.0 |
1.2 功能简介
模板场景:某公司的销售经理给高层领导汇报一年的业绩,他先介绍全国业务,主要从利润额,销售额,回款额,税费这四个维度介绍。然后点击地图再钻取到某重点省份,介绍该省份的业务,主要从地区目标达成率,地区销售额,利润额等维度介绍详细情况。
本文将主要介绍模板中点击地图传参和分页间组件动效的实现过程。
视频教程可参考:多分页跳转同时传参 。
1.3 预期效果
模板中分页切换采用组件动效,组件向四周进入和退出。
模板中地图与表格、图表、标题进行联动,点击地图中某个城市,地图跳转到第二个分页,表格、图表、标题展示该城市的数据。
效果如下图所示:
以江苏省为例,点击页面1地图上的江苏省,跳转到页面2,显示江苏省数据。
「页面1」和「页面2」的分页切换采用组件动效,向四周退出和进入。
模板下载地址:销售年终总结
2. 示例编辑
说明:为了更清晰的说明模板制作方法,现用测试模板进行讲解,预期效果如下图:
2.1 数据集准备
新建大屏模板,准备两个数据集ds1,ds2
ds1: SELECT * FROM 地图
ds2: SELECT * FROM 地图 where 1=1 ${if(len(province) = 0 || province=='中国'," and pid is null","and pid='"+province+"'")} order by 利润额 desc
其中 ds2 数据集定义了参数 province,当 province 为空或为中国时,取出省份的汇总数据并按利润额降序排序;若 province 不为空,那么用 pid 字段值匹配输入的省份,取出对应的省份各个市的数据,并按利润额降序排序。
如下图所示:
2.2 组件准备
页面1:拖入「区域地图」组件,绑定数据集ds1。
页面2:拖入「柱形图」、「标题」、「表格」组件。其中,「柱形图」、「标题」绑定数据集 ds2,表格采用数据集 ds1,具体操作会在 2.3 节介绍
2.3 传参设置
2.3.1 地图设置
选中区域地图组件,点击交互,添加分页跳转事件和组件联动事件,效果如图所示。
选择被钻取的页面为「触发对象」:
设置全局联动的参数 $province,参数值是地图组件的「区域名」:
2.3.2 表格设置
点击表格进入编辑状态,效果如下图所示:
为了与地图产生联动,多个单元格需要添加过滤条件,具体设置如下表:
单元格 | 单元格内容 | 过滤条件(双击单元格设置) | 说明 |
---|---|---|---|
A2 | ds1.G(省份) | (列名:省份)等于 F(x):if(len($province) = 0 || $province = "中国", ds1.select(省份, len(pid) = 0), ds1.select(省份, pid = $province)) | 当 province 为空或等于「中国」时,获取 ds1 数据集中满足「pid」为空的「省份」数据,否则根据参数 province 显示数据 |
B2 | ds1.求和(销售额) | (列名:省份)等于单元格 A2 | 这里 B2 单元格无法根据 A2 单元格显示数据,故设置过滤条件使其跟随 A2 单元格显示数据 注:C2 单元格需设置左父格为自定义 B2 单元格 |
以 A2 单元格为例,双击 A2 单元格弹出数据列设置框,步骤如下图所示:
2.3.3 标题设置
插入公式: if(len($province) = 0 || $province = "中国", "全国数据", $province + "销售数据")
此公式表示当 province 为空或等于「中国」时,标题显示“全国数据”,当参数不为空时,标题显示对应省份+销售数据。
2.3.4 柱形图设置
柱形图无需额外设置,绑定数据集 ds2 即可。
2.4 组件动效设置
以区域地图为例,点击「动画>动效设置」,设置为向右进入,向左退出。如下图所示: