# 3.1布局和格式

# 概述

（此页面暂无内容）

# 3.1.1 平铺容器

第二章对仪表板页面做了一个初步的介绍，接下来尝试把多张图表添加到一个仪表板中，并进行合理的布局和美化，以达到同时从多个角度分析数据的目的。

资源添加到仪表板中默认布局方式是平铺，如图3-1-1-1，如果资源中带了图例或过滤器，则会为图例和过滤器生成一个垂直容器存放，资源本身还是在平铺容器中，这个资源的平铺容器和图例的垂直容器又是放在一个共同的水平容器中，水平容器则是放在最原始的平铺容器中，从图3-1-1-2可以看清楚此布局方式。

![](/uploads/projects/dashboard/202605/18b136217e2c1c1b.png)

图3-1-1-1 默认平铺布局

![](/uploads/projects/dashboard/202605/18b136217f3a6aa2.png)

图3-1-1-2 资源带了图例后的布局

下面通过双击添加的方式，依次将“全国销售概况”、“各品类市场表现”、“产品等级销售额概况”、“各子品类市场表现”几个资源添加到仪表板操作区。

![](/uploads/projects/dashboard/202605/18b13621803fe168.png)

图3-1-1-3 建立一个含多个资源的仪表板

在创建好的仪表板中，共有4个资源，最右侧一列都是图例。因“各品类市场表现”和“各子品类市场表现”两个资源都带了“区域”图例，可以选择移除一个重复的图例，移除图例的方式和移除资源一致，选中图例，点击右上角的删除按钮即可。此操作对整个仪表板做了适当的简化，以使其清晰整洁，更具可读性。

![](/uploads/projects/dashboard/202605/18b1362181202364.png)

图3-1-1-4 对仪表板图例进行适当简化

经过上一步的操作后，可以看到右侧的两个图例是分别针对“各品类/各子品类市场表现”和“产品等级销售额概况”设置的，因此当前的布局容易产生误解，考虑修改一下各资源的布局。先将“产品等级销售额概况”和“各子品类市场表现”换一个位置，选中“各子品类市场表现”后资源顶部中间的位置会出现一个图标，鼠标选中此图标进行拖动，拖到“产品等级销售额概况”所在的位置，灰色阴影区域即是拖动的目标区域，拖动到完整覆盖“产品等级销售额概况”资源的情况下松开鼠标，两个资源成功互换位置。

![](/uploads/projects/dashboard/202605/18b1362181ff81d2.png)

图3-1-1-5 拖动资源改变位置

改变资源位置后，将产品类别图例拖到产品等级销售概况内部，调整大小，使该图例属于“产品等级销售额概况”这个资源。

![](/uploads/projects/dashboard/202605/18b1362183349916.png)

图3-1-1-6 调整图例产品类别的位置

调整后效果如下，整个资源更加清晰明了，易读性高。

![](/uploads/projects/dashboard/202605/18b13621842e8850.png)

图3-1-1-7 调整后仪表板

在调整布局的过程中可以看到，每个资源的边界位置有虚线进行分隔，鼠标放在虚线上图标会从箭头变成类似“<->”的图标，此状态下拖动可以改变资源的大小，方便调整布局。

在自由仪表板中，每一个元素都会被视为一个独立的区域，不论是图表、图例还是过滤器等，它们都被单独放置在一个虚线框内。因此想要页面清晰易懂，还需要操作者对每一个部分的位置和大小进行灵活的调整，做适当的保留和简化。

# 3.1.2水平/垂直容器

水平/垂直容器的作用是，所有添加到此容器内的资源会横向/纵向平分整个容器，比如先添加一个水平容器，再添加4个资源，可以看到水平容器下的4个资源是横向平分了整个水平容器的，垂直容器同理。

![](/uploads/projects/dashboard/202605/18b136218514dd50.png)

图3-1-2-1 水平容器

如果用户拖动资源后希望重新平均分布各资源，选中水平/垂直容器，右上角有平均分布选项，点击后重新平均分布容器内的所有资源。

![](/uploads/projects/dashboard/202605/18b13621861e6fbd.png)

图3-1-2-2 平均分布

水平容器和垂直容器决定了容器内资源的布局方式，所有资源都只能纵向或横向分隔区域，对资源的限制比较大，没有平铺容器自由，但它们很适合需要规范排版的内容，因此使用时需要对场景做出区分。

# 3.1.3收缩容器

收缩容器比较特殊，它可以收起或展开容器内的资源。

比如在仪表板中先添加一个资源，再添加一个收缩容器：

![](/uploads/projects/dashboard/202605/18b1362186e919a8.png)

图3-1-3-1 添加空白收缩容器

接下来往收缩容器中拖入资源“各品类市场表现”：

![](/uploads/projects/dashboard/202605/18b1362187bbef77.png)

图3-1-3-2 在收缩容器中添加资源

保存该仪表板，保存后预览该仪表板，默认状态下不收缩，但显示收缩按钮：

![](/uploads/projects/dashboard/202605/18b1362188750b9f.png)

图3-1-3-3 不收缩效果

点击收缩按钮效果：

![](/uploads/projects/dashboard/202605/18b136218940c46b.png)

图3-1-3-4 收缩效果

选中收缩容器，在下拉菜单中选择设置样式，设置样式界面有收缩配置可供选择。

![](/uploads/projects/dashboard/202605/18b136218a146ccd.png)

