组件数据接入

组件对接数据配置开关

组件的数据可来自于静态数据或通过数据集获取，以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	数据集实例的唯一标识。

表2 mapping字段说明
字段	类型	是否必填	示例	说明
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：只能拖拽一个字段。 1+：可以拖拽多个字段。
required	Boolean	否	required: true	是否必须配置。

组件使用数据集

数据集实例获取。

组件代码中可使用如下API，来获取对应的数据集实例。
```
ConnectorIns: thisObj.getConnectorInstanceByName('EchartsWidgetTemplateConnector') || '',
```
调用数据集，获取数据。
```
thisObj.callFlowConn(this.ConnectorIns, {}, (res) => {
          this.dataValue = res;
          this.drawEcharts();
        });
```
例如，调用了dmax_line这个数据集，返回值如下图所示：

图1 返回值

这个数据因为键值名称并不是x、y和s，所以并不能渲染。此时需要一层映射，例如将name映射到x上，将ranking映射到y上，将series映射到s上。但是每次这个映射都不固定，需要交给用户自行配置，所以提出了映射的概念，即mapping。

图2 映射

由用户自己决定将什么字段拖拽映射到什么字段。例如，将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 静态数据