点击单元格切换Tab标签页

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

1.1 版本

1.2 预期效果

自定义按钮切换Tab页 中，介绍了如何使用多个标题组件通过 JS 切换 Tab 页，但当 Tab 页较多时，该方案需要写多个 JS 代码，比较麻烦。

因此，本文将介绍如何通过表格单元格的扩展，通过点击单元格切换 Tab 页。效果如下图所示：

1.3 实现思路

在 表格组件 中，列出「标签页索引」及「Tab标签页」的关系，给单元格添加 JavaScript 类型的 超级链接，通过传参给 showCardByIndex() 接口展示对应的 Tab 标签页。

2.1 新建模板

1）点击设计器左上角「文件>新建可视化看板」，创建一张空白看板。如下图所示：

2）根据实际需要自定义可视化看板名称、画布大小、模板样式，点击「创建看板」。如下图所示：

2.2 设置 Tab 组件

1）点击模板左上角的「其他>Tab」，即可向画布中添加一个 Tab 组件。如下图所示：

2）点击 Tab 组件右上角的「+」按钮再添加两个标签页。如下图所示：

3）向 3 个标签页中分别拖入图表组件并调整组件位置和大小。以 标签页1 为例，如下图所示：

4）选中右侧 Tab 列表中的 Tab 组件，取消勾选「显示切页按钮」。如下图所示：

2.3 准备数据

1）新建 内置数据集 Embedded1 ，设计表的两列分别为「标签页索引」和「Tab标签页」。

2）插入三行数据，标签页索引 从 0 开始，内容为「0、1、2」，Tab 标签页 的内容为「标签页1、标签页2、标签页3」。如下图所示：

2.4 设置表格组件

1）添加一个表格组件到画布中，点击「编辑组件」进入表格编辑界面。如下图所示：

2）A1、B1 单元格输入文本内容，A2、B2 单元格拖入相应字段。如下图所示：

3）选中 B2 单元格，点击右侧「超级链接」，添加一个 JavaScript 脚本类型的超链。

4）添加一个参数 a，参数值选择公式，输入 A2 ，再输入 JavaScript 脚本。如下图所示：

注：首次设置超链后单元格样式改变，可自行修改。

JavaScript 脚本如下所示：

var b=Number(a); // 将参数 a 转化为数值类型，赋值给 b
duchamp.getWidgetByName("Tab1_页面1").showCardByIndex(b); //设置 Tab1_页面1 展示第 b 个标签页

4）可根据实际情况设置单元格边框、字体等样式，设置完成后，点击表格编辑界面左上方「返回可视化看板」返回看板。

2.5 效果预览

2.5.1 PC 端

保存模板，预览效果如 1.2 节所示。

2.5.2 移动端

预览方式请参考 FVS移动端预览 ，效果如下图所示：

点击下载模板：点击单元格切换Tab标签页.fvs