本文档介绍DataV一键美化功能的使用方法。通过一键美化功能,您可以快速调整可视化应用的布局,并通过内置样式丰富可视化应用的内容,快速解决在设计可视化应用时遇到的整体样式配置困难的问题。

使用流程

  1. 登录DataV控制台
  2. 我的可视化页面,新建一个可视化应用或者单击一个已有可视化应用的编辑按钮。
  3. 进入画布编辑器页面,单击编辑器页面上方的美化工具箱
    美化工具箱入口
  4. 在美化工具箱面板,单击一键美化

    一键美化功能界面显示未启用时,您可以选择单击未启用图标图标或页面内的快速开启启用该功能。

    说明 单击一键美化左侧显隐图标图标可以切换启用或隐藏该功能。
  5. 一键美化管理页面,按照以下模块配置可视化应用的整体的样式和布局。

    一键美化管理页面包含了整体样式布局设置两个配置模块。具体配置模块详情请参见模块配置

  6. 在画布中预览一键美化效果,满意后,单击右下方的确认应用
    警告 应用效果将覆盖原有可视化应用的配置,并可能对其内部组件进行更改操作,请确定后再进行操作。

    如果您对一键美化效果不满意,可单击取消,取消当前的美化效果。

  7. 可视化应用一键美化功能配置完成后,可预览发布可视化应用,在线展示可视化应用的一键美化效果。

模块配置

一键美化页面提供了选择系统内置的多个配置项。在一键美化页面,您可以设置以下配置项:
  • 整体样式:单击整体样式处,在样式列表中选择一个样式作为可视化应用的整体样式,单击空白处即可完成样式添加。
    说明
    • 当前整体样式可选20种,后续会新增更多整体样式种类。
    • 当可视化应用已经确认应用一个整体样式后,后续在可视化应用内修改配置或添加组件等操作后,如需重新选择配置一个整体样式将会覆盖并替换之前的整体样式效果。
    样式选择
  • 大标题:可视化应用内视觉组的大标题样式,单击眼睛图标图标可取消或应用大标题样式。
    参数 说明
    副标题 打开开关,开启大标题内副标题的样式;关闭开关,关闭副标题。
    文本对齐方式 大标题内文本的对齐方式,可选默认对齐左对齐居中对齐右对齐
  • 二级标题:可视化应用内视觉组的二级标题样式,单击眼睛图标图标可取消或应用二级标题样式。
    参数 说明
    副标题 打开开关,开启二级标题内副标题的样式;关闭开关,关闭副标题。
    文本对齐方式 二级标题内文本的对齐方式,可选默认对齐左对齐居中对齐右对齐
    排除类型 勾选被排除的组件类型,该类组件无法配置二级标题样式,可选择排除地图数字翻牌器两类组件;不勾选组件,可视化应用内所有组件统一配置二级标题样式。
    说明地图数字翻牌器组件类别以外的组件都必须统一选择是否开启二级标题样式。
  • 二级背景:可视化应用内视觉组的二级背景样式,单击眼睛图标图标可取消或应用二级背景样式。
    排除类型:勾选被排除的组件类型,该类组件无法配置二级背景样式,可选择排除地图数字翻牌器两类组件;不勾选组件,可视化应用内所有组件统一配置二级背景样式。
    说明地图数字翻牌器组件类别以外的组件都必须统一选择是否开启二级背景样式。
  • 布局设置:设置可视化应用内视觉组的整体布局的样式。
    • 边距:可视化应用内视觉组多种边距样式。
      参数 说明
      屏内边距 可视化应用内视觉组与画布四周的边距值。
      组外边距 可视化应用内视觉组之间的距离。
      组内边距 组件与视觉组边框的距离。
    • 对齐阈值:对齐阈值主要用于优化页面布局,调整此处参数使得组件间的对齐关系更加明显。
      参数 说明
      区域范围-X或Y X或Y方向的合并阈值,主要用于视觉参考线的合并。
      说明 当可视化应用中存在两条独立的视觉参考线而导致组件间存在大面积间距时,可以使用该参数进行调整。
      吸附范围-X或Y X或Y方向的吸附阈值,主要用于组件吸附视觉参考线的阈值。
      说明 当组件附近存在明显的视觉参考线,但组件却没有对齐时,使用该参数进行调整。
    • 维持原组:一键美化在对可视化应用进行布局优化时,默认不考虑应用内组件的成组结构。打开开关时,布局优化时会将可视化应用内已成组的组件作为一个独立的视觉组进行编组。当需要将多个组件使用一个视觉组呈现时,可以将多个组件和一个标题手动编组,并打开此功能开关。

一键美化功能示例

图 1. 一键美化前
一键美化之前
图 2. 一键美化选择(整体样式)后的默认状态
一键美化选择整体样式后的默认状态
图 3. 调整(区域范围-Y)参数后的状态
一键美化调整(区域范围-Y)参数
图 4. 调整(吸附范围-Y)参数后的状态
一键美化调整(吸附范围-Y)参数后的状态