仪表盘布局

最近更新时间:2019-07-24 16:19:06

仪表盘布局,即对仪表盘上所有的组件进行规划和安排。既能清晰体现轻重层次,又能带来愉悦的感官体验。

仪表盘编辑器包含两种布局方式:智能布局和自由布局,其中智能布局为默认布局方式。可通过仪表盘属性切换为自由布局,但暂不支持由自由布局切换为智能布局。在智能布局下,每个组件放在格子中并且按照一定的规则进行排列展示,实现组件之间无空隙快速布局。而自由布局下,每个组件可自由放在仪表盘任意位置,实现仪表盘的完全自定义布局。
目前,智能布局可切换为自由布局,暂不支持自由布局切换为智能布局。

智能布局

进入制作报告模块时,默认采用智能布局。智能布局下,用户在仪表盘中添加新的组件,组件会自动对齐排列,方便用户快速构建标准仪表盘。如果用户需要更灵活个性的仪表盘布局方式,可将智能布局切换为自由布局。但一旦仪表盘使用了自由布局,就无法返回智能布局。

增加组件

在智能布局下,向仪表盘添加组件,产品会根据鼠标位置,触发不同的响应区,将新组件放在不同位置。响应区分别为:整体响应、局部响应、内部响应。

整体响应

智能布局中的组件是按照一个格子一个格子进行排列的,格子之间的间距为固定值12px。当鼠标悬停在格子之间会触发整体插入响应区,如下图所示。

当出现上图中的绿色虚线,插入组件,效果如下图。

整体响应时,组件的比例规则如下:
插入组件的高度 = 组件 A 的高度 + 组件 C 的高度 + 12px(12px表示:智能布局下两个相邻格子之间的间距);
插入组件的宽度:假设仪表盘的宽为1,插入的组件为 D,插入组件 D 之前,组件的宽度之比为 A:B=3:2。插入组件 D 之后,组件的宽度之比为 A:D:B=(2/3)(3/5):1/3:(2/3)(2/5)。

局部响应

下面两种情形会触发局部响应:

  • 当组件的宽度 / 高度小于36px时,鼠标悬停在格子边框向内6px的范围内;
  • 当组件的宽度和高度大于等于36px时,鼠标悬停在格子边框向内12px的范围内。

局部响应的触发效果如下图所示。

当出现上图所示的绿色虚线时,插入组件,效果如下图所示。

局部响应时,组件的比例规则如下:
插入组件的高度 = 组件 A 的高度;
插入组件的宽度与整体插入响应区时的计算方法相同。

内部响应

内部响应又分为左右响应和上下响应。

  • 左右响应
    当鼠标悬停在组件的左右1/3区域时,即下图蓝色区域内,触发组件内部左右响应区。

    内部左右响应的触发效果如下图所示。该图以右侧响应为例。

    当出现上图所示的绿色区域时,插入组件,效果如下图所示。

    内部左右响应时,组件的比例规则如下:
    插入组件的高度 = 组件 A 的高度;
    插入组件的宽度 =(组件 A 的宽度 - 12px)/2;
  • 上下响应
    当鼠标悬停在组件的中间1/3区域时,即下图红色区域内,触发组件内部上下响应区。

    内部上下响应的触发效果如下图所示。该图以上方响应为例。

    当触发上图所示的绿色区域时,插入组件,效果如下所示。

    内部上下响应时,组件的比例规则如下:
    插入组件的高度 =(组件 A 的高度 - 12px)/2;
    插入组件的宽度 = 组件 A 的宽度。

注意:

选项卡组件不会触发组件内部插入响应区,当其他组件移入选项卡组件内部时,默认插入到选项卡内部。

移除组件

产品提供两种方式来移除组件。当用户需要移除组件时,可采取下面其中一种方法:

  • 选中需要移除的组件,在该组件更多菜单中选择【删除组件】。
  • 选中需要移除的组件,通过键盘上的 Delete 键快速移除组件。

当用户需要一次删除多个组件时,需要使用 Ctrl 键同时选中多个组件进行移除。使用 Ctrl+A 键可全选仪表盘中的所有组件,进行移除。
组件移除时,周围的组件会进行智能布局。组件优先以横向扩展,优先左侧的组件补充空白。

注意:

选项卡中的组件通过选项卡组件属性移除时,默认将移除的组件添加到仪表盘最下端。

隐藏组件

