更新时间:2022-02-22 GMT+08:00

gui.json规范

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

gui.js规范示例:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
{
  "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

组件高度(单位:像素)。

组件样式配置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
"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类型介绍

组件数据面板配置

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

示例如下:
1
2
3
4
"data": {
  "fields": {...},
  "config": {...}
}
表5 data参数说明

参数

是否必选

参数类型

描述

fields

Object

数据面板中的字段映射区域,请参见•fileds

config

Object

数据面板中的静态数据区域,请参见•config

  • fileds

    示例中fileds参数如下:

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    "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值的定义如下:

    表6 Fields value参数说明

    参数

    是否必选

    参数类型

    描述

    value

    String

    所映射的源数据中的字段名称。

    desc

    String

    字段名称描述,和key值保持一致。

    type

    String

    值固定为series,如果存在type参数,则表明该字段为系列字段(表示同一个图表中,显示两组或两组以上数据时,用该字段区分),其中每个系列可与字段所对应的相关值做值映射。示例中,s字段包含一个默认系列和对应数值1的系列,其中每个系列还包含一些组件样式配置。

    gui

    Array

    当字段类型type为series时,才存在gui参数,该参数将列出该系列所需的样式配置。

  • config

    示例中config参数如下:

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    "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:组件的交互相关配置。

示例如下:

1
2
3
4
5
6
7
8
"event": {
   "数据变化": {
     "enable": false,    
     "fields": {
       "value": ""    
      }  
   }
}

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

表7 event value参数说明

参数

是否必选

参数类型

描述

Enable

Boolean

是否开启该交互事件。true:开启,false:关闭。

Fileds

Object

至少包含一个key: value,交互事件所对应的字段映射关系,其中key值为交互时所传递的参数名称,value值为在组件数据中所获取的值作为传递值。