跳到主要内容
版本：7.0.0

页面组件

1. 概述​

实际的分析场景通常会涉及众多指标，导致仪表板会包含数量庞大的卡片。如果不进行合理布局，用户就难以在混乱的页面中快速捕捉信息。

观远BI在桌面端布局和移动端布局中均可添加页面组件（稍有区别），通过添加页面组件，用户可以将卡片按照一定的层级结构进行归类，再将每一类卡片分别添加到不同的页面组件中，优化页面布局；

而在移动端布局中，除了上述功能外页面组件还可以用来组装筛选器、指标组等，将多个分行展示的卡片在同一个组件中单行展示，使信息呈现更加紧凑、直观。

例如在下图的销售分析看板中，将卡片分为“净利润率”、“毛利润率”、“经营利润率”等多个类别，再将这些类别的卡片分别添加至不同的标签页中。这样的布局不仅使信息更加结构化，也便于用户根据自己的需求快速定位到特定的数据卡片，从而提高了工作效率。

1.png

2. 使用指导​

观远BI同时支持给桌面端布局和移动端布局添加页面组件。

其中，桌面端布局支持添加标签页组件、卡片组组件和小标题，而移动端布局则支持添加九种基础组件，接下来将对页面组件的配置进行详细说明。

2.1. 桌面端​

标签页组件​

标签页，是放置各种卡片的容器，可以在标签页组件中创建多个页签，用于对拥有共同点的数据在不同页签间进行对比分析；同时，也支持在一个页签中添加多个卡片，实现页签切换查看多个卡片组成的不同分析主题。

注意：标签页中卡片的尺寸无法跟随标签页组件尺寸的变化而变化。

2.png

1. 在仪表板页面，点击右上角“新建卡片”下拉框中的“新建标签页组件”按钮。

3.png

2. 在新创建的空白标签页中点击“添加”按钮。在当前仪表板页面中，勾选需要添加到标签页中的卡片，完成后点击确认，即可完成添加。

4.gif

3. 点击标签页组件右上角的“...”按钮，可对标签页组件整体进行布局优化、样式调整等操作。具体的操作项包括：

  • 新建标签页：给标签页组件添加新的空白标签页，用户可在标签页中添加新的卡片；

  • 卡片顺序调整：在卡片顺序调整的状态下，可点击对应卡片将组件移动至鼠标标记的位置；

  • 修改标签页样式：支持调整所有标签页标签的主题色和标签样式，还支持配置标签页组件的标题和背景；

  • 另存为：将标签页组件复制到其他页面；

  • 删除：删除标签页组件；

  • 设置为锚点：将标签页组件设置为锚点，用户可通过在锚点的页面导航栏找到该锚点并快速跳转到此标签页组件。详情请参阅《锚点设置》。

5.png

4. 选中其中一个标签分页，点击标签分页标题右侧的“...”按钮，可对该标签页进行添加卡片、样式调整等操作，具体的操作项包括：

  • 添加：给选中的标签页添加卡片；

  • 样式：设置标签页内容的背景色、背景图片、间距和分割线；

  • 重命名：给选中的标签页重新命名；

  • 复制：将选中的标签页复制副本并保存到同一个标签页组件中；

  • 移动：将选中的标签页移动到其他标签页组件中。

6.png

卡片组组件​

卡片组与标签页的定义略微相似，都是作为盛放众多卡片的一类容器。

与标签页不同的是，在卡片组中，卡片的尺寸能够跟随标卡片组组件的尺寸进行变化

7.png

1. 在仪表板页面，点击页面右上角“新建卡片”下拉框中的“新建卡片组组件”按钮。

8.png

2. 在新创建的空白卡片组点击“添加”按钮，与给标签页添加卡片的步骤相同。在当前仪表板页面中，勾选需要添加到标签页的卡片，完成后点击确认，即可完成添加。

9.gif

