1. 概述
在仪表板中,除了可以添加图表和过滤组件等,实现组件交互之外,还能够添加文本、外部链接、图片、web网页。对仪表板的分析内容进行说明、添加标题、补充其他的外部资料等。如果存在较多组件,还支持按照不同的主题,使用多 tab 的形式,在一张仪表板内,分成多页展示。
接下来,我们学习一下,如何将前几章学习的「联动」、「钻取」、「跳转」、「切片筛选」专题制作的组件。串联起来,完成一张完整的仪表板。
2. Tab 组件
2.1 将仪表板分成多页tab
前几章学习并制作的组件,完成后的仪表板如下图所示:
这样显示就很占据篇幅,我们可以对不同的主题,分页展示仪表板。使用 Tab 组件实现。
1)添加「其他组件>Tab 组件」。如下图所示:
2)点击 Tab 组件,调整位置大小,让组件占据一张仪表板页面大小;
点击 Tab 组件内「+」添加 4 个 tab 页,并双击重命名标题,完成后回车:联动、钻取、跳转、数据切片和筛选。如下图所示:
3)然后将每个主题下的组件拖入对应的 tab 页内。完成后,点击页内组件,调整位置,完成后如下图所示:
Tab 组件使用详情可参考文档:Tab组件
2.2 美化 Tab 组件
将组件有序放在 Tab 组件内之后。 FineBI 支持按照自己的喜好美化 Tab 组件的整体样式。
点击 Tab 组件「样式设置」,设置不显示标题、组件背景透明、Tab 样式的风格选择第 2 种、位置居中、调整字体大小,完成后点击「确定」。如下图所示:

3. 文本组件
这样一张交互专题的仪表板就完成了,接下来,我们可以对其添加标题等,进行美化。
3.1 添加标题
例如,添加一个文本组件作为标题。输入文本并调整格式,如下图所示:
文本组件使用详情可参考:文本组件简介
3.2 添加超链
我们还能够在「联动」tab 下,添加「文本组件」,并对文字「➢点击查看帮助文档」添加超链,例如:https://help.fanruan.com/finebi/doc-view-1829.html,如下图所示:
完成后,点击链接,即可实现网页跳转。
4. 仪表板美化
恭喜你!完成了交互专题的学习!
接下来,你可以自己探索美化整个仪表板。
例如,进入组件编辑界面:在「组件样式」中取消显示「标题」、「图例」;下拉分析区域的数值字段,调整数值格式,用「万」为单位显示等。在仪表板编辑界面,也可以调整「仪表板样式」,设置组件圆角等。
大家可以根据自己的兴趣探索复原 demo 中的仪表板:点击查看交互仪表板 demo