全部产品
Search
文档中心

DataV数据可视化:组件画布操作

更新时间:Nov 18, 2024

本文档介绍组件在画布编辑器中的操作方法,包括组件拖拽、组件缩放、组件旋转、操作快捷键等基础功能和批量配置、轮播容器等高级功能,帮助您更加方便快捷地在数据看板中对组件进行操作。

基础功能

操作

描述

拖拽

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

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

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

    说明

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

缩放

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

旋转

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

组件锁定

详情请参见图层管理

组件图层位置移动

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

生成迭代器

详情请参见图层管理

进入蓝图编辑器

进入蓝图编辑器并直接定位到当前组件节点,通过低代码的编辑实现较为复杂的交互效果。

组件隐藏

详情请参见图层管理

组件重命名

详情请参见图层管理

复制ID

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

组件复制

详情请参见图层管理

组件删除

详情请参见图层管理

组件收藏

详情请参见图层管理

缩略图

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

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

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

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

快捷键

画布快捷键

  • 选中:鼠标点击

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

  • 操作菜单:鼠标右键

  • 全局搜索:ctrl/cmd+f

批量配置

操作

描述

批量配置

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

说明

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

1

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

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

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

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

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

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

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

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

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

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

成组操作

操作

描述

组操作

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

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

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

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

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

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

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

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

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

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

  • 3D变换:单击image.png图标,打开组的3D变换功能。

    • 视距:图表透视摄影中的视距设置。通过设置消失点的位置,设置不同的视距参数。

    • 子层级变换配置:包括批量配置和单独配置两种配置模式。选择不同的模式均可设置图表的旋转、缩放和平移参数。

说明

如需要轮播功能,可以单击使用轮播容器,具体操作请参见轮播容器

轮播容器

操作

描述

轮播操作

样式面板

  • 使用轮播容器/解除轮播容器:选择需要轮播功能的组件,右键单击选择对应描述即可。

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

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

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

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

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

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

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

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

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

  • 水平对齐:选择不同的水平对齐方式,包括左侧、居中和右侧。

  • 竖直对齐:选择不同的竖直对齐方式,包括顶部、中间和顶部。

  • 触发方式:图表轮播的触发方法,包括自动触发、事件触发和手动触发。

  • 触发键:自定义设置不同的触发按键,当触发方式选择手动触发时可配置。

  • 播放顺序:图表轮播的播放顺序,包括顺序播放和反序播放。

  • 持续时长:自定义设置每个图表动画的持续时长。

  • 动画设置:包括批量配置和单独配置两种配置模式。选择不同的模式均可设置图表动画的动画类型、动画时长和缩放效果。

    • 动画类型:可选渐隐渐现和移动。

    • 动画时长:自定义设置动画时长。

    • 缓动效果:可选线性、先慢后快、先快后慢和中间快。

  • 开始轮播:单击即可开启轮播功能。

  • 暂停轮播:关机即可暂停轮播功能。

  • 取消轮播容器:单击即可取消轮播功能,返回单个图表状态。

  • 3D变换:单击image.png图标,打开轮播容器的3D变换功能。

    • 视距:图表透视摄影中的视距设置。通过设置消失点的位置,设置不同的视距参数。

    • 子层级变换配置:包括批量配置和单独配置两种配置模式。选择不同的模式均可设置图表的旋转、缩放和平移参数。

高级面板

打开开关,开启组件交互功能。当轮播到某一页时,会抛出临时变量,默认抛出轮播容器的index字段值。具体配置请参见组件交互配置

快捷配置组件列表

组件名称

组件最低支持版本

分类玫瑰图

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