Skip to content

数据更新

在 SceneV 中,您可以通过以下两种主要方式来更新图元的数据:

1. 通过绑定数据源字段更新图元数据

您可以为图元绑定特定的数据源字段。当数据源的数据发生变化并推送到前端时,图元的显示内容(如文本、数值、颜色等)会自动进行同步更新。

详细的操作步骤和说明,请点击跳转参考:数据绑定

2. 通过事件交互或者状态场景更新

除了通过数据源被动更新外,您还可以通过配置交互事件或状态场景来主动更新图元数据:

  • 事件更新:通过配置图元的交互事件(如点击、双击、鼠标移入等),触发特定的“动作”(如发送数据、更改属性),从而改变自身或其他目标图元的属性及数据。
  • 状态场景:当绑定的数据发生变化时,结合条件配置,当满足特定条件时(例如绑定的数值大于某个阈值),自动触发动作。

TIP

无论是事件更新还是状态更新都是通过配置动作来实现的。

方法1

通过配置动作,选择更新属性来更新图元数据, 值的来源可以是其他图形的属性,也可以是常量值。

SceneV Preview

方法2

数据更新核心方法

  • id: 图元的id (图元添加到画布中都是生成新的id,所以如果删除了图元后重新添加,id也会发生变化)
  • data: 要更新的数据对象,包含需要修改的属性和对应的值。
typescript

meta2d.setValue({ id: "", data });
// or
context.meta2d.setValue({ id: "", data });


//例如
//更新id为"3232332d"的图元的文本内容为"新的文本内容"
context.meta2d.setValue({ id: "3232332d", {text:'新的文本内容'} })

// echarts更新source数据 假设echarts的id为:43434dd
const newData = [
    {label:'新的标签1',value:100},
    {label:'新的标签2',value:200},
]
context.meta2d.setValue({ id: "43434dd", 'echarts.options.dataset.source':newData })

示例1:通过配置动作,选择发送数据-HTTP来更新图元数据,通过在HTTP的回调中拿到请求返回的数据调用meta2d.setValue手动更新

SceneV PreviewSceneV Preview

示例2:通过配置动作,选择自定义函数来更新图元数据,在JavaScript 代码编辑器中调用meta2d.setValue手动更新

SceneV PreviewSceneV Preview