# 仪表板组件-浮动面板

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

示例地址:浮动面板 (opens new window)

单指标浮动 KPI+环形图组合浮动

单指标

组合

# 使用浮动面板组件

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

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

设置

# 属性介绍

# 组成部分

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

  • 子面板:子面板中可以拖入组件,进行展示。子面板的数量由浮动维度的查询数据量而定。子面板的功能与面板功能一致,具体可参考面板
  • 浮动区域:浮动区域就是浮动面板容器,用于浮动子面板的容器组件

组成

# 查询数据量

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

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

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

查询

# 内部布局

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

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

TIP

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

布局

# 常见问题

# 如何控制浮动出的子面板个数?

有两种设置方式,如下:

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

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

# 子面板布局技巧

浮动面板中的组件布局可以参看面板进行布局。

是否有帮助?
0条评论
评论