配置容器¶

容器用于在一个组件内组织和展示多个图表。你可以将相关图表归类展示，统一调整布局和样式，并为容器内的图表配置数据筛选和指标筛选。

容器类型¶

容器分为 基础容器 和 阵列容器。基础容器适合在固定区域内组织一组图表；阵列容器适合以相同的图表布局，批量对比多个设备、场站、月份或年份的数据。

基础容器¶

基础容器可将图表放入一个或多个页签中，按照默认设置的页签样式，分为以下类型：

类型	适用场景和展示方式
默认	默认不显示页签切换入口，将容器内图表按网格布局统一展示。
页签	通过页签切换不同组的图表。
按钮	通过按钮切换不同组的图表。
下拉框	通过下拉框选择要展示的图表组。
卡片	通过卡片切换和展示不同组的图表。

五种基础容器共用同一套页签配置，因此可在配置过程中相互切换。选择类型时，请根据终端用户最适合的切换方式决定页签入口的样式。

阵列容器¶

阵列容器会自动平铺多个容器卡片，每张卡片可承载多个图表。它适用于让每个对象使用相同布局进行横向比较，例如按设备、场站或月份分别生成卡片。

前提条件¶

已有页面的编辑权限。更多信息，参见 DTV 权限概览。
已在页面中添加至少一个容器。在页面编辑状态下，将鼠标悬停在容器上并选择左上角的编辑图标，即可打开 容器配置 弹窗。更多信息，请参见在单页应用中添加组件或在仪表盘中添加组件。

配置基础容器¶

基础容器包含 基本选项、容器样式、过滤器设置 和 指标筛选器设置 四个页签。请按以下说明完成配置。

配置基本选项¶

在 基本选项 页签中，分别通过标题、组件和其他配置容器的外观与交互。

标题¶

在标题中，配置容器标题及其展示效果。标题显示在容器左上角，具体操作与图表标题配置相同，参见标题。

配置项	说明
标题内容	设置容器标题文本。
标题布局	设置标题在标题栏中的对齐和排列方式。
标题字体	设置标题的字体、字号、颜色等样式。
标题内边距	设置标题文字与标题栏边缘之间的留白。
标题栏高度	设置标题栏的高度。
标题栏背景	设置标题栏的背景样式。

组件¶

在组件中，配置容器本身的尺寸、网格和视觉样式。具体操作与图表组件配置相同，参见组件。

配置项	说明
组件尺寸	设置容器在页面中的宽度和高度。
组件内边距	设置容器边缘与内部图表之间的留白。
圆角	设置容器边框的圆角效果。
组件装饰	设置容器的装饰元素。
组件背景	设置容器背景。
网格数量	设置容器内图表的网格列数或排列数量。
组件间隔	设置容器内图表之间的间距。
网格高度	设置每个图表网格的高度。

其他¶

在其他中，配置容器的交互方式、渲染策略和辅助信息。

配置项	说明
标题交互	为容器标题配置交互动作，具体操作参见左侧标题交互。
最大化组件	启用后，终端用户可将容器全屏显示。
自定义交互	为容器添加展示方式、触发动作、跳转方式和 URL 等交互动作，或通过 SDK 派发触发全局变量的更新。当终端用户点击容器标题或自定义区域时，可将当前卡片/容器的数据标识（如 site_id）赋给全局变量，进而驱动容器外部的其他图表或面板发生数据联动。
渲染方式	设置容器内页签的渲染时机：直接渲染会同时渲染全部页签；延时渲染会按设定的时间间隔依次渲染；点击渲染仅在用户打开对应页签时渲染。页签较多或图表较复杂时，可优先使用延时渲染或点击渲染以缩短首次加载时间。
标识码	设置容器的唯一标识。通过 DTV SDK 从外部派发事件时，只有标识码匹配的组件会响应。
描述	添加容器说明；终端用户将鼠标悬停在容器标题上时可查看该说明。

配置容器样式¶

在 容器样式 中，配置图表页签的组织方式、切换入口和视觉样式。

配置项	说明
隐藏页签	隐藏页签切换入口。启用后，页签名称和页签展示方式不再对终端用户显示；终端用户仍可通过过滤器或导航器切换页签。
页签	选择 + 添加创建页签，并为每个页签设置名称。将图表放入不同页签后，终端用户可按页签切换图表组。
页签展示方式	设置页签的显示和切换规则。选择默认配置时，可指定页面初次打开且未应用任何筛选时展示的默认展示页签；选择关联导航器时，可根据导航器参数值展示对应页签。例如，导航器参数“时间间隔”为“日”时展示页签 1，为“月”时展示页签 2，无需手动切换页签。更多信息，参见组件联动导航器。
页签样式	设置页签入口的展示方式和位置。选择按钮或卡片时，还可设置页签尺寸、颜色和字体等样式。
页签字号	设置页签名称的字号。
隐藏子组件标题	隐藏容器内所有图表的标题，以减少重复信息并节省展示空间。

