最新历史版本 :仪表板布局 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 版本

FineBI 版本功能变动
6.0-
6.0.11移动端布局优化,详情见移动端布局
6.0.12

移动平台全面优化,详情见移动平台

6.0.13自适应悬浮球优化
6.0.15
支持组件成组,多组件进行拼接,组合内调整布局样式
6.0.16
支持调整画布大小,新增样式自定义
6.0.17合计行/列配置页面布局优化, 图表自适应优化
6.1.6
支持设置组件宽度

1.2 应用场景

对于已经制作好的可视化仪表板,希望仪表板能自由设置布局,并可以进行布局的美化。

1.3 功能说明

FineBI 的仪表板布局方式包含网格布局、自由布局。

默认即为网格布局,可设置组件间是否有间隙;自由布局通过设置组件悬浮实现。

  • 网格布局

1542965251DqKjSiyg.png

  • 自由布局

1.png

2. 网格布局编辑

网格布局只支持纵向延伸,不支持横向延伸。网格布局把平面按规则划分成多个单元格,每个组件占据一定数量的单元格,当屏幕大小发生变化时,随着屏幕实际宽高划分单元格,组件相对整个屏幕的比例不变。

在默认布局方式下,组件之间有间隙,可调整为无间隙,始终吸顶放置,组件之间不能重叠放置。

2.1 设置组件间隙

进入仪表板编辑界面,默认的网格布局中,组件间都是有固定间隙的,如下图所示:

点击仪表板样式>自定义,在仪表板>组件间隙处,可以设置组件间隙,例如设置间隙为「2」,组件间隙会变小,效果如下图所示:

2.2 调节组件大小

  • 可以通过拖拽自由调节组件大小,如下图所示:

44.gif

  • 若是希望快速设置组件尺寸为屏幕宽度的固定占比 ,可以直接使用「设置宽度」功能。

比如用户希望三个过滤组件宽度相同,且填满屏幕,可设置过滤组件的宽度为屏幕的 1/3。点击下拉,选择「设置宽度」,如下图所示:

45.gif


3. 自由布局编辑

自由布局通过设置组件悬浮实现,为组件勾选悬浮后,可自由拖动摆放位置及大小,支持设置组件叠放时的顺序调整。

3.1 设置组件悬浮

若想要仪表板布局自由设置,自由拖拽组件之间的顺序与位置,可选中组件,下拉设置「悬浮」,如下图所示:

3.2 调整组件位置

悬浮后,该组件可以随意拖拽至任何位置,可随意设置组件大小,不受网格布局平面划分规则的限制。如下图所示:

3.3 设置组件叠放顺序

两个同时设置悬浮的组件可以通过设置顺序:置于顶部/置于底部,来调整组件显示,如下图所示:

3.4 调节组件大小

悬浮组件调节大小方式和网格布局相同,详情请参见本文 2.2 节。