gui.json规范

组件样式配置

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

示例如下所示：

图1 style示例

组件数据面板配置

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

1
2
3
4

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

图2 组件数据面板

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

  表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参数如下：

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

示例如下：