配置过滤器¶

容器过滤器以筛选控件的形式显示在容器右上角，用于将用户选择的条件传递给同一容器内的关联图表。它不会自动筛选图表；必须为需要联动的图表配置 图表刷新条件，才能在用户切换选项后刷新对应数据。

按以下步骤添加容器过滤器：

进入 过滤器设置 页签，选择 添加过滤器。
配置过滤器的基本信息：
- 标题：设置终端用户看到的过滤器名称，例如“场站”或“时间粒度”。
- 键值：设置过滤器在配置中的稳定标识，例如 site_name。键值不会作为界面标题显示，也不会直接决定图表的筛选结果；实际筛选由用户选中的 下拉选项值 和图表的 刷新条件 共同决定。建议使用含义明确且不易变更的名称，便于区分和维护多个过滤器。
- 隐藏：隐藏过滤器标题，仅保留筛选控件。空间有限且筛选器含义已足够明确时可使用此选项。
- 类型：选择筛选控件类型。不同类型需要配置的内容可能不同。选择 多选下拉 时，未设置标题的控件显示“请选择”；设置标题后，控件显示该标题。
选择 配置过滤器，设置下拉选项的来源和默认行为。
- 在 下拉选项来源 中选择一种来源：
  - 自定义：选择 + 添加，逐项填写 下拉选项展示名称 和 下拉选项值。展示名称是终端用户看到的文本；下拉选项值是传递给图表刷新条件的实际值。二者可以相同，也可以不同，例如展示“东区”而传递 east。
  - 源自数据源：选择用于生成选项的 数据源 和 数据集；再分别选择作为 下拉选项展示名称 和 下拉选项值 的数据字段。
- 如需在过滤器请求数据时同时传递其他字段，请在 附加请求数据项 中添加数据项。例如，在下拉选项异步请求中需要附加上下文参数，避免拉取到全量无权限的数据。
- 勾选 展示全部选项 后，控件中会增加“全部”选项，供终端用户恢复查看全部数据。
- 在 默认选项 中选择过滤器首次加载时默认选中的选项。
在 图表刷新条件 中，配置哪些图表响应此过滤器，以及如何使用所选值筛选数据：
- 在 刷新的组件 中选择需要联动刷新的图表；已选图表会以标签形式列出。
- 逐个展开图表的 刷新条件，选择 图表内数据项、条件（运算符）和 下拉选项值。这三项共同定义过滤规则。运算符说明请参见运算符。例如，为“用能情况”图表设置 图表内数据项 为“场站名称”、条件为“=”。当终端用户在过滤器中选择某个场站时，该图表只显示“场站名称”等于所选下拉选项值的数据。
选择确定返回容器配置弹窗，并根据需要继续调整过滤器字体等样式。
如需让终端用户快速取消已选条件，请启用 一键清空，在过滤器中显示 × 清空按钮。

配置指标筛选器¶

指标筛选器用于控制终端用户在容器内查看哪些 指标数据项，例如“告警数量”或“已结束告警累计持续时间”。它与容器过滤器的作用不同：容器过滤器按场站、时间等条件筛选数据记录；指标筛选器用于切换或隐藏要展示的指标。

按以下步骤配置指标筛选器：

进入 指标筛选器设置 页签。
在 指标筛选器 中选择筛选方式：
- 单选下拉：终端用户一次只能选择一个指标。适用于需要在同一图表位置切换查看不同指标的场景。
- 多选下拉：终端用户可同时选择多个指标。适用于需要并列比较多个指标的场景。
启用后，容器右上角会显示指标筛选入口。终端用户打开入口后，可按所选方式选择指标；其选择结果会被保存，并在再次进入页面时保留。
在 指标分组 中，按业务含义组织可供选择的指标。选择 + 新增分组 后，在每一行完成以下配置：
- 左侧输入框：输入分组名称，例如“告警指标”或“处理时长”。该名称用于帮助终端用户理解同组指标的业务含义。选择地球图标可为分组名称配置国际化文本。
- 右侧下拉框：选择一个或多个属于该分组的指标。已选指标以标签形式显示；只有加入分组的指标才会出现在终端用户的指标筛选入口中。
- × 图标：删除不再需要的指标分组。
例如，可创建“告警指标”分组，并选择“告警数量”和“已结束告警累计持续时间”；终端用户即可在同一分组下按单选或多选方式查看这些指标。
选择确定保存配置。

