数据容器

文档基于数据容器v0.2.3版本

组件说明

数据容器组件主要做数据共享以及数据分发用；

同一组件数据由不同数据源而来时，可通过「数据容器组件」进行数据共享；

多个组件需共用同一数据源，减少重复请求时，可通过「数据容器组件」进行数据分发；

操作步骤

添加数据容器

顶部工具栏「其他」分类下，可选用「数据容器组件」；

数据容器主要做数据获取用，创建后图层做好相应的命名、管理、移出画布即可；

接入数据、定义回调参数

组件创建后可按正常组件操作方法，对组件进行数据源的接入（API或数据库、静态数据均可），多个数据源即需要创建多个数据容器；

数据接入后，交互处需配置对应的数据字段（即回调参数），当有组件需要用到该容器数据时，即通过接收回调的方式进行获取；

使用场景示例

数据分发

当多个组件需共用同一数据源时，通过数据容器组件可进行数据分发；

如下，数据容器接入数据含”text”、”s”两个不同字段，此时两个组件分别用到text和s；

数据容器内包含如下数据

[
	{
		"text": "业务指标A",
		"s": "业务指标B"
	}
]

定义数据字段 data

文字组件分别通过过滤器进行取数；

映射相应数据即可，两文字组件分别映射 text和s字段；

预览可看到，两个文字组件分别接受到了，两个字段对应的数据；

「业务指标A」以及「业务指标B」

数据共享

当一个组件需同时引用不同数据源时，通过数据容器组件可进行数据共享；

如下新增一数据容器，接入了第三个字段id，包含“业务指标C”

依照同样方式，去往样式处定义数据字段，此时数据字段需另起一个，如data2；

此时表格组件需同时 取数据容器1和数据容器2的3个指标数据，即同时展示「业务指标A」「业务指标B」以及「业务指标C」

故表格组件数据源处新建过滤器，先同时接收data、data2两个回调字段；

根据所需的数据格式，进行过滤器函数的编写，

[
	{
		"text": "业务指标A",
		"s": "业务指标B"
	}
]

容器2数据
[
	{
		"id": "业务指标C"
	}
]

此处是需将两个数据容器内的数据合并至同一数组内，故执行以下函数；

let data1 = callbackArgs.data || [];
let data2 = callbackArgs.data2 || [];
let callbackData = data1.map((d, i) => ({...d, ...data2[i]}))

return callbackData;

预览可见表格组件同时获得了3个字段；