隐藏组件,即设置组件在某些情况下对用户不可见。根据隐藏条件,隐藏组件分为组件不可见。

  • 组件不可见
    当组件不可见时,该组件在制作报告模块中显示为置灰状态,在预览或查看报告模块中直接隐藏,其他组件进行智能布局。查看效果与移除组件相同。
    设置组件不可见的步骤如下:
    1. 选中组件,查看右侧面板,选择“设置”。
    2. 在设置页窗口中,展开“可见性”模块选择框中选择“不可见”,设置完成后,该组件在制作报告模块中置灰,如下图所示。


      当预览或查看该仪表盘时,此组件不可见,其余组件进行智能布局,如下图所示。

移动组件

拖拽移动可调整组件的位置。被拖拽移动的组件呈半透明状态,此时拖拽组件到新位置的插入行为与新建组件插入行为一致。
组件拖拽移动到新位置后,原位置相邻的组件变化规则为:

  • 该组件所在行内组件按照比例自适应行宽,非最大高度的组件调整位置后,原有临近的组件高度按比例自适应最大行高。
  • 优先以横向扩展,优先由左侧的组件补充空白。

移动组件后,原位置相邻的组件变化举例:
相邻组件宽度变化:


相邻组件高度变化:


多个组件可同时移动。按住 Ctrl 键,选中多个组件,鼠标拖拽移动即可。同时移动多个组件的时候,插入原则不变,插入组件的顺序按照移动组件之前组件的相对位置:先上后下,再左再右,再上层下层。

调整组件大小

智能布局下,用户可以对单个组件或者一行/列组件进行宽度/高度的修改。当鼠标悬停在组件边界上时,会使鼠标状态变为双向箭头状,此时可以按住鼠标左键向上/下,左/右移动鼠标修改组件的尺寸。当单个组件或一行/列组件的宽度/高度改变时,其他组件的尺寸也会自适应调整。

调整单个组件的宽/高

以调整组件的宽度为例:当鼠标悬停在组件 B 的边框上时,鼠标呈双向箭头状,按住鼠标左键向右移动,调整组件 B 的宽度,B 右侧的组件 C 的宽度也自适应调整。
调整前:

调整后:

调整一行/列组件的宽/高

当组件严格排列在一行或者一列时,当鼠标悬停在行/列的间距处,鼠标呈双向箭头状,同时触发组件的对齐线。
以调整一列组件的宽度为例:按住鼠标左键,向右移动鼠标,对第一列组件(组件 A 和组件 B)宽度进行调整,第二列组件(组件 C 和组件 D)的宽度也自适应调整。
调整前:

调整后:

复制/剪切/粘贴组件

智能布局下,用户可复制/剪切/粘贴单个组件或多个组件。
当用户需要复制/剪切单个组件时,首先选中需要复制/剪切的组件,在该组件上右键选择复制/剪切组件选项,然后在指定区域右键选择粘贴组件(或快捷键 Ctrl+V),则可把当前组件从仪表盘编辑区中剪切/复制到指定仪表盘的指定区域。
当用户需要一次复制/剪切多个组件时,需要使用 Ctrl 键同时选中多个组件,然后使用快捷键 Ctrl+C 复制/Ctrl+X 剪切。或可以使用 Ctrl+A 全选仪表盘中的所有组件进行复制/剪切。
在智能布局粘贴组件时,鼠标单击的位置作为插入位置,插入复制/剪切的组件。当同时粘贴多个组件时,组件插入顺序的原则与移动组件时相同:先上后下,再左再右,再上层下层。粘贴的组件的尺寸与插入位置有关,当插入到新的一行时,会保持原有组件的高度,宽度自适应;当插入的位置不是新的一行时,会根据插入位置自适应组件的高度和宽度。

自由布局

自由布局中,用户可以灵活添加、摆放、缩放可视化组件,制作更为个性化的报告。

增加组件

用户根据选择组件,通过鼠标拖拽,到仪表盘编辑区,即可生成组件。松开鼠标的位置,就是组件在仪表盘上的位置。
例如:在工具栏>更多组件中,拖拽“图表”组件到仪表盘编辑区。

移除组件

当用户移除指定组件时,其他组件的位置保持不变,当前移除组件的位置会空白。
移除组件前:

移除组件后:

组合组件

组合,即把多个组件组合为一个整体。组内成员最外围的边界即为组合整体的边界。自由布局下可选中两个或多个非容器类组件 ( 容器类组件:选项卡 ) 进行组合。组合后,整体可与其他组件(包括组合中的组件)或组合再次组合,无嵌套关系。

注意:

容器类组件(选项卡)及其内部组件不能与其他组件组合。

组合组件在仪表盘上的位置

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

移动组合组件

自由布局下,组合整体可移动到仪表盘任何位置。具体操作及效果,请参考 移动组件
自由布局下,组合内部的组件,可移动到仪表盘上的任意位置。随着组合内部的组件移动,组合整体的边界动态调整。

