# 组件配置文件gui介绍 gui.json文件是组件的配置文件。本文介绍gui.json文件的字段详情，您可以参考本文的字段说明，根据自身需求，灵活修改gui.json文件，自定义组件的配置面板。 gui.json规范示例： ``` { "name": "newCom", "style": [...], "data": {}, "dataSlot": {...}, "event": {...} } ``` 表1gui.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参数为数组形式，其中每个数据元素将形成一个样式配置项，每个数据元素还能包含相关的子配置项，最多支持两层，具体参数说明如下： 表2Style参数说明 | 参数 | 是否必选 | 参数类型 | 描述 | |:---|:---|:---|:---| | label | 是 | String | 配置项标签名称。 | | isExpand | 否 | Boolean | 是否展开子配置项。 - true：展开。 - false：不展开。 | | name | 是 | String | 配置项key值，用户在命名时要注意唯一性（只限于当前组件）。 | | 配置项的其他属性参数 | 否 | - | 不同UI类型具有不同的属性参数，请参见[UI类型介绍](https://support.huaweicloud.com/usermanual-dataartsinsight/dataartsinsight_03_0558.html)。 | | children | 否 | Array of [children] object | 配置项所拥有的子配置项，如下图所示全局样式下包含字体和颜色等配置。 | 表3children参数说明 | 参数 | 是否必选 | 参数类型 | 描述 | |:---|:---|:---|:---| | label | 是 | String | 子配置项标签名称。 | | type | 是 | String | 样式配置输入框类型，DataArts Insight开放的UI类型请参见[UI类型介绍](https://support.huaweicloud.com/usermanual-dataartsinsight/dataartsinsight_03_0558.html)。 | | name | 是 | String | 子配置项key值，用户在命名时要注意唯一性（只限于当前组件）。 | | value | 是 | String \| Number | 子配置项样式取值。 | | 子配置项的其他属性参数 | 是 | - | 不同UI类型具有不同的属性参数，请参见[UI类型介绍](https://support.huaweicloud.com/usermanual-dataartsinsight/dataartsinsight_03_0558.html)。 | 示例如下所示： 图1style示例 ![](https://support.huaweicloud.com/usermanual-dataartsinsight/zh-cn_image_0000001928082160.png) 表4样式面板示例说明 | 区域编号 | 描述 | |:---|:---| | 1 | 对应字段isExpand。 | | 2 | 对应字段label。 | | 3 | 对应字段type，此处type分别为number、select、color类型。 | #### 组件数据面板配置 dataSlot：组件的数据面板槽位相关配置。 示例如下： ``` "dataSlot": { "version": "2.0" "dynamicData": { "slots": [...]， "filter": true, "sort": true }, } ``` 表5dataSlot参数说明 | 参数 | 是否必选 | 参数类型 | 描述 | |:---|:---|:---|:---| | version | 是 | "2.0" | 值固定为"2.0"。 | | slots | 是 | Slot\[\] | 数据面板中的数据配置区域，参考[slots参数说明]。 | | filter | 是 | Boolean | 数据面板中是否展示过滤槽位。 | | sort | 是 | Boolean | 数据面板中是否展示排序槽位。 | 图2组件数据面板 ![](https://support.huaweicloud.com/usermanual-dataartsinsight/zh-cn_image_0000001955360845.png) - slots配置示例 示例中slots参数如下： ``` "dataSlot": { "version": "2.0", "dynamicData": { "slots": [ { "areaId": "area_value", "label": "度量槽位", "rule": { "maxColNum": 1, "minColNum": 0, "needAggregator": true } } ], "filter": true, "sort": true } }, ``` 其中slots为槽位的定义如下： 表6slots参数说明 | 参数 | 是否必选 | 参数类型 | 描述 | |:---|:---|:---|:---| | areaId | 是 | String | 数据槽位类型，可选值参考[AreaId说明]。 | | label | 是 | String | 数据槽位展示名称。 | | rule | 否 | Object | 配置数据槽位规则和限制，参考[rule说明]。 | - AreaId说明 AreaId标识数据面板槽位类型，AreaId值如下： 表7AreaId值说明 | 值 | 描述 | |:---|:---| | area_column | 列槽位，支持维度和度量。 | | area_type | 维度槽位，只能拖拽维度字段。 | | area_value | 度量槽位，只能支持度量字段。 | | area_color | 颜色图例槽位，只支持维度，用于对数据进行分类。 | - rule说明 rule为数据面板槽位规则信息，rule参数说明如下： 表8rule值说明 | 值 | 是否必选 | 类型 | 描述 | |:---|:---|:---|:---| | minColNum | 否 | Number | 数据面板槽位最少需要的字段个数。 | | maxColNum | 否 | Number | 数据面板槽位最多支持的字段个数。 | | dataType | 否 | String\[\] | 支持的字段类型，可选值为"STRING"、"DATE"、"NUMBER"，不配置该字段则默认为匹配AreaId对应的类型。[AreaId说明]。 | | typeErrorTip | 否 | String | 向数据面板槽位拖拽字段类型和槽位不匹配时的提示内容。 | #### 组件交互面板配置 event：组件的交互相关配置。 示例如下： ``` "event": { "eventConfig": [ { "type": "select" } ] } ``` Event为key：value形式的对象，其中key值为交互事件名称定义，value值为交互事件的相关配置，具体如下： 表9event value参数说明 | 参数 | 是否必选 | 参数类型 | 描述 | |:---|:---|:---|:---| | eventConfig | 是 | Array | 交互配置，值为数组。 | 表10eventConfig参数说明 | 参数 | 是否必选 | 参数类型 | 说明 | |:---|:---|:---|:---| | type | 是 | select、drive、link | - select：允许组件在交互面板里通过交互编辑的方式定义交互事件，该事件和drive、link类型不支持同时配置。 - isMultivalue：值为true时，操作符只能为"in"，适用于多选下拉。值为false时，操作符包括"="、"≠"、"﹥"等，适用于单选下拉。如[图4]所示，此时isMultivalue值为true。 说明： select、isMultivalue只支持大屏，不支持仪表板。 - drive：允许组件在交互面板里配置联动，和select类型不支持同时配置。 - link：允许组件在交互面板里配置跳转。 | 图3type为select的交互入口 ![](https://support.huaweicloud.com/usermanual-dataartsinsight/zh-cn_image_0000002029913985.png) 图4type为select的示例 ![](https://support.huaweicloud.com/usermanual-dataartsinsight/zh-cn_image_0000001995351348.png "点击放大") 图5type为link和drive示例 ![](https://support.huaweicloud.com/usermanual-dataartsinsight/zh-cn_image_0000001928082168.png)