本教程主要介绍美化工具箱功能的使用方法。通过美化工具箱的智能主题和一键美化功能,可以快速调整可视化应用的配色和布局,解决在设计可视化应用时遇到的整体样式配置困难的问题。

背景信息

DataV小课堂直播视频:美化工具箱直播使用教程

智能主题

  1. 登录DataV控制台
  2. 我的可视化页面,单击您创建的可视化应用项目上方的编辑按钮。
  3. 在可视化应用画布编辑器页面,单击顶部的美化工具箱按钮。美化工具箱
  4. 在美化工具箱页面,选择智能主题 > 我的主题模块,可以查看并使用内置的系统主题。
    说明 鼠标移入系统主题的色块可以查看该色块的色值。
    智能主题
  5. 选择自定义主题模块,单击点击上传风格图,选择本地图片上传。自定义主题上传完成后,单击保存主题,可以保存已定义的主题。保存主题
    说明
    • 支持拖动取色圈在风格图中取色。
    • 保存主题后,在我的主题 > 已保存主题中查看。
    单击确认应用,弹出确认应用主题对话框,单击确定,可以应用已配置的主题。
    注意 点击确认应用后将覆盖原有可视化的应用配置, 请确认后再进行操作。
  6. 您可以单击切换预览不同主题的色板。

一键美化

通过一键美化功能,可以快速调整可视化应用的布局及样式。

  1. 选择一键美化模块,单击隐藏图标或者快速开启按钮,开启一键美化功能。一键美化
  2. 在一键美化样式界面,可以设置相关界面样式。界面样式
    说明
    • 整体样式:内置多种样式,可选择一个为可视化应用的整体样式 。
    • 大标题:可视化应用内视觉组的大标题样式。
    • 二级标题:可视化应用内视觉组的二级标题样式。
    • 二级背景:可视化应用内视觉组的二级背景样式 。
    • 布局设置:设置可视化应用内视觉组的整体布局样式。

滤镜配置

  1. 在可视化应用画布编辑器页面,单击打开工具栏顶部的滤镜配置按钮。
    滤镜配置
  2. 通过控制滤镜配置开关的启用或停用,可以自定义对可视化应用组件的色相饱和度亮度对比度以及透明度等颜色属性进行配置。

实操演示

  1. 在可视化应用的画布编辑器页面,添加需要配置的组件,单击一键美化按钮。
  2. 单击选择我的主题模块,在系统主题列表中单击选择某个系统自带的主题,即可在右侧的画布编辑器内实时预览所选择的主题颜色的效果。预览主题
    您可以通过鼠标移动到不同系统主题的色块上,直接查看色块的色值。
  3. 您也可以在自定义主题模块,上传自定义风格图片,系统会自动通过上传后的图片生成多个风格主题。自定义主题预览
  4. 您还可以在上传的风格图片内通过取色圈选取不同的颜色,更改下方自动生成的主题色值。单击保存主题,保存后在我的主题 > 已保存主题中查看已经保存的主题。
  5. 切换选择一键美化,单击显隐按钮或快速开启按钮,开启一键美化功能。
  6. 单击整体样式配置项,下方会展示所有系统自带的二十多种整体样式效果,当前直播教程默认选择样式1整体样式
  7. 配置一键美化样式内的大标题二级标题二级背景背景设置
    • 大标题:您可以设置副标题的显隐以及文本的对齐方式,包括默认对齐、左对齐、居中对齐、右对齐。
    • 二级标题:您可以设置副标题的显隐以及文本的对齐方式,包括默认对齐、左对齐、居中对齐、右对齐,还可以选中设置排除类型,选中后则可以显示二级标题,目前可以选中设置的为地图数字翻牌器组件。
    • 二级背景:您可以设置排除类型,选中后则可以显示二级背景,目前可以选中设置的为地图数字翻牌器组件。
    • 布局设置:您可以自定义设置视觉组的整体布局效果。
      参数 说明
      边距
      • 屏内边距:调整视觉组与画布四周的边距。
      • 组外边距:视觉组之间的边距。
      • 组内边距:组件到边框的边距。
      对齐阈值
      • 区域范围-X:调整视觉组横向的参考线。
      • 区域范围-Y:调整视觉组纵向的参考线。
      • 吸附范围-X:调整各组件的横向对齐。
      • 吸附范围-X:调整各组件的纵向对齐。
      维持原组 使用一键美化时会打乱原视觉组内组件的布局,打开维持原组开关,可以保持原视觉组的布局样式。
      一键美化配置示例
  8. 配置完成后,单击确定应用,即可应用当前配置完成的组件布局样式,从而达到一键美化画布中整体组件颜色和布局样式的效果。
  9. 单击打开画布编辑器顶部工具栏的滤镜配置开关,开启滤镜配置功能。
  10. 根据您的需求,通过拖拽滑块的方式,调整画布编辑器整体页面内的色相饱和度亮度不透明度
  11. 配置项调整完成后,单击右下角的更新滤镜配置按键。
    滤镜配置
    说明 滤镜的效果可以随时自定义选择关闭或开启。
  12. 本教程通过介绍使用美化工具箱内的一键美化和智能主题功能,再结合工具栏内的滤镜配置功能,即可快速调整一个可视化应用的样式风格效果。
  13. 如果您在使用DataV产品时有其它需要咨询的问题,可以使用钉钉搜索加入DataV数据可视化交流8群:31415580,将会有专业的技术支持同学在线答疑。