# 组件数据与组件事件

在组件数据面板中对组件的数据进行操作,在这里可以将已创建的数据源绑定至组件或者直接编辑使用即视内置的静态数据。每个组件规定数据格式各不相同,可点击组件查看其静态数据。

交互组件在组件数据面板中还可以将其返回值绑定到某个变量,或增加事件监听。

# 返回值

在交互组件中将返回值绑定至变量池的变量中,返回值改变时变量值随之改变,但变量的初始值不会改变。

# 组件数据

类型 说明
静态数据 图表组件和交互组件拥有默认的json格式的静态数据,
您可以直接编辑静态数据改变可视化组件显示。
数据源 已在数据源面板添加过数据源,将数据源绑定至组件。
使用${$ds.数据源名称}绑定数据源,${}让编辑器识别此处为引用数据源,
$ds代

# 事件监听

# 组件数据 (所有组件包含的事件)

  • 返回值改变:组件返回值改变时触发的事件。
  • 组件挂载:组件挂载(组件创建时)触发的事件。
  • 组件卸载 :卸载组件时触发的事件。

# 鼠标事件

  • 鼠标单击:鼠标单击时触发的事件。
  • 鼠标双击:鼠标双击时触发的事件。
  • 鼠标按下:按下鼠标时触发的事件。
  • 鼠标抬起:释放按下鼠标时触发的事件。
  • 鼠标移动:鼠标移动时触发的事件。
  • 鼠标移入:鼠标移入时触发的事件。
  • 鼠标移出:鼠标移出时触发的事件。

# 键盘事件

  • 按键按下:按下键盘键触发的事件。
  • 按键抬起:释放键盘键时触发的事件。

# 组件事件

  • 组件失焦:组件失去焦点时触发。
  • 组件聚焦:组件获得焦点时触发。
  • 下拉框出现/隐藏:组件的下拉框出现/隐藏时触发的事件。

# 事件参数

参数 说明
value 获取组件当前的值。
$element 对元素进行操作。
.changeAttr()方法用来修改元素属性。
.attrs()方法用来获取当前元素属性,调用自身api。
$global 操作编辑器内定义的一些方法。使用$query查询api,$query中的方法:
byConditions()按照条件查找当前画布内的元素。例如$global.$query.byConditions('attrs.x > 10') 查找所有距离左侧距离10px以上的元素。使用以下符号进行查询:=><>=<=!=~~代表约等于,支持进行模糊搜索。$使用正则表达式,如搜索所有name后以数字结尾的元素name $ /\\d$/ig
$vp代表变量池可调用变量池内的变量,$ds是调用某一个数据源。
支持在组件中对数据源进行操作和传值,调用方式$global.$dpFetch(name, data)name代表数据源名称,data为自定义参数。
//$global使用案例

//在组件的事件监听中添加事件,向数据源test中发送交互改变的value值。
funcition onValChange(value,$element,$global){
  $global.$dpFetch('test', value);
}

// 在数据源test中使用configRequest(),获取绑定此数据源的组件传来的数据值并发送请求。
function configRequest({eventData}) {
  return {
    params: {
      filter: eventData
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

提醒

点击了解更多关于数据源使用的知识

# 修改图表静态数据

当您在编辑面板为图表增加了一个新系列,需要将组件数据中的静态数据随之修改。点击重置数据可以将数据还原回默认值。
这里以分组柱形图为例,为其增加一个新系列并修改它的静态数据。