历史版本2 :FVS显示隐藏组件事件 返回文档
编辑时间:
内容长度:图片数:目录数:
修改原因:
1. 概述编辑
适用场景：安装了「FineVis数据可视化」插件的用户，可参考本文了解 FVS 模板的相关功能。
1.1 版本
| 报表服务器版本 | 插件版本 | 功能变动 |
|---|---|---|
| 11.0.22 | V2.3.0 | 「交互>点击事件」新增显示/隐藏事件，无需通过 JS 即可实现显示隐藏组件 |
1.2 应用场景
FVS 模板在 V2.3.0 之前的版本中，要实现 组件的显示隐藏 需通过 JavaScript 事件实现，设置及后续维护较为繁琐。
V2.3.0 版本新增「显示/隐藏」点击事件，通过简单配置即可实现组件显示、隐藏或切换显示/隐藏。
2. 功能介绍编辑
所有支持点击事件的二维组件，均支持「显示/隐藏」事件。添加后可控制目标对象的显示或隐藏。
事件名称不支持为空，同一组件的事件不支持重名；
支持添加多条对象；
目标对象支持搜索筛选组件，支持多选组件；
交互动作支持三种类型：显示、隐藏或切换显示/隐藏。
3. 示例编辑
3.1 新建模板
点击设计器左上角「文件>新建可视化看板」，新建一个空白看板。如下图所示：
3.2 添加组件
添加 标题组件 用于设置点击交互事件，用于被隐藏或显示的组件可随意添加。
本例添加了一个柱形图、一个饼图和一个折线图，以及三个图片组件作为标题组件的背景，可自定义修改组件名称。
最终效果如下图所示：
在初始状态，我们需要将希望隐藏的组件，手动设置为不可见状态。如下图所示：
3.3 设置显示隐藏事件
选中「柱形图」标题，点击「交互>点击事件>添加点击事件>显示/隐藏」。
自定义事件名称，目标对象及交互动作设置如下：
| 目标对象 | 交互动作 |
|---|---|
| 柱形图、柱形图标题背景 | 显示 |
| 饼图、折线图、饼图标题背景、折线图标题背景 | 隐藏 |
同理设置另外两个标题组件的事件，选择对应标题要实现显示或隐藏的目标对象即可，这里不再赘述。
3.4 效果预览
3.4.1 PC 端
点击模板右上角「预览」，效果下图所示：
3.4.2 移动端
移动端请自行组合组件并开启 重布局 ，预览方式请参考 FVS移动端预览 ，效果如下图所示：
4. 模板下载编辑
点击下载模板：FVS显示隐藏组件事件.fvs