图3-1-3-5 收缩配置

收缩配置中支持自定义上传收缩图标、展开图标，图标的宽高，图标显示位置以及是否要默认收缩，不上传自定义图标时使用系统默认配置图标。

如下是上传了图标并配置默认收缩的效果：

![](/uploads/projects/dashboard/202605/18b136218ad97801.png)

图3-1-3-6 默认收缩并显示展开图标

![](/uploads/projects/dashboard/202605/18b136218b980281.png)

图3-1-3-7 展开后显示收起图标

# 3.1.4浮动布局

当用户新建一个自由仪表板时，布局方式都是默认平铺的，但某些特殊情况下，用户需要更为灵活的设置某些元素的位置，甚至需要某些资源悬浮在其它资源上方时，就需要使用到浮动布局了。

浮动布局有两种方式配置，第一种是在添加的时候就以浮动的方式添加，第二种是添加的时候以平铺的方式添加，添加到仪表板后再改为浮动。

首先介绍如何在添加的时候直接以浮动的方式添加，在工具栏点击“转为浮动”，图标上出现蓝色小勾表示配置成功。

![](/uploads/projects/dashboard/202605/18b136218ca7c0b8.png)

图3-1-4-1 配置浮动添加

配置浮动添加后，尝试添加资源“全国销售概况”，可以发现，资源添加到仪表板操作区的效果和默认平铺添加的效果不一致，资源不会铺满整个操作区，且不在任何容器中，仅仅作为一个独立的元素存在。

![](/uploads/projects/dashboard/202605/18b136218d803626.png)

图3-1-4-2 资源浮动添加到仪表板操作区

第二种浮动布局的方式是把平铺添加的资源改为浮动，先把之前勾选的“转为浮动”配置改回默认值，再添加“全国销售概况”。

![](/uploads/projects/dashboard/202605/18b136218e4c3c6b.png)

图3-1-4-3 平铺添加资源

选中资源“全国销售概况”，右上角下拉操作菜单中第一个选项是“浮动”，点击“浮动”后，资源从平铺转为浮动。

![](/uploads/projects/dashboard/202605/18b136218f1a2d17.png)

图3-1-4-4 平铺资源下拉菜单提供转为浮动按钮

![](/uploads/projects/dashboard/202605/18b136218fdde1d8.png)

图3-1-4-5 资源从平铺转为浮动

如果以浮动方式添加到仪表板操作区的资源比较多，资源之间会出现重叠，在这种情况下可以通过浮动顺序来修改重叠效果。比如浮动添加资源“各品类市场表现”，图形部分和图例部分会重叠显示，不具备可读性，需要调整布局使资源显示更加合理。

![](/uploads/projects/dashboard/202605/18b1362190db4729.png)

图3-1-4-6 浮动添加资源“各品类市场表现”

调整“各品类市场表现”中图形的大小和图例的位置，给图形和图例分别配置绿色和红色的背景色，方便说明浮动顺序的效果。

![](/uploads/projects/dashboard/202605/18b1362191b15626.png)

图3-1-4-7 浮动顺序

浮动顺序有置于顶层、上移一层、置于底层、下移一层四个选项，通过这四个选项可把对应元素移动到用户期望的位置，比如把区域图例置于底层。

![](/uploads/projects/dashboard/202605/18b1362192bf96c2.png)

图3-1-4-8 区域图例置于底层效果

# 3.1.5布局调整坐标

选中一个资源，打开布局选项卡，左上角会显示资源的名称以及资源坐标，包括XY和宽高，XY标识了资源最左上角那个点的坐标，通过XY坐标和宽高可以定位到一个资源。

![](/uploads/projects/dashboard/202605/18b1362193b1143a.png)

图3-1-5-1 资源坐标

平铺容器内的资源XY坐标和宽高都是置灰的，不可以修改，但通过拖动调整资源大小后此处的数值可以更新。

水平容器下的资源可以修改宽，垂直容器下的资源可以修改高，通过直接修改数值来快速修改元素的大小。

![](/uploads/projects/dashboard/202605/18b1362194ac6f62.png)

图3-1-5-2 水平容器下的资源可以修改宽

![](/uploads/projects/dashboard/202605/18b13621958ade34.png)

图3-1-5-3 垂直容器下的资源可以修改高

浮动添加的资源XY坐标和宽高都可以直接修改，浮动资源可以通过修改坐标和宽高快速设置。

![](/uploads/projects/dashboard/202605/18b13621964b1cf0.png)

图3-1-5-4 浮动资源XY坐标和宽高都可以修改

# 3.1.6格式

点击仪表板左侧布局旁的格式按钮，显示设置格式弹框，与仪表板上侧格式效果一致。

![](/uploads/projects/dashboard/202605/18b136219747cc66.png)

图3-1-6-1 格式弹框

【作用范围】

1.  确认（全部）、应用（全部）、恢复（全部）按钮对应该弹框中所有tab页面设置数据，点击应用提示：确认批量修改组件样式吗？

![](/uploads/projects/dashboard/202605/18b1362198ed80f9.png)

图3-1-6-2 批量修改

1.  确认、应用、恢复按钮对应当前tab页面设置数据，点击应用提示：确认修改当前界面的组件样式吗？

![](/uploads/projects/dashboard/202605/18b1362199ef4de5.png)

图3-1-6-3 单个修改