反馈已提交

网络繁忙

FVS组件联动及组件动画应用

  • 文档创建者:帆软可视化
  • 历史版本:12
  • 最近更新:TW 于 2023-10-25
  • 1.概述

    适用场景:安装了「FineVis数据可视化」插件的用户,可参考本文了解 FVS 模板的相关功能。

    1.1 版本

    报表服务器版本
    JAR包插件版本
    11.02021-11-15V1.0.0

    1.2 功能简介

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

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

    视频教程可参考:多分页跳转同时传参

    1.3 预期效果

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

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

    效果如下图所示:

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

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

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

    soogif.gif

    2. 示例

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

    soogif (1).gif

    2.1 数据集准备

    新建 FVS 可视化看板,准备两个数据集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 地图设置

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

    1.png

    选择被钻取的页面为「触发对象」:

    2.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 单元格

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

    3.png

    2.3.3 标题设置

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

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

    2.3.4 柱形图设置

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

    2.4 组件动效设置

    以区域地图为例,点击「动画>动效设置」,设置为向右进入,向左退出。如下图所示:

    4.png

    2.5 效果预览

    soogif (1).gif

    3. 资料下载

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

    测试模板:FVS地图传参演示模板.fvs

    模板资源在线体验:销售年终总结

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

    附件列表


    主题: FineVis数据可视化
    已经是第一篇
    已经是最后一篇
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭

    联系我们
    在线支持
    获取专业技术支持,快速帮助您解决问题
    工作日9:00-12:00,13:30-17:30在线
    页面反馈
    针对当前网页的建议、问题反馈
    售前咨询
    采购需求/获取报价/预约演示
    或拨打: 400-811-8890 转1
    qr
    热线电话
    咨询/故障救援热线:400-811-8890转2
    总裁办24H投诉:17312781526
    提交页面反馈
    仅适用于当前网页的意见收集,帆软产品问题请在 问答板块提问前往服务平台 获取技术支持