1. 概述
1.1 应用场景
对于已经制作好的可视化仪表板,如果希望进一步调整组件排布方式、页面留白和布局效果,可通过仪表板布局设置完成。
仪表板布局支持自由模式和非自由模式(效率模式),用户可根据页面设计需求选择不同布局方式。
1.2 功能简介
| 布局模式 | 说明 | 适用场景 |
|---|---|---|
| 自由模式 | 可自由拖拽组件,调整组件大小和位置,组件之间允许重叠;支持设置组件叠放顺序 | 适合需要精细化设计、自定义组件位置或制作复杂版式的仪表板 |
| 效率模式 | 关闭自由模式后进入效率模式。组件采用磁吸布局,拖拽时自动吸附,画布高度会随组件自动扩展;支持设置页面边距和组件间隙 | 适合快速搭建结构规整、组件间距统一的仪表板 |
2. 设置仪表板布局模式
在仪表板编辑页面中,点击画布空白处或选中页面,可在右侧「页面」配置面板中设置布局模式、页面背景、页面边距、组件间隙和移动单位。

2.1 关闭自由模式(打开效率模式)
在仪表板编辑页面中,点击画布空白处或选中页面。在右侧配置面板进入「页面」设置。取消勾选「自由模式 > 开启」,进入效率模式。
仪表板页面中的组件按效率模式排布:组件之间保留间隙,组件自动吸附,且组件之间不能重叠。
| 配置项 | 说明 |
|---|---|
| 页面边距 | 控制组件与仪表板页面边界之间的距离,支持分别设置上、下、左、右边距 |
| 组件间隙 | 控制仪表板内相邻组件之间的距离,单位为 px |

效果如下图所示:

2.2 打开自由模式
关闭「自由模式」后,仪表板进入效率模式。效率模式下支持设置「页面边距」和「组件间隙」,用于快速统一仪表板内组件的排布距离。
在仪表板编辑页面中,点击画布空白处或选中页面。在右侧配置面板进入「页面」设置。取消勾选「自由模式 > 开启」,进入效率模式。

组件之间允许重叠展示,如下图所示:

移动单位:开启移动单位后,移动单位为 5 px,若按住 Ctrl 或者 Cmd 可进行 1px 的微调,如下图所示:

