组件画布操作

本文档介绍组件在画布编辑器中的操作方法,包括组件拖拽、组件缩放、组件旋转、操作快捷键等,帮助您更加方便快捷地在数据看板中对组件进行操作。

DataV提供了组件单独、批量或成组在画布编辑器中的操作功能,包括但不限于组件拖拽、缩放、旋转、批量配置和组容器操作。

操作

描述

拖拽

在左侧组件库中选中一个或多个组件,按住鼠标左键进行拖拽。

  • 选中一个组件:单击某个组件进行选中。

  • 选中多个组件:按住键盘上的ctrl键(苹果键盘使用cmd键)后,单击多个组件进行选中。再次单击对应按键可以取消选中当前组件。

    说明

    您也可以在左侧的图层列表中,使用同样的方法选中一个或多个组件。

缩放

单选或者多选组件后,将鼠标移动到组件的边界框线附近。出现缩放图标后,按住鼠标左键拖拽。

旋转

选择一个或多个组件,将鼠标移动到组件的上边界附近的白点处。出现旋转图标后,按住鼠标左键对组件进行旋转。

批量配置

选中多个组件后,在右侧面板可以做如下批量配置。

说明

批量配置功能为7.0版本产品新增功能,请根据新版控制台环境进行操作。

1
  • 序号1:当选中任意组件时显示。

    • 对齐方式:设置多个组件的对齐方式,包括但不限于左对齐、居中对齐、右对齐、顶部对齐、水平对齐、底部对齐。

    • 均分方式:设置多个组件的均分方式,包括水平均分和竖直均分。

    • 对象位置:设置多个组件左上角顶点相对于画布的位置。

    • 对象尺寸:设置多个组件的宽度和高度值。

  • 序号2:当所有选中的组件都支持快捷配置时显示。具体支持快捷配置的组件请参见快捷配置组件列表

    • 图表颜色:设置多个组件的图表颜色。

    • 图表文字:设置多个组件的图表文字的字体、字体粗细、字号和颜色。

    • 图表信息:设置多个组件的图表信息类型,包括简单、通用和详细。

  • 序号3:即统一样式,当所有选中的组件类型相同且所有组件大版本号一致时才出现。例如,两个都是区间柱状图且均是5.x版本,即可批量设置。imageimage

组操作

  • 成组/解组:详情请参见图层管理

  • 搜索配置:单击样式面板右上角的搜索配置项图标image,可在搜索配置面板中输入您需要搜索的配置项名称,快速定位到该配置项,系统支持模糊匹配。详情请参见搜索配置项

  • 尺寸:包括组件的宽度和高度,单位为px。

  • 定位:包括组件的横坐标纵坐标,单位为px。横坐标为组件左上角距离页面左边界的像素距离,纵坐标为组件左上角距离页面上边界的像素距离。

  • 旋转:以组件的中心为中心点,进行旋转,单位为度(°)。

    • 手动输入角度值,控制组件的旋转角度。

    • 单击image图标,控制组件左右翻转样式。

    • 单击image图标,控制组件上下翻转样式。

  • 不透明度:取值范围为0~1。为0时,图表隐藏;为1时,图表全部显示。默认为1

  • 背景:设置组件成组后容器的背景颜色和背景图片,详情请参见颜色选择器说明

image
说明

组容器无交互事件配置功能。

组件锁定

详情请参见图层管理

组件图层位置移动

在数据看板画布或者图层栏中,右键单击某个组件。在弹出的菜单中,进行置顶置底上移一层下移一层等操作。

生成迭代器

详情请参见图层管理

导出到蓝图/在蓝图编辑器中定位

将组件导出到蓝图编辑器中,通过低代码的编辑实现较为复杂的交互效果。也可以直接定位当前组件在蓝图编辑器的位置。

组件隐藏

详情请参见图层管理

复制ID

复制当前组件ID值,可以在画布编辑器和蓝图编辑器中快捷搜索。

组件复制

详情请参见图层管理

组件删除

详情请参见图层管理

组件收藏

详情请参见图层管理

缩略图

DataV在画布左下角提供了缩略图功能,您可以使用此功能,调整组件在画布中的布局。

  • 拉动缩略图下方的比例尺,或者单击+-调整画布的大小比例。

  • 当组件超出画布大小时,可以拖动缩略图的高亮蓝色边框,定位到组件的位置。image

  • 单击画布左下角的image图标,可以选择关闭或开启缩略图。

快捷键

画布快捷键

  • 选中:鼠标点击

  • 多选:ctrl/cmd+鼠标点击

  • 操作菜单:鼠标右键

  • 全局搜索:ctrl/cmd+f

快捷配置组件列表

组件名称

组件最低支持版本

分类玫瑰图

5.1.3

玉珏图

5.1.4

柱状图

5.1.7

条形图

5.1.5

百分比条形图

5.1.4

百分比柱状图

区间柱状图

5.1.4

瀑布图

5.1.6

对称条形图

5.0.5

气泡图

5.1.6

子弹图

漏斗图

5.0.5

词云

5.0.1

仪表盘

5.0.3

热力图

折线图

5.1.9

饼图

5.1.4

雷达图

5.1.3

旭日图

区域图

5.0.4

数字翻牌器

1.9.7

阿里云首页 DataV数据可视化 相关技术圈