gui.json规范

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

gui.js规范示例：

{
  "name": "newCom",
  "attr": {
    "w": 650,
    "h": 378
  },
  "style": [...],
  "data": {...},
  "event": {...}
}

表1 gui.js参数说明
参数	是否必选	参数类型	描述
name	是	String	组件名称。
attr	否	attr object	组件宽高基础配置(单位：像素)。
style	是	Array of Style object	组件样式面板配置。
data	是	Object	组件数据面板配置，详情请参见组件数据面板配置。
event	是	Object	组件交互面板配置，详情请参见组件交互面板配置。

表2 attr参数说明
参数	是否必选	参数类型	描述
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参数为数组形式，其中每个数据元素将形成一个样式配置项，每个数据元素还能包含相关的子配置项，最多支持三层，具体参数说明如下：

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

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

示例如下所示：

图1 style示例

表5 说明
区域编号	描述
1	对应字段isExpand。
2	对应字段label。
3	对应字段type，此处type为color类型。

组件数据面板配置

data：组件的数据面板相关配置。

示例如下：

"data": {
  "fields": {...},
  "config": {...}
}

表6 data参数说明
参数	是否必选	参数类型	描述
fields	是	Object	数据面板中的字段映射区域，请参见•fileds。
config	是	Object	数据面板中的静态数据区域，请参见•config

图2 组件数据面板

fileds

示例中fileds参数如下：

"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值的定义如下：

表7 Fields value参数说明
参数	是否必选	参数类型	描述
value	是	String	所映射的源数据中的字段名称。
desc	是	String	字段名称描述，和key值保持一致。
type	否	String	值固定为series，如果存在type参数，则表明该字段为系列字段（表示同一个图表中，显示两组或两组以上数据时，用该字段区分），其中每个系列可与字段所对应的相关值做值映射。示例中，s字段包含一个默认系列和对应数值1的系列，其中每个系列还包含一些组件样式配置。
gui	否	Array	当字段类型type为series时，才存在gui参数，该参数将列出该系列所需的样式配置。

系列示例如下：

表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值为交互事件的相关配置，具体如下：

表9 event value参数说明
参数	是否必选	参数类型	描述
Enable	是	Boolean	是否开启该交互事件。true：开启，false：关闭。
Fileds	是	Object	至少包含一个key: value，交互事件所对应的字段映射关系，其中key值为交互时所传递的参数名称，value值为在组件数据中所获取的值作为传递值。