1 概述
Tab组件主要用于实现同一组件分不同页签展现不同资源的效果，以及跑马灯和自定义下钻的互动效果。Tab页组件包括Tab、跑马灯、下钻3种不同场景展现方式。
2 Tab
1、Tab页支持多个页签，每个页签根据自己的需求放不同的重要信息，通过切换页签的方式满足：当空间不足以展示所有信息时，通过利用页签空间进行完美展示。
2、场景描述：通过1个明细表，1个柱图，1个饼图，显示用户关注的信息，如下图所示：
3、以产品内置Demo资源的“订单模型”作为数据来源。
4、操作步骤
（1）在仪表盘编辑界面中新建一个Tab组件。Tab组件默认有三个页签，可以根据实际需求增加/删减；第一个页签默认内置了一个汇总表组件，可以根据实际需求变换类型。
（2）切换页签1的组件类型为明细表，在数据选择区中，勾选 发货区域 、 产品类别 和 销售量 字段，由系统自动分配到 列 上；或拖拽 发货区域 、 产品类别 和 销售量 字段到 列 。
（3）在页签2中拖拽一个柱图组件，在数据选择区中，勾选 省份 和 销售额 字段，由系统自动分配到 X轴 和 Y轴 上；或拖拽 省份 字段到 X轴 ，销售额 字段到 Y轴 。
（4）在页签3中拖拽一个饼图组件，在数据选择区中，勾选 产品类别 和 销售额 字段，由系统自动分配到 标记 > 颜色 和 标记 > 角度 上；或拖拽 产品类别 字段到 标记 > 颜色 ，销售额 字段到 标记 > 角度 。
（5）在Tab组件的 更多 菜单中默认勾选的是 Tab，所以我们在作普通的Tab时可以不用勾选，当有跑马灯或者下钻的需求时再自行切换。
（6）最终效果如下图所示：
5、如果想要编辑Tab组件内部的组件，可以点击页签选中内部资源，或直接点击内部组件，即可对内部组件进行操作；如果想要编辑Tab组件，可以点击页签空白位置选中Tab组件，如下图所示：
3 跑马灯
1、跑马灯又叫轮播图。当内容空间不足时，使用资源轮播展现的形式能更好地利用报表空间资源。通过轮播的切换形式，增加组件内容资源的丰富性，趣味性。
2、场景描述：用1个明细表和1个柱图显示用户关注的信息，这些信息首尾相连，向同个方向循环滚动。点击图表旁边的切换的按钮，可以切换到下一页签或返回上一页签，页签之间也可以实现自动切换效果。如下图所示：
3、以产品内置Demo资源的“订单模型”作为数据来源。
4、操作步骤
（1）已经准备好了明细表和柱图组件，在仪表盘编辑界面中新建一个Tab组件。
（2）把明细表和柱图组件分别拖拽到Tab组件的页签1和页签2，删除页签3。
（3）在Tab组件的 更多 菜单中勾选 跑马灯 。
（4）最终效果如下图所示：
4 下钻
1、下钻是指在没有层次结构的维度中，通过自定义下钻规则来实现钻取效果。
2、场景描述：点击饼图的“发货区域”扇区，可以下钻到发货区域的明细表，如下图所示：
3、以产品内置Demo资源的“订单模型”作为数据来源。
4、操作步骤
（1）切换页签1的组件类型为 饼图，在数据选择区中，勾选 发货区域 和 销售量 字段，由系统自动分配到 标记 > 颜色 和 标记 > 角度 上；或拖拽 发货区域 字段到 标记 > 颜色 ，销售量 字段到 标记 > 角度 。
（2）在页签2中拖拽一个柱图组件，在数据选择区中，勾选 发货区域 、 产品类别 、 销售量 和 销售额 字段，由系统自动分配到 列 上；或拖拽 发货区域 、 产品类别 、 销售量 和 销售额 字段到 列 。
（3）删除页签3。
（4）在Tab组件的 更多 菜单中勾选 下钻 。
（5）最终效果如下图所示：
5 页签下拉菜单
设置项说明如下：
功能 | 说明 | |
|---|---|---|
页签操作 | 添加 | 添加一个新的页签。 |
删除 | 删除所选择的页签。 | |
页签顺序 | 移至最左 | 将所选择的页签移动到最左侧。 |
左移页签 | 将所选择的页签向左移动一个位置。 | |
右移页签 | 将所选择的页签向右移动一个位置。 | |
移至最右 | 将所选择的页签移动到最右侧。 | |
高级设置 | 在高级设置窗口可自由调整页签顺序。
选择需要调整顺序的页签（可按住 Ctrl 键进行多选），点击顺序按钮调整顺序：
| |
| 作为筛选器 | 将当前的组件设置为筛选器。 | |
| 隐藏标题 | 隐藏页签中组件的标题。 | |
| 复制 | 复制当前的组件到剪贴板中。 | |
| 粘贴 | 将复制的组件在鼠标悬停的位置进行粘贴。 | |
| 删除 | 删除页签中的组件。 | |
移除页签 | 删除所选择的页签。 | |
6 Tab组件样式设置
6.1 Tab页签
Tab页签的设置项包含显示位置、对齐方式、风格、颜色、样式。
6.1.1 显示位置
说明
设置Tab页签的显示位置。默认为居上。
效果
6.1.2 对齐方式
说明
设置Tab页签的对齐方式。默认为左。
效果
6.1.3 风格
说明
设置Tab页签的风格。默认为简洁。
效果
6.1.4 颜色
说明
设置Tab页签的背景颜色。
效果
样式 设置为 自定义 时， 颜色 设置项置灰不可用。
6.1.5 样式
说明
设置Tab页签的宽度、样式以及高亮页签（即当前页签）的样式，包含 默认 和 自定义 两种。
效果
简洁模式，样式选择 自定义 ，其余配置如下：
- 设置页签宽度为“固定宽度”，宽为“80px”。
- 设置页签的字体为“宋体”，字号为”12px“，字体颜色为”#000000“。
- 设置高亮页签的字体颜色为”#D0021B“，字体为”斜体“；边框为”虚线“，线条粗细程度为”2“，线条颜色为”#D0021B“。
卡片模式，样式选择“自定义”，其余配置如下：
- ”设置页签的背景为”图片“，点击按钮
上传图片，图片拉伸方式为“拉伸”。 - 设置页签的字体为“宋体”，字号为”12px“，字体颜色为”#000000“；左右边框为“实线”，线条粗细程度为”1“，线条颜色为”#4A90E2“，上下边框为“实线”，线条粗细程度为”1“，线条颜色为”#4A90E2“。
- 设置高亮页签的颜色为“#F8E71C”；字体颜色为”#D0021B“，字体为”斜体“。
补充说明
1、图片仅支持上传小于或等于10M的文件：小于300kb 直接上传，300kb-10M 会进行压缩，>10M提示不能上传。
2、图片文件格式支持：jpg、jpeg、png、gif、svg。
3、页签背景、单个页签背景和高亮页签背景选择图片时，图片的拉伸方式有：适应、平铺、拉伸、填充。
拉伸方式 | 效果 | 说明 |
|---|---|---|
| 适应 |
| 图片等比缩放，图片的最大边放大到页签最小边时就不再放大，即保持图片比例的同时最大化显示图片。 |
| 平铺 |
| 若图片大小小于页签大小，则图片挨个排列，直到排满整个页签。 |
| 拉伸 |
| 图片不按比例缩放，根据屏幕显示分辨率拉伸。图片占满整个页签。 |
| 填充 |
| 图片等比缩放，按照图片的最小边来适应页签的最大边以达到填充页面效果。如果出现图片分辨率和屏幕的比例不一样的情况，图片会有部分显示不了（超出页签之外）。 |
6.2 高级
高级的设置项包含定时刷新、轮播时间和触摸切换Tab页。
6.3.1 定时刷新
说明
设置Tab组件浏览时刷新数据的时间频度。默认为0秒/次。
效果
设置定时刷新为3秒/次
6.3.2 轮播时间
说明
Tab组件设置为跑马灯时，设置页签的轮播时间。默认为3秒。
效果
设置轮播时间为5秒
6.3.3 触摸切换Tab页
说明
Tab组件设置为Tab和跑马灯时，设置移动端是否可以通过触摸切换Tab页。默认为开启。
效果
设置触摸切换Tab页为开启
7 更多功能
- 更多的组件属性设置项的详细介绍，可参考文档： 组件设置 。