../_images/container_filter_measurement.png

在基础容器中添加图表¶

将容器添加到页面或面板后，你可以通过以下步骤，将图表添加到该面板中的容器里：

选择要添加的图表，点击图表左上方的 添加到容器 按钮。
选择容器与容器页签。注意：在单页应用中，仅可将图表添加到同一面板的容器中。

将图表从容器中移出¶

将鼠标移动到要移出容器的图表上，点击图表左上方的 移出容器 按钮，可以将图表移出它所在的容器。

配置阵列容器¶

阵列容器包含 基本选项、阵列设置、卡片样式、容器样式 和 过滤器设置 五个页签。阵列设置 用于确定生成哪些卡片及每张卡片对应的数据；卡片样式 用于配置卡片内组件的布局和展示效果。

配置基本选项¶

在 基本选项 页签中，配置阵列容器的标题和辅助说明。

配置项	说明
标题	设置阵列容器标题文本。
隐藏标题	不展示容器标题。
标题字体	设置标题的字体、字号、颜色等样式。
描述	添加容器说明，终端用户将鼠标悬停在容器标题上时可查看该说明。

配置阵列设置¶

在 阵列设置 页签中，先选择卡片的生成方式，再配置卡片的排序、数据筛选和标题跳转。

根据选择的 阵列方式 不同，阵列设置分别如下：

选择 数据源 时，按以下说明配置用于生成卡片的数据：

配置项	说明
数据源	选择用于生成容器卡片的数据源。
类别	选择数据源中的类别。
阵列字段	选择用于生成卡片的字段。该字段的每个不同取值会生成一张卡片，并作为卡片名称。例如，选择“场站名称”后，系统会为每个场站名称生成一张卡片。
排序字段	设置卡片按指定字段的默认顺序、升序或降序排列。
标题交互	设置每个卡片标题的交互动作，具体操作参见左侧标题交互。
卡片布局	设置每行每列展示的卡片数量。

选择日历时，按时间生成容器卡片，并配置每张卡片代表的时间范围和显示名称：

配置项	说明
时间粒度	设置生成卡片的时间单位，例如日、周、月或年。
显示工作日	设置是否仅显示工作日对应的卡片。
一周起始日	设置日历中每周的起始日期。
日期格式	设置卡片名称中日期的显示格式。
标题交互	设置每个卡片标题的交互动作，具体操作参见左侧标题交互。

如需为容器中的数据配置联动数据源，实现数据与阵列结构的动态绑定和交互响应，可配置 联动数据源：
- 数据源/数据集：指定这些业务数据从哪个后台数据库或 API 接口中获取。
- 数据项：展示在日历单元格上的主要内容，通常选择具体的业务指标或数值，比如：某天的设备故障数、产量、排班人员名单等。
- 起始数据项/结束数据项：用于定义某个业务事件的时间跨度，比如设备维保计划的开始时间到结束时间、工单执行周期等，告诉日历从哪一天开始渲染数据，并持续到哪一天。

配置卡片样式¶

在 卡片样式 页签中，配置卡片内组件的排列方式和卡片外观。

配置项	说明
卡内布局	设置一张卡片内组件的排列方式。
名称字体	设置卡片名称的字体、字号、颜色等样式。
显示阵列名称	控制是否显示卡片名称。
卡片装饰	设置卡片标题装饰、上装饰线、下装饰线、卡片颜色和卡片间距。
组件间距	设置卡片内组件之间的间距。

配置容器样式¶

阵列容器样式的添加和配置方法与基础容器相同，具体操作请参见配置容器样式。

配置过滤器¶

阵列容器过滤器的添加和配置方法与基础容器相同，具体操作请参见配置过滤器。

在阵列容器中添加图表¶

阵列容器中的所有卡片共用相同的组件布局。配置好阵列容器后，按以下步骤为卡片添加图表：

在容器内的第 1 个卡片中选择 + 添加组件。
从 基础组件、自定义组件、组件模板 等标签页中选择一个图表类型。
添加后，自动打开组件配置面板，参见配置图表完成数据和样式配置。

备注

编辑状态仅展示第一张卡片作为配置样例。如需查看所有卡片及其实际数据，请选择预览，或在发布后的页面中查看。