组件数据接入

组件对接数据配置开关

组件的数据可来自于静态数据或通过数据集获取，在“{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,
            },
          },
        },
}]

组件使用数据集

1. 数据集实例获取。

   组件代码中可使用如下API，来获取对应的数据集实例。

   ConnectorIns: thisObj.getConnectorInstanceByName('SelectDataConnector') || ''

2. 调用数据集，获取数据。

   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"
            }
        ]
    };
}

配置数据数据时，下图中的“静态数据”选项即为静态数据，支持直接在线编辑静态数据。

图3 静态数据