config.json 配置详解

option 配置

用于解析属性面板。具体参数配置详解option 配置详解

{
    "title": {
      "type": "title-echarts",
      "name": "标题",
      "default": {
        "show": true,
        "text": "标题"
      }
    },
    "backgroundColor": {
      "type": "color",
      "name": "背景颜色",
      "labelPosition": "left"
    },
    "color": {
      "type": "color",
      "multiple": true,
      "name": "颜色",
      "add": true,
      "remove": true,
      "default": ["#30d2fd", "#fff", "rgba(255,255,255,.2)"]
    },
    "tab": {
      "type": "tab",
      "name": "系列",
      "icon": "",
      "props": {
        "series": {
          "type": "tabs",
          "name": "系列",
          "multiple": true,
          "props": {
            "formatter": {
              "type": "text",
              "name": "内容格式器"
            },
            "color": {
              "type": "color",
              "name": "文字颜色",
              "labelPosition": "left"
            },
            "size": {
              "type": "number",
              "name": "文字大小"
            },
            "xCenter": {
              "type": "slider",
              "name": "X坐标",
              "min": 0,
              "max": 100,
              "step": 1,
              "showInput": true,
              "units": ["px", "%"]
            },
            "yCenter": {
              "type": "slider",
              "name": "X坐标",
              "min": 0,
              "max": 100,
              "step": 1,
              "showInput": true,
              "units": ["px", "%"]
            },
            "inRadius": {
              "type": "slider",
              "name": "内半径",
              "min": 0,
              "max": 100,
              "step": 1,
              "showInput": true,
              "units": ["px", "%"]
            },
            "outRadius": {
              "type": "slider",
              "name": "外半径",
              "min": 0,
              "max": 100,
              "step": 1,
              "showInput": true,
              "units": ["px", "%"]
            }
          },
          "default": [
            {
              "formatter": "{c}",
              "size": 38,
              "xCenter": {
                "value": 50,
                "unit": "%"
              },
              "yCenter": {
                "value": 50,
                "unit": "%"
              },
              "inRadius": {
                "value": 48,
                "unit": "%"
              },
              "outRadius": {
                "value": 50,
                "unit": "%"
              }
            }
          ]
        }
      }
    }
  }

data 数据配置

{
  "type": "all",
  "static": [
    {
      "x": "类型一",
      "y": 33
    },
    {
      "x": "类型二",
      "y": 12
    },
    {
      "x": "类型三",
      "y": 27
    }
  ],
  "matchs": {
    "match1": {
      "name": "匹配1",
      "field": [
        {
          "fieldAlias": "横轴",
          "fieldName": "x",
          "dataType": "string"
        }
      ],
      "template": false
    },
    "match2": {
      "name": "匹配2",
      "fields": [
        {
          "fieldAlias": "纵轴",
          "fieldName": "y",
          "dataType": "number"
        }
      ],
      "template": false
    }
  },
  "rowLimit": 100
}

• type： 可指定组件数据来源类型。

  可配置参数：默认为static、dynamic。

  • 字符：all。支持三种类型
  • 数组：[static, dynamic, custom]。可自定义配置。

  数据来源类型：

  • static： 静态数据
  • dynamic： 数据资源
  • custom： 自定义

• static： 配置组件静态数据。类型为 Array、Object 。

• matchs： 配置数据与组件的匹配关系。

  key ： 组件匹配的英文名。

  • name： 中文描述。

  • field： 匹配的字段，

    • fieldName： 字段名，匹配数据中的key
    • fieldAlias： 字段中文名
    • dataType: 字段类型

  • template： 模板。可配置参数为false、字符串。

• rowLimit： 默认查询条数。

interact 交互配置

{
    "events": {
      "click": {
        "name": "单击节点交互事件"
      }
    },
    "filters": true,
    "drilldown": true
  }

• events： 配置事件名。例如：{ "click1": { "name": "事件名称" }, "click2": { "name": "事件名称" } }

• filters： 配置数据响应。 类型为 Boolean。

• drilldown： 配置上卷下钻。 类型为 Boolean。