# 组件数据接入
#### 组件对接数据配置开关
组件的数据可来自于静态数据或通过数据集获取。以EchartsWidgetTemplate组件为例，在"{Widget}".editor.js文件中可以配置组件接入的数据。当识别到组件propertiesConfig中存在dataSetting类型的配置项时，默认组件需要对接数据集。配置示例如下：
```
{
      type: 'dataSetting',
      mapping: {
        x: {
          keyName: 'dataX',
          keyTitle: { zh_CN: 'X轴数据', en_US: 'X axis Data' },
          limitNumber: '1',
          type: 'category',
          label: 'x',
          required: true,
        },
        y: {
          keyName: 'value',
          keyTitle: { zh_CN: 'Y轴数据', en_US: 'Y axis Data' },
          limitNumber: '1',
          type: 'value',
          label: 'y',
          required: true,
        },
        s: {
          label: 's',
          limitNumber: '1',
          series: [
            {
              type: '',
              label: '',
              required: false,
            },
          ],
        },
      },
      mock: {},
      name: 'EchartsWidgetTemplateConnector',
      model: 'CommonViewModel',
},
```
表1数据集字段说明 
| 字段      | 类型     | 是否必填 | 示例                                                  | 说明                 |
|:---|:---|:---|:---|:---|
| type    | String | 是    | type: "dataSetting"                                 | dataSetting为数据集类型。 |
| mapping | Object | 否    | [mapping] | 数据集数据拖拽的配置项。       |
| name    | String | 是    | EchartsWidgetTemplateConnector                      | 数据集实例的唯一标识。        |
   
 表2mapping字段说明 
| 字段          | 类型      | 是否必填 | 示例                                                | 说明                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
|:---|:---|:---|:---|:---|
| type        | String  | 是    | type: "value"                                     | 根据type校验拖入字段，为枚举值。 - value: 数字  - dateString: 日期  - category: 任意字符  - numberOrString: number或者String类型   |
| keyTitle    | Object  | 是    | keyTitle: { zh_CN: "X轴数据", en_US: "X axis Data" } | 标题，需要国际化。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| limitNumber | String  | 否    | type: '1'                                         | 拖拽字段个数限制。 - 1：只能拖拽一个字段。  - n：可以拖拽多个字段，其中n为大于1的正整数。                                                                                                                                                                                                                        |
| required    | Boolean | 否    | required: true                                    | 是否必须配置。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
   
#### 组件使用数据集
1. 数据集实例获取。 
   组件代码中可使用如下API，来获取对应的数据集实例。
   ```
   ConnectorIns: thisObj.getConnectorInstanceByName('EchartsWidgetTemplateConnector') || '',
   ```
   
   
2. 调用数据集，获取数据。 
   ```
   thisObj.callFlowConn(this.ConnectorIns, {}, (res) => {
             this.dataValue = res;
             this.drawEcharts();
           });
   ```
   例如，调用了dmax_line这个数据集，返回值如下图所示：
   图1返回值   
   ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123027612.png "点击放大")
   由于数据键值名称（如name、ranking、series）与固定字段（x、y、s）不匹配，无法直接渲染。因此需要用户配置映射关系，例如将name映射到x，ranking映射到y，series映射到s。这种灵活的映射机制称为mapping。
   图2映射   
   ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158425773.png "点击放大")
   由用户自己决定将什么字段拖拽映射到什么字段。例如，将name字段映射到了"选项标签展示值"字段，即x中，将ranking字段映射到了"选项值"字段，即y中，将series字段映射到了"选项值"字段，即s中。
   ```
   [{
   "series": "降雨量",
   "name": "A市",
   "ranking": "3",
   "category": "a"
   },
   {
   "series": "降雨量",
   "name": "B市",
   "ranking": "5",
   "category": "b"
   }
   ]
   ```
   映射后结果：
   ```
   [{
   "s": "降雨量",
   "x": "A市",
   "y": "3",
   "category": "a"
   },
   {
   "s": "降雨量",
   "x": "B市",
   "y": "5",
   "category": "b"
   }
   ]
   ```
   组件在获取数据时，获取到的是经过映射转换的数据，可以直接使用x、y等固定字段。
   
   
 
#### 多数据集
部分组件可能存在使用多个数据源的情况，例如地图组件可能存在多个图层，相应配置可以如下：
```
propertiesConfig: [
    {
      config: [
        {
          type: "dataSetting",
          name: 'heatMapDataConnector',
          mapping: {}
        },
        {
          type: "dataSetting",
          name: 'DistrictDataConnector', 
          mapping: {}
        }
      ],
    }
  ],
```
#### 组件使用静态数据
华为云Astro大屏应用通过调用组件定义的getMockData，来获取默认静态数据。
```
getMockData() {
    const seviceWaterLevel = this.$t('setting.seviceWaterLevel');
    const seviceLoad = this.$t('setting.seviceLoad');
    return [
      {
        x: '00:00',
        y: 11.69,
        s: seviceWaterLevel,
      },
      {
        x: '02:30',
        y: 17.46,
        s: seviceWaterLevel,
      },
      {
        x: '05:00',
        y: 28.57,
        s: seviceWaterLevel,
      },
      {
        x: '07:30',
        y: 12.7,
        s: seviceWaterLevel,
      },
      {
        x: '10:00',
        y: 18.99,
        s: seviceWaterLevel,
      },
      {
        x: '12:30',
        y: 3.7,
        s: seviceWaterLevel,
      },
      {
        x: '15:00',
        y: 18.52,
        s: seviceWaterLevel,
      },
      {
        x: '17:30',
        y: 23.81,
        s: seviceWaterLevel,
      },
      {
        x: '20:00',
        y: 10.58,
        s: seviceWaterLevel,
      },
      {
        x: '22:30',
        y: 15.82,
        s: seviceWaterLevel,
      },
      {
        x: '24:00',
        y: 3.76,
        s: seviceWaterLevel,
      },
      {
        x: '00:00',
        y: 5.69,
        s: seviceLoad,
      },
      {
        x: '02:30',
        y: 12.46,
        s: seviceLoad,
      },
      {
        x: '05:00',
        y: 18.57,
        s: seviceLoad,
      },
      {
        x: '07:30',
        y: 25.7,
        s: seviceLoad,
      },
      {
        x: '10:00',
        y: 13.99,
        s: seviceLoad,
      },
      {
        x: '12:30',
        y: 9.7,
        s: seviceLoad,
      },
      {
        x: '15:00',
        y: 20.52,
        s: seviceLoad,
      },
      {
        x: '17:30',
        y: 28.81,
        s: seviceLoad,
      },
      {
        x: '20:00',
        y: 15.58,
        s: seviceLoad,
      },
      {
        x: '22:30',
        y: 19.82,
        s: seviceLoad,
      },
      {
        x: '24:00',
        y: 9.76,
        s: seviceLoad,
      },
    ];
  },
```
配置数据时，下图中的"静态数据"选项即为静态数据，支持直接在线编辑静态数据。
图3静态数据   
![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158307365.png "点击放大")