布局容器

1. 简介

1.1 功能简介

容器也就是画布，容器布局可以将多个图表组件放在同一个画布里作为一个整体去进行图表布局。

1.2 应用场景

一些同类型的数据分析需要作为一个整体去查看以及布局等。

如，销售指标相关需要放在一个画布中统一查看与管理。

1.3 预期效果

如下图，将销售简报相关数据，集中放在一个布局容器中进行展示：

2. 设置步骤

点击安装模板 CRM客户管理套件，本文将根据模板中的示例数据进行讲解（注：所有应用中的仪表盘中均可使用布局容器组件）。

2.1 创建仪表盘

安装模板中，在模板中新建一个仪表盘，如下图所示：

2.2 新建布局容器

在仪表盘设计界面，可以点击「布局容器」进行添加。如下图所示：

2.3 布局容器设置

2.3.1 重命名

布局容器添加后，根据业务需要，对布局容器进行重命名。如下图所示：

2.3.2 隐藏/显示标题

布局容器的标题支持设置是否显示：

2.4 多标签页

2.4.1 开启多标签页

在布局容器组件的编辑界面可以开启标签页，开启后可添加多个标签，每个标签页中均可放置多个图表，相当于多个布局容器的组合。如下图所示：

2.4.2 多标签页样式

开启标签页后，可切换标签页的展示样式，简道云提供了下图所示的 4 种预设样式，可以根据仪表盘设计需要自由选择。

2.4.3 自动轮播

多标签页开启后，支持对多标签页设置自动轮播及轮播间隔时间。如下图所示：

自动轮播的效果如下：

2.4.4 重命名/排序/删除

添加的多标签页支持以下操作：

2.5 添加图表/组件

为布局容器添加需要的图表/组件。可以直接重新创建图表/组件拖入容器内，也可以从已创建的图表/组件中进行添加。

2.5.1 直接创建图表/组件

支持以下方式添加：

以统计表的创建为例，选择「统计表」直接拖入「布局容器」中，设置数据源后，进入 图表 设置界面。如下图所示：

图表的具体设置不再赘述，可以参见文档 图表 ，每个图表组件的设置均有详细的操作说明。

2.5.2 从已有的图表/组件添加

已有图表的添加需要在选中图表后点击「移动」按钮，然后移动至需要添加的画布中：

如果布局容器开启了多标签，需要进一步选择具体的标签来移动：

2.6 隐藏布局容器

当布局容器中的图表/组件均可以隐藏时，可以直接对布局容器直接隐藏，同时可以在「隐藏的图表/组件」中找到并再次展示，操作步骤如下：

2.7 设置布局容器尺寸

2.7.1 尺寸要求

布局容器尺寸支持自定义设置，尺寸要求如下：

2.7.2 尺寸设置

1）电脑端尺寸设置

电脑端布局容器尺寸可以手动调整，也可以点击左上角的「调整尺寸」按钮进行调整。具体设置如下图所示：

2）移动端尺寸设置

2.7.3 尺寸规则

1）布局容器内的图表/组件尺寸调整同布局容器外的默认画布中的尺寸调整；

2）布局容器内的图表/组件宽度调整时的1/2、1/3 等指的是布局容器宽度的 1/2、1/3，而非整个仪表盘宽度的 1/2、1/3。

2.8 布局容器位置调整

2.8.1 布局容器整体调整

1）电脑端

布局容器调整位置时，容器中的图表组件作为整体随布局容器一起调整。

2）移动端

2.8.2 容器内的图表/组件位置调整

1）电脑端

容器内的图表/组件位置调整同仪表盘默认画布中的图表/组件调整。如下图所示：

2）移动端

2.9 布局容器删除

当布局容器中含有图表、组件等内容时，不支持直接删除。

如需删除布局容器，需先删除或隐藏布局容器内的所有图表或组件内容，再进行删除操作。如下图所示：

2.10 效果演示

2.10.1 电脑端

电脑端容器布局的使用效果如下图所示：

您也可以根据自己的实际业务需求配置更多图表/组件。

2.10.2 移动端

3. 注意事项

1）布局容器后台支持编辑、删除，不支持复制。

2）布局容器为空时，可以删除，不为空时，需要删除或隐藏布局容器内的图表/组件后再删除布局容器组件。

3）布局容器中的图表组件支持隐藏，隐藏的限制同：图表/组件隐藏。

4）添加至布局容器中的图表/组件不支持直接拖拽出布局容器，需选中布局容器内的图表/组件后，点击左上角的「」更换容器。

5）除布局容器组件外，其他所有图表、组件均支持添加至布局容器中。即布局容器之间不支持相互套嵌。

6）布局容器中的图表、组件阴影取消，图表/组件标题居中显示。

7）单个仪表盘最多可添加 100 个图表/组件/工具（仅快捷筛选参与计数），布局容器组件也受此限制。

8）一个布局容器最多可设置 10 个标签页。