# gui.json规范
gui.js文件是组件的配置文件。本文介绍gui.js文件的字段详情，您可以参考本文的字段说明，根据自身需求，灵活修改gui.js文件，自定义组件的配置面板。
gui.js规范示例：
```
{
  "name": "newCom",
  "attr": {
    "w": 650,
    "h": 378
  },
  "style": [...],
  "data": {...},
  "event": {...}
}
```
表1gui.js参数说明 
| 参数    | 是否必选 | 参数类型                                                      | 描述                                                             |
|:---|:---|:---|:---|
| name  | 是    | String                                                    | 组件名称。                                                          |
| attr  | 否    | [attr] object             | 组件宽高基础配置(单位：像素)。                                               |
| style | 是    | Array of [Style] object | 组件样式面板配置。                                                      |
| data  | 是    | Object                                                    | 组件数据面板配置，详情请参见[组件数据面板配置]。  |
| event | 是    | Object                                                    | 组件交互面板配置，详情请参见[组件交互面板配置]。 |
   
 表2attr参数说明 
| 参数 | 是否必选 | 参数类型   | 描述           |
|:---|:---|:---|:---|
| w  | 否    | Number | 组件宽度(单位：像素)。 |
| h  | 否    | Number | 组件高度(单位：像素)。 |
   
#### 组件样式配置
```
"style": [
  {
     "label": "global",
     "isExpand": true,
     "children": [
        {
          "label": "Font",
          "name": "font",
          "type": "fontfamily",
          "value": "幼圆"
        },
        {
          "label": "Color",
          "name": "color",
          "type": "color",
          "value": "rgba(70, 94, 212, 1)"
        }
     ]
  }
]
```
Style参数为数组形式，其中每个数据元素将形成一个样式配置项，每个数据元素还能包含相关的子配置项，最多支持三层，具体参数说明如下：
 表3Style参数说明 
