历史版本3 :FVS组件联动及组件动画应用 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

1.概述

适用场景:安装了「FVS大屏编辑模式」插件的用户,可参考本文了解 FVS 模板的相关功能。

目录:

1.1 版本编辑

报表服务器版本
JAR包
FVS大屏编辑模式(beta版)版本
11.02021-11-15V1.1.0

1.2 场景介绍编辑

模板场景:某公司的销售经理给高层领导汇报一年的业绩,他先介绍全国业务,主要从利润额,销售额,回款额,税费这四个维度介绍。然后点击地图再钻取到某重点省份,介绍该省份的业务,主要从地区目标达成率,地区销售额,利润额等维度介绍详细情况。

本文将主要介绍模板中点击地图传参和分页间组件动效的实现过程。

1.3 预期效果编辑

  • 模板中分页切换采用组件动效,组件向四周进入和退出。

  • 模板中地图与表格、图表、标题进行联动,点击地图中某个城市,地图跳转到第二个分页,表格、图表、标题展示该城市的数据。

效果如下图所示:

以江苏省为例,点击页面1地图上的江苏省,跳转到页面2,显示江苏省数据。

页面1和页面2的分页切换采用组件动效,向四周退出和进入。

soogif.gif

模板下载地址:销售年终总结

2.步骤

说明:为了更清晰的说明模板制作方法,现用测试模板进行讲解,预期效果如下图:

soogif (1).gif

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 字段值匹配输入的省份,取出对应的省份各个市的数据,并按利润额降序排序。

如下图所示:

image2021-12-23_14-51-55.png


2.2 组件准备编辑

页面1:拖入「区域地图」组件,绑定数据集ds1。

页面2:拖入「柱形图」、「标题」、「表格」组件。其中,「柱形图」、「标题」绑定数据集ds2,表格采用数据集ds1,具体操作会在2.3节介绍

2.3 传参设置编辑

2.3.1 地图设置

选中区域地图组件,点击交互,添加分页跳转事件和组件联动事件,效果如图所示。

image2021-12-24_11-28-46.png


选择被钻取的页面为「触发对象」:image2021-12-23_16-32-52.png

设置全局联动的参数$province,参数值是地图组件的「区域名」:

image2021-12-23_16-33-41.png

2.3.2 表格设置

点击表格进入编辑状态,效果如下图所示:

image2021-12-23_15-37-15.png


为了与地图产生联动,多个单元格需要添加过滤条件,具体设置如下表:

单元格
单元格内容
过滤条件(双击单元格设置)
说明
A2ds1.G(省份)(列名:省份)等于 F(x):if(len($province) = 0 || $province = "中国", ds1.select(省份, len(pid) = 0), ds1.select(省份, pid = $province))当 province 为空或等于「中国」时,获取 ds1 数据集中满足「pid」为空的「省份」数据,否则根据参数 province 显示数据
B2ds1.求和(销售额)(列名:省份)等于单元格 A2

这里 B2 单元格无法根据 A2 单元格显示数据,故设置过滤条件使其跟随 A2 单元格显示数据

注:C2 单元格需设置左父格为自定义 B2 单元格

以A3单元格为例,双击A3单元格弹出数据列设置框,步骤如下图所示:

image2021-12-23_16-42-58.png

2.3.3 标题设置

插入公式: if(len($province) = 0 || $province = "中国", "全国数据", $province + "销售数据")

此公式表示当 province 为空或等于「中国」时,标题显示“全国数据”,当参数不为空时,标题显示对应省份+销售数据。


2.3.4 柱形图设置

柱形图无需额外设置,绑定数据集ds2即可。


2.5组件动效设置编辑

以区域地图为例,点击动画-组件动效,进入动画设置为向右进入,退出动画设置为向左退出。

image2021-12-24_11-27-9.png

2.6 效果预览编辑

soogif (1).gif

3.模板下载

依照以上步骤,可以实现完整模板的效果,背景素材可使用FVS内置素材。

测试模板:

FVS地图传参演示模板.fvs

完整模板:销售年终总结