组件数据接入
组件对接数据配置开关
组件的数据可来自于静态数据或通过数据集获取,在“{Widget}”.editor.js文件中,可配置组件接入的数据。当识别到组件propertiesConfig中存在dataSetting类型的配置项时,默认组件需要对接数据集。配置示例如下:
propertiesConfig: [{ type: 'dataSetting', name: 'selectDataConnector', mapping: { label: { keyTitle: { zh_CN: '选项标签展示值', en_US: 'Option label' }, limitNumber: '1', type: 'any', }, value: { keyTitle: { zh_CN: '选项值', en_US: 'Option value' }, limitNumber: '1', type: 'any', required: true, }, }, }, }]
字段 |
类型 |
是否必填 |
示例 |
说明 |
---|---|---|---|---|
type |
String |
是 |
type: "dataSetting" |
dataSetting为数据集类型。 |
mapping |
Object |
否 |
数据集数据拖拽的配置项。 |
|
name |
String |
是 |
selectDataConnector |
数据集实例的唯一标识。 |
字段 |
类型 |
是否必填 |
示例 |
说明 |
---|---|---|---|---|
type |
String |
是 |
type: "value" |
根据type校验拖入字段,为枚举值。
|
keyTitle |
Object |
是 |
keyTitle: { zh_CN: "X轴数据", en_US: "X axis Data" } |
标题,需要国际化。 |
limitNumber |
String |
否 |
type: '1' |
拖拽字段个数限制。
|
required |
Boolean |
否 |
required: true |
是否必须配置。 |
组件使用数据集
- 数据集实例获取。
组件代码中可使用如下API,来获取对应的数据集实例。
ConnectorIns: thisObj.getConnectorInstanceByName('SelectDataConnector') || ''
- 调用数据集,获取数据。
thisObj.callFlowConn( this.ConnectorInsTabel, connParam, getFlowCallTabel);
例如,调用了dmax_line这个数据集,返回值如下图所示:
图1 返回值
这个数据因为键值名称并不是label、value,所以并不能渲染。此时需要一层映射,例如将city映射到label上,将code映射到value上。但是每次这个映射都不固定,需要交给用户自行配置,所以提出了映射的概念,即mapping。
图2 映射
由用户自己决定将什么字段拖拽映射到什么字段。例如,将city字段映射到了“选项标签展示值”字段,即label中,将code字段映射到了“选项值”字段,即value中。
[{ "city": "斗罗大陆", "pid": "null", "code": 0, "hasChildren": "true", "bool": 1 }, { "city": "武魂殿", "pid": 0, "code": 11111, "hasChildren": "true", "bool": 1 }]
映射后结果:
[{ "label": "斗罗大陆", "pid": "null", "value": 0, "hasChildren": "true", "bool": 1 }, { "label": "武魂殿", "pid": 0, "value": 11111, "hasChildren": "true", "bool": 1 }]
组件在获取数据时,获取到的是经过映射转换的数据,可以直接使用label、value等固定字段。
多数据集
部分组件可能存在使用多个数据源的情况,例如地图组件可能存在多个图层,相应配置可以如下:
propertiesConfig: [ { config: [ { type: "dataSetting", name: 'heatMapDataConnector', mapping: {} }, { type: "dataSetting", name: 'DistrictDataConnector', mapping: {} } ], } ],
组件使用静态数据
AstroCanvas通过调用组件定义的getMockData,来获取默认静态数据。
getMockData: function () { return { "dataValue": [ { "label": "周六", "value": "Sunday" }, { "label": "周日", "value": "Monday" }, { "label": "周一", "value": "Tuesday" } ] }; }
配置数据数据时,下图中的“静态数据”选项即为静态数据,支持直接在线编辑静态数据。