| 参数         | 是否必选 | 参数类型                                                         | 描述                                                                                                                               |
|:---|:---|:---|:---|
| label      | 是    | String                                                       | 配置项标签名称。                                                                                                                         |
| isExpand   | 否    | Boolean                                                      | 是否支持折叠或展开子配置项。true：支持，false：不支持。                                                                                                 |
| type       | 是    | String                                                       | 配置项UI类型，DLV所开放的UI类型请参见[支持的Type类型](https://support.huaweicloud.com/devg-dlv/dlv_04_0006.html#dlv_04_0006__section14187202915297)。 |
| name       | 是    | String                                                       | 配置项key值，用户在命名时要注意唯一性（只限于当前组件）。                                                                                                   |
| 配置项的其他属性参数 | 否    | -                                                            | 不同UI类型具有不同的属性参数，请参见[UI类型介绍](https://support.huaweicloud.com/devg-dlv/dlv_04_0006.html)。                                          |
| children   | 否    | Array of [children] object | 配置项所拥有的子配置项，如下图所示全局样式下包含字体和近似曲线两个配置。                                                                                             |
   
 表4children参数说明 
| 参数          | 是否必选 | 参数类型   | 描述                                                                                          |
|:---|:---|:---|:---|
| label       | 是    | String | 子配置项标签名称。                                                                                   |
| type        | 是    | String | 子配置项UI类型，DLV所开放的UI类型请参见[UI类型介绍](https://support.huaweicloud.com/devg-dlv/dlv_04_0006.html)。 |
| name        | 是    | String | 子配置项key值，用户在命名时要注意唯一性（只限于当前组件）。                                                             |
| 子配置项的其他属性参数 | 是    | -      | 不同UI类型具有不同的属性参数，请参见[UI类型介绍](https://support.huaweicloud.com/devg-dlv/dlv_04_0006.html)。     |
   
示例如下所示：
图1style示例   
![](https://support.huaweicloud.com/devg-dlv/zh-cn_image_0238424979.png)
表5说明 
| 区域编号 | 描述                       |
|:---|:---|
| 1    | 对应字段isExpand。            |
| 2    | 对应字段label。               |
| 3    | 对应字段type，此处type为color类型。 |
   
 #### 组件数据面板配置
data：组件的数据面板相关配置。
示例如下：
```
"data": {
  "fields": {...},
  "config": {...}
}
```
表6data参数说明 
| 参数     | 是否必选 | 参数类型   | 描述                                                         |
|:---|:---|:---|:---|
| fields | 是    | Object | 数据面板中的字段映射区域，请参见[•fields]。 |
| config | 是    | Object | 数据面板中的静态数据区域，请参见[•config] |
   
图2组件数据面板   
![](https://support.huaweicloud.com/devg-dlv/zh-cn_image_0237398649.png)
- **fields**
  示例中fields参数如下：
  ```
  "fields": {
    "x": {
      "value": "", 
      "desc": "x"  
    },  
    "y": {
      "value": "",    
      "desc": "y"  
     },  
     "s": {
       "value": "",    
       "desc": "s",    
       "type": "series",    
       "gui": [      
         {
            "label": "",        
            "isCheck": true,        
            "children": [          
               {
                  "label": "Name",            
                  "name": "series.name",            
                  "type": "input",            
                  "value": ""          
               },          
               {
                  "label": "Color",            
                  "name": "series.color",            
                  "type": "color",            
                  "value": "rgba(195,53,53,1)"          
               }        
             ]      
           }    
        ]  
     }
  }
  ```
  
  Fields参数为多个key: value形式的对象，其中key值为字段名称，key值所对应的value值的定义如下：
  表7Fields value参数说明 
  | 参数    | 是否必选 | 参数类型   | 描述                                                                                                                                |
  |:---|:---|:---|:---|
  | value | 是    | String | 所映射的源数据中的字段名称。                                                                                                                    |
  | desc  | 是    | String | 字段名称描述，和key值保持一致。                                                                                                                 |
  | type  | 否    | String | 值固定为series，如果存在type参数，则表明该字段为系列字段（表示同一个图表中，显示两组或两组以上数据时，用该字段区分），其中每个系列可与字段所对应的相关值做值映射。示例中，s字段包含一个默认系列和对应数值1的系列，其中每个系列还包含一些组件样式配置。 |
  | gui   | 否    | Array  | 当字段类型type为series时，才存在gui参数，该参数将列出该系列所需的样式配置。                                                                                      |
     
  系列示例如下：
  ![](https://support.huaweicloud.com/devg-dlv/zh-cn_image_0238433311.png)
  表8说明 
  | 区域编号 | 描述                         |
  |:---|:---|
  | 1    | 添加系列按钮。                    |
  | 2    | 默认系列样式，当对应的值没有值映射时，都取默认系列。 |
  | 3    | s值为1的值映射，当s的值为1时所映射的系列样式。  |
     
  
- **config**
  示例中config参数如下：
  ```
  "config": {
    "data": [    
      {  
        "x": "2018",      
        "y": 78,      
        "s": 1    
      },    
     {
        "x": "2016",      
        "y": 55,      
        "s": 1    
     },    
    {
        "x": "2017",      
        "y": 68,      
        "s": 1    
    },    
    {
        "x": "2018",      
        "y": 48,      
        "s": 1    
    },    
    {
        "x": "2019",      
        "y": 70,      
        "s": 1    
     },     
    {
        "x": "2020",      
        "y": 85,      
        "s": 1    
     }  
   ]
  }
  ```
  Config参数中的data参数所对应的数据即为在数据面板中显示的静态数据（上传组件包后可连通动态数据源），数据格式需根据用户的源数据进行定义。
  
 
 #### 组件交互面板配置
event：组件的交互相关配置。
示例如下：
```
"event": {
   "数据变化": {
     "enable": false,    
     "fields": {
       "value": ""    
      }  
   }
}
```
Event为key: value形式的对象，其中key值为交互事件名称定义，value值为交互事件的相关配置，具体如下：
表9event value参数说明 
| 参数     | 是否必选 | 参数类型    | 描述                                                                          |
|:---|:---|:---|:---|
| Enable | 是    | Boolean | 是否开启该交互事件。true：开启，false：关闭。                                                 |
| Fields | 是    | Object  | 至少包含一个key: value，交互事件所对应的字段映射关系，其中key值为交互时所传递的参数名称，value值为在组件数据中所获取的值作为传递值。 |
   
示例如下：
![](https://support.huaweicloud.com/devg-dlv/zh-cn_image_0238822218.png)
表10说明 
| 区域编号 | 描述                     |
|:---|:---|
| 1    | 组件进行交互时传递使用的参数名称。      |
| 2    | 在组件数据中通过该参数查找到要传递的数据值。 |