调整组合组件大小

自由布局下,选中组合整体,可调整组合整体的大小。组合内的所有组件也会同比例放大。具体操作及效果,请参考 调整组件大小
组合内部的组件,可任意调整大小。组合内部的组件调整大小时,组合整体的外围边界也会动态调整。

组合组件的叠放层次

自由布局下,可调整组合整体与其他组件的叠放层次,也可以调整组合中成员的组内层次。
组合整体与其他组件的叠放层次
以下图为例,仪表和图片组件为一个组合组件,文本组件为一个非组合组件。
选中位于上层的文本组件,点开组件更改多菜单选择【叠放层次】>【到底部】。
![](https://main.qcloudimg.com/raw/2d302934846c48cf2b08353f06bf8910.png)
该例中,原本位于上层的文本组件被放置到底层,下层的组合组件被置于上层,挡住了下层的文本组件。如下图所示。

组合内成员的组内叠放层次
以下图为例,仪表和图片组件为一个组合组件。
选中组合中位于上层的仪表组件,在组件更多菜单选择【叠放层次】>【到底部】。

该例中,原本位于上层的仪表组件被放置到底层,下层的图片组件被置于上层,挡住了下层的仪表组件。如下图所示。

在选项卡中添加组合组件

组合组件,和其它组件一样,可以添加到选项卡中。

取消组合

取消组合,即解除多个组件间的整体关系。取消组合时,既可以同时解除一个组合内所有组件的组合关系,也可以只解除组合内的部分组件和其他组件的组合关系。
整体取消组件
选中组合整体,右键【取消组合】,组合内所有组件均解除组合关系。取消组合的组件,组件大小、位置不变。
部分取消组件
选中组合内部单个或多个组件组合,右键【取消组合】,选中的组件脱离组合,其余组件仍维持组合关系。取消组合的组件,组件大小、位置不变。

隐藏组件

隐藏组件,即设置组件在某些情况下对用户不可见。根据隐藏条件,隐藏组件分为组件不可见。

组件不可见

自由布局下,当组件不可见时,制作报告的此组件会显示为置灰状态。预览或在查看报告查看此报告时,不可见的组件所在位置显示空白,其余组件的位置和大小保持不变。组件不可见的设置方法,请参考 智能布局-隐藏组件

移动组件

用户可通过鼠标拖拽来移动组件到编辑区中指定的位置。当组件被鼠标拖拽时会形成半透明状态的组件,用户可把此半透明状态的组件摆放到指定的位置。
移动组件的效果如下图所示:


系统具有辅助对齐功能。当拖拽组件移动的时候,系统会出现绿色对齐提示线,方便用户对齐组件。

组件对齐

两组件或多组件之间可以互相对齐。产品提供对齐按钮和对齐提示线,辅助用户对齐仪表盘上的多个组件。

通过对齐按钮对齐组件

组件右键菜单-对齐中有顶端对齐组件、底端对齐组件、左对齐组件、右对齐组件四个按钮,一键对齐多个组件,如下图所示。

以左对齐为例,为您介绍操作方法:按住 Ctrl 键,选中需要对齐的多个组件,右键菜单-对齐中左对齐组件按钮,如下图所示。

两个组件左端对齐,如下图所示。

通过对齐提示线对齐组件

当拖拽移动组件时,对齐提示线可有效辅助用户对齐组件。对齐提示线分为上对齐提示线、下对齐提示线、左对齐提示线、右对齐提示线、中间对齐提示线、中心对齐提示线。
上对齐提示线如下图所示:

下对齐提示线如下图所示:

左对齐提示线如下图所示:

右对齐提示线如下图所示:

中间对齐提示线如下图所示:

中心对齐提示线如下图所示:

调整组件大小

用户可对组件进行横向纵向尺寸的修改,当鼠标处于调整尺寸状态时可对当前组件的尺寸进行设定。本产品支持从组件的右侧、下侧以及右下角进行尺寸调整。

调整组件大小的同时,绿色对齐线提示线会辅助用户对齐组件。具体对齐方式,请参考 自由布局-组件对齐 章节。
例如:要调整日期组件与表格组件的高度一致。可以拖拽日期组件到如图所示的位置,会显示绿色的对齐线,并且会悬停提示调整后组件的宽和高的像素,W 代表宽,H 代表高。

松手后,日期组件与表格组件对齐且高度一致,效果如下图:

复制/剪切/粘贴组件

将组件复制/剪切后,粘贴到自由布局的仪表盘时,以鼠标单击的位置作为粘贴的起始点,粘贴后,保持原有组件的尺寸和布局不变。