组件的组合

<< Click to Display Table of Contents >>

当前位置:  设计可视化分析报告 > 可视化组件 > 组件操作与设置 

组件的组合

复制链接

1. 概述

1.1 应用场景

对一些组件进行组合。例如需要通过过滤组件过滤图表的数据,可以将过滤组件和图表组合到一起,方便交互和查看,且在使用手机布局生成移动端报告时,也可实现两个组件合在一起展示。

1.2 功能介绍

组合,即把多个组件组合为一个整体。组内成员最外围的边界即为组合整体的边界。

2. 组合的使用

2.1 组合组件

您可以通过以下两种方式组合组件。

在画布区域进行组合

1)选中多个组件,您可以通过使用Ctrl键选中多个组件或使用鼠标拖拽区域进行多选,使用Ctrl+A可选中报告中全部的组件。

2)右键后弹出选择面板,点击“组合”。

dblayout_grid_component_group

说明:

智能布局下,选中的多个组件需满足构成一个完整的矩形,不满足该条件则不支持组合。

自由布局下,组合不支持组合再组合,只支持一层组合。

组件层级

1)选中多个组件。您可以通过使用Ctrl键选中多个组件或使用鼠标拖拽区域进行多选。

2)在已选中的组件中任意选择一个组件,在右侧点击【更多 > 组合】。

dblayout_grid_component_group_tree

2.2 悬浮组合组件

智能布局下,组合整体默认为固定状态,组合整体状态可修改为悬浮,但组合内的子组件不支持修改为悬浮。

组合组件整体悬浮后组合大小、位置不变,处于布局上层,下层为智能布局的组件,实现自动调整。

具体详见组件的悬浮

2.3 组合组件的叠放层次

智能布局下,您可以调整悬浮状态的组合整体与其他悬浮组件的叠放层次,也可以调整组合中成员的组内层次。

自由布局下,您可以调整组合整体与其他组件的叠放层次,也可以调整组合中成员的组内层次。

具体详见组件的层次

2.4 组合组件在报告上的位置

智能布局下,当悬浮组件与悬浮组件组合时,组合整体仍然是一个悬浮组件,组合前后的组件位置不变;当悬浮组件与固定组件组合时,组合整体作为一个固定组件插入到原固定组件位置。

组合前:

dblayout_grid_component_group_before

组合后:

dblayout_grid_component_group_after

自由布局下,组合前后,组件位置不变。

2.5 移动组合组件

组合整体的移动

无论是固定状态,还是悬浮状态的组合组件,都可以鼠标拖拽移动位置。组合组件的整体移动操作及规则,与其他组件相同。

组合内部组件的移动

若均为悬浮组件,则可以任意移动,组合组件的格子大小会根据内部组件自适应调整,组合整体的边界随着内部组件的移动进行动态调整。

若存在固定组件,内部组件可以在组件整体范围内任意移动,内部组件的大小会根据整体边界自适应调整,如图所示。

dblayout_grid_component_group_move_zoom90

具体详见组件的移动

2.5 调整组合组件大小

组合整体的调整

无论是固定状态,还是悬浮状态的组合组件,都可以调整组合整体的大小,内部组件会根据组合整体格子大小的变化进行自适应。组合组件的尺寸调整操作及规则,与其他组件相同。

组合内部组件的调整

若组合设为悬浮时,则可以任意调整大小,组合组件的格子大小会根据内部组件自适应调整,组合整体的边界随着内部组件的大小变化进行动态调整。

若组合设为固定时,内部组件可以在组件整体范围内任意移动,内部组件的大小会根据整体边界自适应调整,可在组件整体范围内任意调整大小,组合整体的外围边界不会发生变化。

dblayout_grid_component_group_insideresize

具体详见组件的大小

2.6 在选项卡中使用组合组件

当组合组件和选项卡组件同时为悬浮状态,或者同时为固定状态时,可以添加该组合整体到选项卡组件中。

即:添加到选项卡时,如果选项卡为悬浮状态,那么只能添加悬浮状态的组合组件;选项卡为固定状态,那么只能添加固定状态的组合组件。

从选项卡中移出组合时,如果选项卡为悬浮状态,那么脱离的组合组件也为悬浮状态;如果选项卡为固定状态,那么脱离的组合也为固定状态。

2.7 修改组合组件的名称

详情请参考组件重命名

2.9 修改组合组件的可见性

具体详见隐藏组件

2.10 取消组合

取消组合,即解除多个组件间的整体关系。取消组合时,既可以同时解除一个组合内所有组件的组合关系,也可以只解除组合内的部分组件和其他组件的组合关系。

整体取消组合

选中组合整体,右键后弹出选择面板,点击“取消组合”,组合内所有组件均解除组合关系。

dblayout_grid_component_group_cancelall

您也可以在组件层级中,选择想要取消的组在更多中点击“取消组合”。

dblayout_grid_component_group_cancelall_tree

智能布局下,如果组合组件中的子组件均为固定状态且未改变过大小或位置,在整体取消组合后,各子组件恢复到原来固定状态;如果组合组件中的子组件调整过大小或位置,点击“取消组合”,产品会自动补充一个空白组件占位。

dblayout_grid_cancel_group_zoom50

自由布局下,组合内所有组件均解除组合关系,组件大小、位置不变。

部分取消组合

选中组合内部单个或多个组件组合,右键后弹出选择面板,点击“取消组合”,选中的组件脱离组合,其余组件仍保持组合关系。

dblayout_grid_component_group_cancelpartial

您也可以在组件层级中,选择想要取消的单个或多个组件,在更多中点击“取消组合”或将其拖拽移出。

cancelcomponentgriddrag_zoom124

说明:

智能布局下,部分取消组合后的组件将全部成为悬浮组件(即使组合前是固定组件),组件大小、位置不变。

cancelcomponentgridstatus_zoom126