FVS移动端自动成组

适用场景：安装了「FineVis数据可视化」插件的用户，可参考本文了解 FineVis 的相关功能。

1.1 版本

1.2 应用场景

开启「移动端布局」，将 PC端 模板切换到「移动端」模式时，由于流式布局下组件默认按行排列，原有的组合布局如有重叠组件会被打乱，导致布局错乱。

而 FVS 模板中常存在重叠组件，若不进行成组处理，将无法还原原始排版效果。

V4.1.0 版本，FVS 新增自动成组功能，智能识别并组合重叠组件，配合成组引导提示，帮助用户降低调整操作成本，还原预期布局效果。

1.3 注意事项

• 仅支持开启了「移动端布局」的模板

• 自动成组功能支持撤销还原

• 自动成组无法保证所有模板均可成组，若自动成组后转换效果不符合预期，可撤销自动组合操作，手动进行组合

• 自动成组属于分页功能，一个分页仅支持进行一次自动成组

开启「移动端布局」的任意模板切换至移动端时，会弹出成组引导。如下图所示：

注：勾选「不再提醒」后不会再触发引导。若退出引导时未勾选不再提示，则每次打开新模板，切换时都会触发。

• 若勾选右下角「当前分页启用自动成组」，点击「开始使用」后，模板会按照自动成组规则进行成组，页面配置栏中「自动成组」置灰。如下图所示：

注：点击画布上方「撤销」或使用快捷键，可对自动成组进行一键解组，画布中展示未自动成组效果，「自动成组」按钮支持再次点击。

• 若不勾选「当前分页启用自动成组」，点击「开始使用」后进入移动端布局。可在右侧页面配置面板中点击「自动成组」进行成组。

注：仅支持在当前分页组件 Tab 下调整移动端组件大小、位置等属性前使用自动成组。若调整过移动端组件属性，则「自动成组」灰化。

3.1 组件范围

• 自动成组仅对单个组件生效。

• 组合、容器视为单个组件，其内部组件不参与自动成组。

注：容器类型包括：Tab、绝对画布块、扩展组件。

3.2 逻辑规则

根据组件间是否存在重叠关系进行分组，组件之间的间距小于 0 时即为存在重叠关系。如下图所示：

• PC 端效果

• 移动端效果

注：「自动成组」的组合名称默认为 分组X_模板名称 。

此外，也为一些特殊场景做了规则处理：

1）模板大背景

当模板内含有背景组件，与大部分组件有重叠关系时。若将背景组件和其余组件一同组合，在其余组件会在背景组件中按流式布局规则按行排列，效果较差。

因此增加以下判断规则：

若组件在组件图层中处于最底层 10%，且组件尺寸占据画布 90% 以上，则视为模板大背景，作为单个组件，不参与成组。否则按重叠关系正常成组。

• PC端效果
  

• 移动端效果

移动端模板调整建议：

建议删除原有背景组件，在「页面背景」中重新上传一张适配移动端尺寸的背景图。

大多数 PC 端背景图并不适用于移动端，切换布局后会被强制拉伸至移动端宽度，导致画面失真或变形。因此，为确保展示效果，建议使用专为移动端设计的背景图。

2）重叠面积判断

为避免部分组件有重叠关系，但不应划为同一组合的情况，增加重叠面积判断：

当两个组件的重叠面积超过 60% 时属于一个组合，会自动成组。

若某个组件同时与多个组件重叠（如 指标卡底1 与 底1、底 都有重叠），根据组件图层层级判断，优先与层级更近的组件组合 （指标卡底1 与 底1 组合）。

本文提供示例模板，点击下载后使用：服务指标综合看板.fvs

1）打开示例模板，点击画布顶端工具栏「模板设置>移动端」，勾选「开启移动端布局」。

2）删除「模板背景」组件，详情原因见 3.2 节

3）点击画布右上角，将模板切换至移动端模式后，弹出自动成组引导，默认勾选「当前分页启用自动分组」，点击「开始使用」。如下图所示：

4）设置「页面背景」，本示例以设置为颜色为例。

5）对各组合内组件位置、文字大小等进行调整，以达到更好的展示效果。此处不再赘述，详情请参见：移动端调整建议 。