1. 概述
适用场景：安装了「FineVis数据可视化」插件的用户，可参考本文了解 FVS 模板的相关功能。
1.1 版本
| 报表服务器版本 | 插件版本 | 功能变动 |
|---|---|---|
| 11.0.6 | V1.8.0 | 所有组件均支持 setVisible、isVisible 接口，可通过 JS 实现对当前页面上组件的隐藏或显示 |
1.2 应用场景
FVS 模板中通常使用 轮播器组件 实现多个组件/组合的切换展示，但是轮播器的样式或者功能在某些场景下存在限制。
这时我们可以通过 JS 实现预览时手动控制组件的隐藏或显示，预期效果下图所示：
1.3 实现方式
通过 setVisible 接口，使用 JavaScript 事件实现。JavaScript 代码示例如下：
注1：仅支持 V1.8.0 及之后的插件。
注2：该接口仅对当前页面组件或组合有效。
duchamp.getWidgetByName("组件名称").setVisible(false); //true 表示设置为可见，false 表示设置为不可见
2. 示例
2.1 新建模板
点击设计器左上角「文件>新建可视化看板」，创建一张空白看板，可自定义名称和尺寸。如下图所示：
2.2 设计组件
添加 标题组件 用于设置点击事件，用于被隐藏或显示的组件可随意添加，本例添加了一个柱形图、一个饼图和一个折线图。
将几个图表重叠在一起，分别设置标题组件的内容为「柱形图、饼图、折线图」，在「组件」面板中可修改组件名称。
点击画布左下角按钮展开「组件图层」列表。如下图所示：
每一个页面的每一个组件都占用一个组件图层。鼠标悬浮于组件对象时，左侧出现一个 图标，表示组件为可见状态；点击图标可切换为 不可见状态，不可见图标会固定显示。
本例将饼图和折线图设置为「不可见」，如下图所示：
2.3 设置 JavaScript 事件
1）选中「柱形图」标题，点击「交互>点击事件>添加点击事件>JavaScript」。
输入事件名称，输入 JavaScript 脚本：
duchamp.getWidgetByName("柱形图").setVisible(true); //设置柱形图可见
duchamp.getWidgetByName("饼图").setVisible(false); //设置饼图不可见
duchamp.getWidgetByName("折线图").setVisible(false); //设置折线图不可见
步骤如下图所示：
2）同理设置另外两个标题组件的 JavaScript 事件：
饼图：
duchamp.getWidgetByName("饼图").setVisible(true); //设置饼图可见
duchamp.getWidgetByName("柱形图").setVisible(false); //设置柱形图不可见
duchamp.getWidgetByName("折线图").setVisible(false); //设置折线图不可见
折线图：
duchamp.getWidgetByName("折线图").setVisible(true); //设置折线图可见
duchamp.getWidgetByName("饼图").setVisible(false); //设置饼图不可见
duchamp.getWidgetByName("柱形图").setVisible(false); //设置柱形图不可见
3）同时选中多个组件，单击鼠标右键，右键点击「组合」即可将组件组合在一起。如下图所示：
注：此步骤是为了让移动端的标题组件和PC端的标题组件一致。
2.4 效果预览
2.4.1 PC 端
点击右上角「预览」。预览效果如 1.2 节预期效果所示。
2.4.2 移动端
预览方式请参考 FVS移动端预览 ，效果如下图所示：
3. 模板下载
点击下载模板：JS实现FVS组件的隐藏或显示.fvs
