1. 仪表盘布局

仪表盘布局是指画布内控件的布局方式,包括层叠、平铺、碰撞三种模式。 本文详细的介绍各种布局模式。

1.1. 层叠模式

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

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

层叠模式中:

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

1.1.1. 图层

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

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

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

1.1.2. 排列

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

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

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

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

1.2. 平铺模式

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

平铺模式下:

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

1.3. 碰撞模式

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

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

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

1.4. 多模式共存

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

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

1.5. 模式切换

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

results matching ""

    No results matching ""

    仪表盘主题