Skip to content

页面版式以及布局模式

本文介绍页面版式和布局。 页面版式即页面画布模式包含自定义和固定尺寸两种设置方式。 画布布局目前支持多种模式,满足不同场景的需求。

注意

报表应用不支持设置页面版式以及布局模式

页面画布

页面画布模式包括自适应和固定尺寸。 自适应模式使用网格数量进行页面布局, 固定尺寸使用像素进行页面布局。

自适应模式

自适应模式使用网格数量来进行页面布局。

水平网格数量

支持设置从6到500之间的任意整数值。

垂直网格数

可以使用网格宽高比和自适应设置垂直网格数。

网格宽高比

网格宽高比表示垂直网格宽度依赖于水平网格数宽度,可设置比值有:

  • 1:1
  • 4:3
  • 3:4
  • 16:9
  • 9:16

当宽高比是1:1时,表示垂直网格的宽度和水平网格宽度一样。如果宽高比是4:3,表示垂直网格的宽度是水平网格宽度的3/4。

使用网格宽高比时,首先计算根据水平网格宽度计算垂直网格宽度,然后根据垂直画布宽度计算垂直方向上网格数。当画布的水平固定时,网格的大小固定,调整画布垂直高度时,垂直方向网格数会增多,进入画布的控件增多。

自适应

自适应表示垂直网格数与水平网格数无关,单独设置,可设置6~400之间的任意整数值。在垂直网格数自适应的情况下,因为一个页面水平网格数和垂直网格数是固定的,所以当画布的水平宽度固定时,调整垂直高度,垂直方向网格数不变,画布内的控件不变,由于网格形状变化,导致控件也会随之变形。

水平网格数和垂直网格数设定后,画布就固定了。控件的大小由网格数来确定,最小的控件是1个网格大小。 可以设置网格间隔进行布局细节调整。 制作图表时可以显示网格,方便调整控件位置和大小。

移动端自适应模式

移动端自适应模式下布局方式支持自动和手动两种方式。自动指由系统布局,用户无法移动控件。 手动模式与 PC 端的配置一样,参考相关说明进行配置。

固定尺寸模式

固定尺寸模式表示页面的尺寸是固定不变的。 针对桌面端以及移动端可以分开设置不同的画布尺寸,预定义尺寸如下图所示,同时根据需求可以设置自定义尺寸。

页面版式为固定尺寸时,需要设置页面嵌入、预览时缩放模式及各种模式下在页面的展示位置(上中下和左中右)。 缩放模式包括:

  • 不缩放:展示时不进行缩放,按照设定的尺寸进行展示。
  • 全部内容:展示时展示仪表盘全部内容。
  • 充满屏幕:展示时仪表盘充满全部屏幕。

仪表盘编辑时也可以调整固定尺寸展示模式,可在底部进行缩放、充满画布、显示全部等模式切换,方便用户编辑时查看图表展示效果。

注意

自定义画布尺寸时,建议使用偶数,否则在部分浏览器下可能存在展示问题。 允许的画布尺寸最小为 1,最大为 100000。数值越大,页面加载时间越长,且可能导致浏览器无法渲染,请谨慎设置合理的尺寸。

布局模式

布局是指画布内控件的布局方式,包括层叠、平铺、碰撞三种模式。

注意

  1. 查询应用只支持 平铺、碰撞 两种模式。

三种模式可任意切换,层叠模式切换到平铺和碰撞模式时,图层将消失,所有控件平铺展开,无法回退,所以层叠模式向其他模式切换时,请谨慎使用。

层叠

层叠模式是指控件以图层存在,可通过图层叠加实现展示效果,图层之间关系如图所示。

层叠模式将图层一张张叠放来实现控件相互嵌套的合成效果,能制作出复杂场景的展示效果,可以在展示分析数据的同时展示样式更加美观、更加多样化。 如下是通过层叠模式制作出的示例。

层叠模式中:

  1. 每个控件以图层概念存在,可叠加摆放,可调整图层顺序。
  2. 新增的控件、复制控件会展示在当前画布可视范围内。

图层

当控件叠放展示时,可通过图层中的控件列表快速查找和定位控件,对控件进行编辑。

在图层中点击控件时,画布中的控件同时被选中,同理在画布中选择控件时,图层中的控件也会被选中。

图层中展示了控件列表,控件列表的顺序就是控件图层的上下顺序。图层列表中控件1在控件2列表前面,画布中控件1展示在控件2上方。

排列

当控件通过图层叠放呈现展示效果时,对图层的上下顺序调整是高频操作。

选中控件,点击排列按钮,可以对选中控件进行图层位置顺序进行快速调整,包括置于顶层、上移一层、置于底层、下移一层等操作。

除了调整图层顺序外,排列中还支持对多控件进行对齐和分布操作。 对齐包括左对齐,水平居中、右对齐、顶部对齐、垂直居中、底部对齐。

分布包括水平分布、垂直分布。

平铺

平铺模式中控件平铺展示在画布上,每个控件独立占有画布的位置,不与其他控件共享位置。 平铺模式适用于简单业务布局场景。

平铺模式下:

  1. 每个控件单独占据画布的位置,没有图层概念,不能重叠和交叉。
  2. 新增的控件、复制控件会添加在画布空余处。
  3. 调整控件布局比较简单,通过拖动实现控件位置和大小调整,操作比较简单。

碰撞

碰撞模式与平铺模式相似,控件平铺展示在画布上,独立占有画布的位置,不与其他控件共享位置,不同之处在于控件水平方向可自由移动,垂直方向上自动上移,紧挨其他控件。

碰撞模式下,每个控件独立占有画布的位置,移动控件可以将其他控件挤压离开原有位置。

删除控件时,下方的控件会自动上移。

多模式共存

容器内控件也支持设置上述三种控件布局,不受父级仪表盘布局影响。当仪表盘和容器设置不同的控件布局时,实现了同一仪表盘中多个模式共存的场景。

如下图所示,整个仪表盘使用平铺模式,某一个局部需要使用层叠模式展示。这种情况下,局部展示效果使用容器来实现。

衡石分析平台使用手册