组件数据接入

组件对接数据配置开关

组件的数据可来自于静态数据或通过数据集获取，以EchartsWidgetTemplate组件为例，在“{Widget}”.editor.js文件中，可配置组件接入的数据。当识别到组件propertiesConfig中存在dataSetting类型的配置项时，默认组件需要对接数据集。配置示例如下：

组件使用数据集

1. 数据集实例获取。

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

   ConnectorIns: thisObj.getConnectorInstanceByName('EchartsWidgetTemplateConnector') || '',

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

   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: {}
        }
      ],
    }
  ],

组件使用静态数据

AstroCanvas通过调用组件定义的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 静态数据