---
url: /v6.2/dashboard-layout.md
---
# 页面版式以及布局模式

本文介绍页面版式和布局。 页面版式即页面画布模式包含自定义和固定尺寸两种设置方式。 画布布局目前支持多种模式，满足不同场景的需求。

![](/images/dashboard/dashboard-layout-002.png)

> \[!TIP] 注意
> 报表应用不支持设置页面版式以及布局模式

## 页面画布

页面画布模式包括自适应和固定尺寸。 自适应模式使用网格数量进行页面布局， 固定尺寸使用像素进行页面布局。

### 自适应模式

自适应模式使用网格数量来进行页面布局。

![](/images/dashboard/dashboard-layout-001.png)

#### 水平网格数量

支持设置从6到500之间的任意整数值。

#### 垂直网格数

可以使用网格宽高比和自适应设置垂直网格数。

##### 网格宽高比

网格宽高比表示**垂直**网格宽度依赖于**水平**网格数宽度，可设置比值有：

* `1：1`
* `4：3`
* `3：4`
* `16：9`
* `9：16`

当宽高比是`1：1`时，表示垂直网格的宽度和水平网格宽度一样。如果宽高比是`4：3`，表示垂直网格的宽度是水平网格宽度的3/4。

使用网格宽高比时，首先计算根据水平网格宽度计算垂直网格宽度，然后根据垂直画布宽度计算垂直方向上网格数。当画布的水平固定时，网格的大小固定，调整画布垂直高度时，垂直方向网格数会增多，进入画布的控件增多。
![](/images/dashboard/dashboard-layout-003.png)

##### 自适应

自适应表示垂直网格数与水平网格数无关，单独设置，可设置6~400之间的任意整数值。在垂直网格数自适应的情况下，因为一个页面水平网格数和垂直网格数是固定的，所以当画布的水平宽度固定时，调整垂直高度，垂直方向网格数不变，画布内的控件不变，由于网格形状变化，导致控件也会随之变形。
![](/images/dashboard/dashboard-layout-004.png)

水平网格数和垂直网格数设定后，画布就固定了。控件的大小由网格数来确定，最小的控件是1个网格大小。 可以设置网格间隔进行布局细节调整。 制作图表时可以显示网格，方便调整控件位置和大小。

#### 移动端自适应模式

移动端自适应模式下布局方式支持自动和手动两种方式。自动指由系统布局，用户无法移动控件。 手动模式与 PC 端的配置一样，参考相关说明进行配置。

![](/images/dashboard/dashboard-layout-006.png)

### 固定尺寸模式

固定尺寸模式表示页面的尺寸是固定不变的。 针对桌面端以及移动端可以分开设置不同的画布尺寸，预定义尺寸如下图所示，同时根据需求可以设置自定义尺寸。

页面版式为固定尺寸时，需要设置页面嵌入、预览时缩放模式及各种模式下在页面的展示位置（上中下和左中右）。 缩放模式包括：

* 不缩放：展示时不进行缩放，按照设定的尺寸进行展示。
* 全部内容：展示时展示仪表盘全部内容。
* 充满屏幕：展示时仪表盘充满全部屏幕。

![](/images/dashboard/dashboard-layout-005.png)

仪表盘编辑时也可以调整固定尺寸展示模式，可在底部进行缩放、充满画布、显示全部等模式切换，方便用户编辑时查看图表展示效果。

> \[!IMPORTANT] 注意
> 自定义画布尺寸时，建议使用偶数，否则在部分浏览器下可能存在展示问题。
> 允许的画布尺寸最小为 1，最大为 100000。数值越大，页面加载时间越长，且可能导致浏览器无法渲染，请谨慎设置合理的尺寸。

## 布局模式

布局是指画布内控件的布局方式，包括层叠、平铺、碰撞三种模式。

> \[!TIP] 注意
>
> 1. 查询应用只支持 平铺、碰撞 两种模式。

三种模式可任意切换，层叠模式切换到平铺和碰撞模式时，图层将消失，所有控件平铺展开，无法回退，所以层叠模式向其他模式切换时，请谨慎使用。

![](/images/dashboard/dashboard-control-layout-012.gif)

### 层叠

层叠模式是指控件以图层存在，可通过图层叠加实现展示效果，图层之间关系如图所示。

层叠模式将图层一张张叠放来实现控件相互嵌套的合成效果，能制作出复杂场景的展示效果，可以在展示分析数据的同时展示样式更加美观、更加多样化。 如下是通过层叠模式制作出的示例。
![](/images/dashboard/dashboard-control-layout-002.gif)

层叠模式中：

1. 每个控件以图层概念存在，可叠加摆放，可调整图层顺序。
2. 新增的控件、复制控件会展示在当前画布可视范围内。

#### 图层

当控件叠放展示时，可通过图层中的控件列表快速查找和定位控件，对控件进行编辑。

在图层中点击控件时，画布中的控件同时被选中，同理在画布中选择控件时，图层中的控件也会被选中。

![](/images/dashboard/dashboard-control-layout-006.png)

图层中展示了控件列表，控件列表的顺序就是控件图层的上下顺序。图层列表中控件1在控件2列表前面，画布中控件1展示在控件2上方。

#### 排列

当控件通过图层叠放呈现展示效果时，对图层的上下顺序调整是高频操作。

选中控件，点击排列按钮，可以对选中控件进行图层位置顺序进行快速调整，包括置于顶层、上移一层、置于底层、下移一层等操作。
![](/images/dashboard/dashboard-control-layout-003.png)

除了调整图层顺序外，排列中还支持对多控件进行对齐和分布操作。 对齐包括左对齐，水平居中、右对齐、顶部对齐、垂直居中、底部对齐。
![](/images/dashboard/dashboard-control-layout-004.png)

分布包括水平分布、垂直分布。
![](/images/dashboard/dashboard-control-layout-005.png)

### 平铺

平铺模式中控件平铺展示在画布上，每个控件独立占有画布的位置，不与其他控件共享位置。 平铺模式适用于简单业务布局场景。

![](/images/dashboard/dashboard-control-layout-007.png)

平铺模式下：

1. 每个控件单独占据画布的位置，没有图层概念，不能重叠和交叉。
2. 新增的控件、复制控件会添加在画布空余处。
3. 调整控件布局比较简单，通过拖动实现控件位置和大小调整，操作比较简单。

### 碰撞

碰撞模式与平铺模式相似，控件平铺展示在画布上，独立占有画布的位置，不与其他控件共享位置，不同之处在于控件水平方向可自由移动，垂直方向上自动上移，紧挨其他控件。

![](/images/dashboard/dashboard-control-layout-008.gif)

碰撞模式下，每个控件独立占有画布的位置，移动控件可以将其他控件挤压离开原有位置。

![](/images/dashboard/dashboard-control-layout-009.gif)

删除控件时，下方的控件会自动上移。
![](/images/dashboard/dashboard-control-layout-010.gif)

### 多模式共存

[容器](container.md)内控件也支持设置上述三种控件布局，不受父级仪表盘布局影响。当仪表盘和容器设置不同的控件布局时，实现了同一仪表盘中多个模式共存的场景。

如下图所示，整个仪表盘使用平铺模式，某一个局部需要使用层叠模式展示。这种情况下，局部展示效果使用容器来实现。
![](/images/dashboard/dashboard-control-layout-011.png)