通过一键美化功能,您可以快速调整可视化应用的布局,并通过内置样式丰富可视化应用的内容,快速解决在设计可视化应用时遇到的整体样式配置困难的问题。本文介绍如何使用DataV一键美化功能。
模块配置
一键美化页面提供了选择系统内置的多个配置项。在一键美化页面,您可以设置以下配置项:
整体样式:单击整体样式处,在样式列表中选择一个样式作为可视化应用的整体样式,单击空白处即可完成样式添加。
说明当前整体样式可选20种。
更改整体样式将会覆盖并替换之前的整体样式效果。
大标题:可视化应用内视觉组的大标题样式,单击图标可取消或应用大标题样式。
参数
说明
副标题
打开开关,开启大标题内副标题的样式;关闭开关,关闭副标题。
文本对齐方式
大标题内文本的对齐方式,可选默认对齐、左对齐、居中对齐和右对齐。
二级标题:可视化应用内视觉组的二级标题样式,单击图标可取消或应用二级标题样式。
参数
说明
副标题
打开开关,开启二级标题内副标题的样式;关闭开关,关闭副标题。
文本对齐方式
二级标题内文本的对齐方式,可选默认对齐、左对齐、居中对齐和右对齐。
排除类型
选中被排除的组件类型,该类组件无法配置二级标题样式,可选择排除地图和数字翻牌器两类组件;不选中组件,可视化应用内所有组件统一配置二级标题样式。
说明除地图和数字翻牌器组件类别以外的组件都必须统一选择是否开启二级标题样式。
二级背景:可视化应用内视觉组的二级背景样式,单击图标可取消或应用二级背景样式。
排除类型:选中被排除的组件类型,该类组件无法配置二级背景样式,可选择排除地图和数字翻牌器两类组件;不选中组件,可视化应用内所有组件统一配置二级背景样式。
说明除地图和数字翻牌器组件类别以外的组件都必须统一选择是否开启二级背景样式。
布局设置:设置可视化应用内视觉组的整体布局的样式。
边距:可视化应用内视觉组多种边距样式。
参数
说明
屏内边距
可视化应用内视觉组与画布四周的边距值。
组外边距
可视化应用内视觉组之间的距离。
组内边距
组件与视觉组边框的距离。
对齐阈值:对齐阈值主要用于优化页面布局,调整此处参数使得组件间的对齐关系更加明显。
参数
说明
区域范围-X或Y
X或Y方向的合并阈值,主要用于视觉参考线的合并。当可视化应用中存在两条独立的视觉参考线而导致组件间存在大面积间距时,可以使用该参数进行调整。
吸附范围-X或Y
X或Y方向的吸附阈值,主要用于组件吸附视觉参考线的阈值。当组件附近存在明显的视觉参考线,但组件却没有对齐时,使用该参数进行调整。
维持原组:一键美化在对可视化应用进行布局优化时,默认不考虑应用内组件的成组结构。打开开关时,布局优化时会将可视化应用内已成组的组件作为一个独立的视觉组进行编组。当需要将多个组件使用一个视觉组呈现时,可以将多个组件和一个标题手动编组,并打开此功能开关。
功能示例
图 1. 一键美化前
图 2. 一键美化选择(整体样式)后的默认状态
图 3. 调整(区域范围-Y)参数后的状态
图 4. 调整(吸附范围-Y)参数后的状态
使用流程
- 登录DataV控制台。
在我的可视化页面,使用模板创建PC端可视化应用或单击一个已有可视化应用的编辑。
进入画布编辑器页面,单击编辑器页面上方的图标。
在美化工具箱面板,单击一键美化。
当一键美化功能界面显示未启用时,您可以选择单击图标或页面内的快速开启启用该功能。
说明单击一键美化左侧图标可以切换启用或隐藏该功能。
在一键美化管理页面,配置可视化应用的整体的样式和布局。
在画布中预览一键美化效果,满意后,单击右下方的确认应用。
重要应用效果将覆盖原有可视化应用的配置,并可能对其内部组件进行更改操作,请确定后再进行操作。
可视化应用一键美化功能配置完成后,可预览并发布可视化应用,在线展示可视化应用的一键美化效果。