3. 点击卡片组件右上角“...”按钮，可对该卡片组进行添加卡片、样式调整等操作，具体操作项和标签页相同，详见上文。

10.png

4. 同时，可以直接将卡片组移动到标签页内。步骤如下：

  • 创建页面所需卡片；

  • 创建卡片组，将同主题的卡片放入同一卡片组；

  • 创建标签页，将多个卡片组放入同一标签页中。

11.png

注意：
1. 标签页里的卡片组仅支持添加当前页面根布局下的卡片，同时，标签页里的卡片组也只支持移出至根布局。
2. 标签页里的卡片组不支持另存为。
3. 暂时不支持移动端，当PC端切换至移动端时，标签页里的卡片组将会被移动至未显示卡片，标签页里的卡片会被保留在标签页中。

小标题​

观远BI支持在看板新增小标题，用以给看板内容进行分区，帮助用户进一步优化看板布局。

1. 点击仪表板页面右上角“新建卡片”下拉框中的“新建小标题”按钮。

12.png

2. 点击小标题右上角“...”按钮，即可对小标题进行命名、样式调整、布局优化等操作，具体操作项包括标签页组件类似，详见上文。

13.png

2.2. 移动端​

注意：
本章节仅涉及移动端基础组件相关的内容，更多有关组件模板、未显示的卡片等移动端布局相关操作，详情请参阅《移动端布局》。

基础组件​

基础组件是用于存放不同类型卡片的容器，用户可通过在移动端布局中添加基础组件，将同类型的卡片进行归类。例如，将页面中的多个筛选器添加至同一个筛选器组，帮助用户根据不同条件对数据进行快速筛选，获取所需信息。观远 BI 在移动端布局配置中内置了9种基础组件类型，包括：

  • 筛选器组：存放筛选器的容器，支持存放多个筛选器卡片；

  • 标签页：存放标签页的容器，支持存放多个页签，每个标签页可以存放多个卡片；

  • 卡片组：存放卡片的容器，支持存放多个卡片；

  • 单指标组：存放指标卡的容器，支持存放多个指标卡；

  • 对比指标组：存放对比指标卡的容器，支持存放多个对比指标卡；

  • 平铺指标组：存放指标卡的模块，支持存放多个指标卡；与3.1中单指标组有些类似，但外形更加美观，自带icon，并且可以拖动以设置大小。

  • 对比单指标组：存放对比指标卡的模块，支持存放多个对比指标卡；与3.1中对比指标组有些类似，但外形更加美观，自带icon，并且可以拖动以设置大小。

  • 主次指标组：存放指标卡的模块，支持存放多个指标卡，且可以将指标卡分为主次指标卡组分别存放。

  • 页头组件：放置在页头的容器，一般用于存放具有汇总性数据或重要性数据的卡片，支持存放多个卡片及指标卡。

1. 将看板切换至移动端布局后，点击右侧菜单栏“基础组件”，其次点击所选组件右上角的“+”即可添加到布局页面中。

14.png

2. 以标签页为例，点击页面布局中的“添加”按钮，跳转到编辑框。勾选所需卡片，点击“确定”。可以看到所选卡片已在标签页组中呈现。

15.gif

如果在页面中添加了平铺指标组，点击布局中的卡片，右侧会显示样式配置栏，可进行如下配置：

  • 一行显示指标数：每行能够显示的指标卡数量。因移动端页面大小受限，所以只能设置2或3；

  • 主指标布局：可以选择指标组内的主指标对齐方式；

  • 对比指标显示：通过选择数字，设置对比指标卡的卡片数；

  • 组内指标卡：点击“编辑”可以对现有内容进行修改；拖动icon前面的“三横”按钮可以进行组内位置移动；点击icon下拉框可以切换icon样式；点击“垃圾桶”按钮，可以删除该指标卡；

  • 主/对比指标卡：可以个性化设置指标卡内的字体样式。

注意：每一种指标卡可以设置的相关配置会有差异，根据页面提示操作即可。

16.png