组件配置文件gui介绍

gui.json文件是组件的配置文件。本文介绍gui.json文件的字段详情，您可以参考本文的字段说明，根据自身需求，灵活修改gui.json文件，自定义组件的配置面板。

gui.json规范示例：

 {
  "name": "newCom",
  "style": [...],
  "data": {},
  "dataSlot": {...},
  "event": {...}
}
 

表1 gui.json参数说明
参数	是否必选	参数类型	描述
name	是	String	组件名称。
style	是	Array of Style object	组件样式面板配置，详情请参见组件样式配置
data	是	{}	存放组件更新后的数据，保持值为{}，请勿删除。
dataSlot	否	Object	组件数据面板配置，详情请参见组件数据面板配置。
event	否	Object	组件交互面板配置，详情请参见组件交互面板配置。

组件样式配置

   "style": [
    {
      "label": "全局样式",
      "labelId": "global_style",
      "isExpand": true,
      "children": [
        {
          "label": "字体大小",
          "name": "fontSize",
          "type": "number",
          "min": 12,
          "max": 32,
          "value": 12
        },
        {
          "label": "字体粗细",
          "name": "fontWeight",
          "type": "select",
          "options": [
            {
              "key": "Normal",
              "value": "normal"
            },
            {
              "key": "Bold",
              "value": "bold"
            }
          ],
          "value": "normal"
        },
        {
          "label": "颜色",
          "name": "color",
          "type": "color",
          "value": "#ffffff"
        }
      ]
    }
  ],
 

Style参数为数组形式，其中每个数据元素将形成一个样式配置项，每个数据元素还能包含相关的子配置项，最多支持两层，具体参数说明如下：

表2 Style参数说明
参数	是否必选	参数类型	描述
label	是	String	配置项标签名称。
isExpand	否	Boolean	是否展开子配置项。 true：展开。 false：不展开。
name	是	String	配置项key值，用户在命名时要注意唯一性（只限于当前组件）。
配置项的其他属性参数	否	-	不同UI类型具有不同的属性参数，请参见UI类型介绍。
children	否	Array of children object	配置项所拥有的子配置项，如下图所示全局样式下包含字体和颜色等配置。

表3 children参数说明
参数	是否必选	参数类型	描述
label	是	String	子配置项标签名称。
type	是	String	样式配置输入框类型，DataArts Insight开放的UI类型请参见UI类型介绍。
name	是	String	子配置项key值，用户在命名时要注意唯一性（只限于当前组件）。
value	是	String \| Number	子配置项样式取值。
子配置项的其他属性参数	是	-	不同UI类型具有不同的属性参数，请参见UI类型介绍。

示例如下所示：

图1 style示例

表4 样式面板示例说明
区域编号	描述
1	对应字段isExpand。
2	对应字段label。
3	对应字段type，此处type分别为number、select、color类型。

组件数据面板配置

dataSlot：组件的数据面板槽位相关配置。

示例如下：

 "dataSlot": {
  "version": "2.0"
  "dynamicData": {
      "slots": [...]，
      "filter": true,
      "sort": true
},
}
 

表5 dataSlot参数说明
参数	是否必选	参数类型	描述
version	是	“2.0”	值固定为“2.0”。
slots	是	Slot[]	数据面板中的数据配置区域，参考slots参数说明。
filter	是	Boolean	数据面板中是否展示过滤槽位。
sort	是	Boolean	数据面板中是否展示排序槽位。

图2 组件数据面板

slots配置示例

示例中slots参数如下：

 "dataSlot": {
  "version": "2.0",
  "dynamicData": {
    "slots": [
      {
        "areaId": "area_value",
        "label": "度量槽位",
        "rule": {
          "maxColNum": 1,
          "minColNum": 0,
          "needAggregator": true
        }
      }
    ],
    "filter": true,
    "sort": true
  }
},
 

其中slots为槽位的定义如下：

表6 slots参数说明
参数	是否必选	参数类型	描述
areaId	是	String	数据槽位类型，可选值参考AreaId说明。
label	是	String	数据槽位展示名称。
rule	否	Object	配置数据槽位规则和限制，参考rule说明。

AreaId说明

AreaId标识数据面板槽位类型，AreaId值如下：

表7 AreaId值说明
值	描述
area_column	列槽位，支持维度和度量。
area_type	维度槽位，只能拖拽维度字段。
area_value	度量槽位，只能支持度量字段。
area_color	颜色图例槽位，只支持维度，用于对数据进行分类。

rule说明

rule为数据面板槽位规则信息，rule参数说明如下：

表8 rule值说明
值	是否必选	类型	描述
minColNum	否	Number	数据面板槽位最少需要的字段个数。
maxColNum	否	Number	数据面板槽位最多支持的字段个数。
dataType	否	String[]	支持的字段类型，可选值为“STRING”、“DATE”、“NUMBER”，不配置该字段则默认为匹配AreaId对应的类型。AreaId说明。
typeErrorTip	否	String	向数据面板槽位拖拽字段类型和槽位不匹配时的提示内容。

组件交互面板配置

event：组件的交互相关配置。

示例如下：

"event": {
  "eventConfig": [
    {
      "type": "select"
    }
  ]
}

Event为key：value形式的对象，其中key值为交互事件名称定义，value值为交互事件的相关配置，具体如下：

表9 event value参数说明
参数	是否必选	参数类型	描述
eventConfig	是	Array	交互配置，值为数组。

**表10** eventConfig参数说明
参数	是否必选	参数类型	说明
type	是	select、drive、link	select：允许组件在交互面板里通过交互编辑的方式定义交互事件，该事件和drive、link类型不支持同时配置。 isMultivalue：值为true时，操作符只能为“in”，适用于多选下拉。值为false时，操作符包括“=”、“≠”、“﹥”等，适用于单选下拉。如图4所示，此时isMultivalue值为true。说明： select、isMultivalue只支持大屏，不支持仪表板。 drive：允许组件在交互面板里配置联动，和select类型不支持同时配置。 link：允许组件在交互面板里配置跳转。