[]
        
在线Demo 免费试用
(Showing Draft Content)

选项卡

1. 概述

1.1 功能概述

选项卡属于容器类组件,我们可以将多个可视化组件添加到同一个选项卡中。选项卡中还可添加多个标签,您可以在各个标签中添加可视化组件。与容器组件类似,选项卡组件同样支持配置交叉过滤时的影响范围。

PixPin_2025-06-13_09-06-42

2. 操作步骤

本文将指导您在Wyn中创建和使用选项卡。

2.1 前提条件

  1. 数据要求: 已完成数据连接与数据准备,本文将以本地Excel文件缓存数据集为例演示操作流程。

  2. 界面要求: 已进入仪表板设计界面,且仪表板至少已绑定一个数据集/数据模型(如“Excel数据-缓存数据集”)。

2.2 操作步骤

2.2.1 添加组件

  1. 仪表板设计界面最左侧,单击组件按钮展开列表,选择选项卡,按住鼠标左键将其拖拽至仪表板设计区域,成功添加一个选项卡组件。

    PixPin_2025-06-12_18-50-05

  2. 为选项卡添加组件

    1)通过拖拽操作,可将其他可视化组件(如柱状图)添加到选项卡组件当中或从该选项卡组件中移除。在每个页签中都可添加不同的可视化组件。

    PixPin_2025-06-12_18-51-37

    2)选中组件,绑定数据。

    PixPin_2025-06-12_18-52-34

    type=info

    提示: 选项卡组件无法嵌套,即无法将容器组件及选项卡组件添加到选项卡组件当中。

2.2.2 编辑选项卡组件

2.2.2.1 添加选项卡

  1. 选中组件,单击选项卡组件左上角的加号,来添加选项卡。

    PixPin_2025-06-12_18-55-36

2.2.2.2 删除选项卡

  1. 鼠标悬停在选项卡容器组件的页签上,单击image2018-9-19_13-54-49.png,展开页签上下文菜单。单击删除菜单,删除该选项卡页签。

    PixPin_2025-06-12_18-56-15

2.2.2.3 重命名选项卡

  1. 鼠标悬停在选项卡容器组件的页签上,单击image2018-9-19_13-54-49.png,展开页签上下文菜单。单击重命名,弹出重命名对话框。

    PixPin_2025-06-12_18-56-52

  2. 输入新的页签名称,单击“ 确定 ”进行保存。新的名称可使用语言资源

    PixPin_2025-06-12_18-57-30

2.2.2.4 复制选项卡

  1. 鼠标悬停在选项卡容器组件的页签上,单击image2018-9-19_13-54-49.png,展开页签上下文菜单。单击复制,复制当前页签的所有内容,复制出来的新页签将放置在选项卡容器列表的最后。

    PixPin_2025-06-12_18-58-06

    type=info

    提示: 选项卡页签的名称不能与该选项卡组件中其他页签重名。

2.2.2.5 调整大小

与其他组件一样,选项卡组件通过拖拽可调整选项卡的位置及大小。

  1. 移动选项卡位置时鼠标需要放在选项卡顶部区域进行拖拽。

    PixPin_2025-06-12_19-00-17

  2. 直接在边框拖动可以调整容器大小,但内部组件不跟随变化。如需内部组件同比放大或缩小,需要按住CTRL键,再拖拽即可。

    PixPin_2025-06-12_19-00-36

  3. 可通过拖拽来调整标题区域及容器区域的大小。

    PixPin_2025-06-12_19-00-51

2.2.3 组件属性

  1. 选项卡设置完成后,可通过以下属性配置进一步优化组件展示效果:

    属性

    说明

    系统图示

    选项卡样式

    设置选项卡样式,包括显示选项卡、样式、显示位置等属性

    PixPin_2025-06-12_19-01-58

    页签区域样式

    设置页签区域样式,包括圆角半径、内部边距、填充颜色和填充渐变属性

    动画

    设置组件入场动画、延迟和持续时间

    数据交互

    配置组件名称、过滤范围、自动切换选项卡和选项卡切换动画属性

    标题

    组件标题的样式属性

    常规样式/悬浮样式/选中样式

    支持常规/悬浮和选中三种状态样式自定义,满足全交互场景的视觉设计需求

    布局大小

    调整组件位置于整体尺寸

    外观样式

    调整组件外观样式

  2. 选项卡额外支持以下独有属性:

  • 选项卡样式: 除了使用系统内置的选项卡样式之外,您还可以使用自定义可视化组件来实现更加多样化的选项卡。比如使用自定义的可视化组件来控制选项卡的切换,此时您可以自由的定义可视化组件的外观,从而实现多样化的选项卡效果。有关具体的实现方法,请您详见 仪表板可视化插件 章节的介绍。

    PixPin_2025-06-17_14-56-04

  • 过滤范围: 在属性设置中,可通过「数据交互>过滤范围」控制选项卡的过滤范围,外部组件可直接影响内部组件,而内部组件对外部的影响由其过滤范围属性控制。

    • 如选项卡过滤范围配置为当前容器,则仅能影响同一选项卡内部同一页签中的组件,不会影响到选项卡外部及其他页签的组。

    • 如选项卡过滤范围配置为整个页面,则会影响到选项卡外部的组件。

      PixPin_2025-06-12_19-13-14

  • 选项卡切换动画: 在属性设置中,可通过「数据交互>选项卡切换动画」设置切换选项卡页时的动画,与PPT页面切换类似,支持滑动/淡入/无效果。

    PixPin_2025-06-12_19-16-47

  • 自动切换选项卡: 默认情况下选项卡的页面是静止的,查看数据时通过鼠标单击进行切换。

    在有些场景下需要自动播放选项卡各个页面的内容,此时就可以开启自动切换选项卡功能,并设置切换间隔。

    PixPin_2025-06-12_19-18-10

    • 下图是开启自动切换并且设置了切换动画为淡入之后的预览效果。

      选项卡切换动画

2.2.4 数据探索与分析

  1. 组件内置丰富的数据探索与分析功能,从多角度挖掘数据价值,为您的可视化分析提供专业级支持。

    PixPin_2025-06-13_09-32-36