JS实现FVS组件的隐藏或显示

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

1.1 版本

1.2 应用场景

FVS 模板中通常使用 轮播器组件 实现多个组件的切换展示，但是轮播器的样式或者功能在某些场景下存在限制。

这时我们可以通过 JS 实现预览时手动控制组件的隐藏或显示，预期效果下图所示：

1.3 实现方式

 通过 setVisible 接口，使用 JavaScript 事件实现。JavaScript 代码示例如下：

注1：仅支持 V1.8.0 及之后的插件。

注2：该接口仅对当前页面组件有效。

duchamp.getWidgetByName("组件名称").setVisible(false); //true 表示设置为可见，false 表示设置为不可见

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移动端预览 ，效果如下图所示：

点击下载模板：JS实现FVS组件的隐藏或显示.fvs