---
order: 3
navTitle: 浮动面板
---
# 仪表板组件-浮动面板

浮动面板可以根据数据浮动出多个面板来，面板横向排列并可以自动绕排，形成一个个数据卡片，如下图：

示例地址：[浮动面板](https://demo.succbi.com/v5/bi/floatpanel)

| 单指标浮动 | KPI+环形图组合浮动 |
| :---------| :-------- |
| ![单指标](./images/2020-04-15-11-57-31.png) | ![组合](./images/2020-04-15-12-12-31.png) |

## 使用浮动面板组件{#use}

浮动面板是根据维度的维项个数浮动出多个子面板，再在子面板中拖入组件进行使用。以显示各价格档次的销售数量为例说明，如下是操作步骤：

1. 在布局中将仪表板拖入到画布中
2. 浮动区域的浮动维度取数：从数据模型中将【价格档次】字段拖入到**浮动面板**>**数据**>**字段**
3. 将图形组件拖入到子面板：将KPI组件拖入到浮动面板的子面板中，再将【销售数量】字段拖入到KPI组件中，具体操作可参考[KPI](../chart/kpi.md)文档完成取数，子面板布局调整可参考[面板](./panel.md)

![设置](./images/2020-04-15-15-11-25.gif)

## 属性介绍{#attribute}

### 组成部分{#component}

浮动面板是根据维度的维项个数浮动出多个子面板，包括：

- 子面板：子面板中可以拖入组件，进行展示。子面板的数量由浮动维度的**查询数据量**而定。子面板的功能与面板功能一致，具体可参考[面板](./panel.md)
- 浮动区域：浮动区域就是浮动面板容器，用于浮动子面板的容器组件

![组成](./images/2020-04-15-10-50-27.png)

### 查询数据量{#query}

查询数据量，是用于控制子面板显示的个数，默认为10，和浮动出的数据量关系如下：

- 当浮动字段数据小于设置值时，查询的数据量按照浮动字段的数据量
- 当浮动字段数据大于设置值时，按照设置值进行查询

可以在**浮动面板**>**样式**>**高级**>**查询数据量**中进行设置。

![查询](./images/2020-04-15-10-55-30.png)

### 内部布局{#inside}

选中浮动区域，拖入浮动字段至**数据**>**字段**，**浮动面板**>**样式**中会出现内部布局属性，用于设置子面板的布局方式等。当未拖入浮动字段时，此选项为隐藏状态，内部布局提供了五个属性设置，分别如下：

- 方向：设置子面板排列方向。提供了两个选项包括纵向和横向。纵向表示纵向浮动子面板，横向表示横向浮动子面板
- 横向对齐：设置子面板横向对齐方式。提供了五个选项，包括左对齐、右对齐、居中、两端对齐、均匀分散
- 纵向对齐：设置子面板纵向对齐方式。提供了五种选项，包括拉伸、顶端对齐、底端对齐、居中、基线对齐（组件中第一行文字的基线对齐）
- 滚动条：设置子面板的滚动条，当子面板数量过多时，可以设置滚动条来进行显示
- 绕排：设置子面板的排列是否绕排。提供了两种选项，包括绕排、不绕排

::: tip
当浮动出的子面板占据空间位置超出了浮动面板的大小，建议设置绕排或者添加滚动条的方式，让超出部分绕排显示或者滚动方式查看。
:::

![布局](./images/2020-04-15-10-57-31.png)

## 常见问题{#faq}

### 如何控制浮动出的子面板个数？{#how}

有两种设置方式，如下：

- 在**浮动面板**>**数据**>**过滤器**/**筛选器**中，设置数据过滤，控制浮动出的数据量，以此来控制子面板的显示数量
- 在**浮动面板**>**样式**>**高级**>**查询数据量**下设置查询数据的数量，以此来控制子面板的显示数量

其中**筛选器**的优先级大于**查询数据量**。

### 子面板布局技巧{#skill}

浮动面板中的组件布局可以参看[面板](./panel.md)进行布局。