仪表板布局
1. 概述
1.1 应用场景
对于已经制作好的可视化仪表板，如果希望进一步调整组件排布方式、页面留白和布局效果，可通过仪表板布局设置完成。
仪表板布局支持自由模式和非自由模式（效率模式），用户可根据页面设计需求选择不同布局方式。
1.2 功能简介
布局模式 | 说明 | 适用场景 |
自由模式 | 可自由拖拽组件，调整组件大小和位置，组件之间允许重叠；支持设置组件叠放顺序 | 适合需要精细化设计、自定义组件位置或制作复杂版式的仪表板 |
效率模式 | 关闭自由模式后进入效率模式。组件采用磁吸布局，拖拽时自动吸附，画布高度会随组件自动扩展；支持设置页面边距和组件间隙 | 适合快速搭建结构规整、组件间距统一的仪表板 |
2. 设置仪表板布局模式
在仪表板编辑页面中，点击画布空白处或选中页面，可在右侧「页面」配置面板中设置布局模式、页面背景、页面边距、组件间隙和移动单位。
2.1 关闭自由模式（打开效率模式）
在仪表板编辑页面中，点击画布空白处或选中页面。在右侧配置面板进入「页面」设置。取消勾选「自由模式 > 开启」，进入效率模式。
仪表板页面中的组件按效率模式排布：组件之间保留间隙，组件自动吸附，且组件之间不能重叠。
配置项 | 说明 |
页面边距 | 控制组件与仪表板页面边界之间的距离，支持分别设置上、下、左、右边距 |
组件间隙 | 控制仪表板内相邻组件之间的距离，单位为 px |
效果如下图所示：
2.2 打开自由模式
关闭「自由模式」后，仪表板进入效率模式。效率模式下支持设置「页面边距」和「组件间隙」，用于快速统一仪表板内组件的排布距离。
在仪表板编辑页面中，点击画布空白处或选中页面。在右侧配置面板进入「页面」设置。取消勾选「自由模式 > 开启」，进入效率模式。
组件之间允许重叠展示，如下图所示：
移动单位：开启移动单位后，移动单位为 5 px，若按住 Ctrl 或者 Cmd 可进行 1px 的微调，如下图所示：
400-111-0890
在线咨询