太极河图数据可视化平台

# option 配置详解

# 基本配置项类型

# text 文本

{
  "type": "text",
  "name": "标题",
  "default": "默认内容"
}
字段名 含义 类型 默认值 是否必选 备注
type text string - 是 -
name 显示标签 string - 是 -
default 默认值 string|string[] - 否 -
placeholder 输入框占位文本 string - 否 -
labelWidth 表单域标签的宽度 string 68px 否 -
labelPosition 表单域标签的位置 string top 否 left/top
rows 输入框行数 number 1 否 -
multiple 是否为数组 boolean false 否 -
add 是否允许添加元素 boolean false 否 -
remove 是否允许添加删除 boolean false 否 -

警告：

  • multiple为true时，default 必须为数组，反之为字符串。
  • 只有multiple为true时，配置add和remove才能生效。

# number 数值

{
  "type": "number",
  "name": "年龄",
  "default": 20,
  "max": 100,
  "min": 0
}
字段名 含义 类型 默认值 是否必选 备注
type number string - 是 -
name 显示标签 string - 是 -
default 默认值 number|number[] - 否 -
placeholder 输入框占位文本 string - 否 -
labelWidth 表单域标签的宽度 string 68px 否 -
labelPosition 表单域标签的位置 string top 否 left/top
min 最小值 number - 否 -
max 最大值 number - 否 -
step 步长 number - 否 设置步长后只能输入 step 的倍数
multiple 是否为数组 boolean false 否 -
add 是否允许添加元素 boolean false 否 -
remove 是否允许添加删除 boolean false 否 -

# select 下拉选择框

{
  "type": "select",
  "name": "对齐方式",
  "default": "center",
  "placeholder": "请选择",
  "options": [
    {
      "name": "左",
      "value": "left"
    },
    {
      "name": "中",
      "value": "center"
    },
    {
      "name": "右",
      "value": "right"
    }
  ]
}
字段名 含义 类型 默认值 是否必选 备注
type select string - 是
name 显示标签 string - 是
default 默认值 string - 否
placeholder 输入框占位文本 string 请选择 否
labelWidth 表单域标签的宽度 string 68px 否 -
labelPosition 表单域标签的位置 string top 否 left/top
multiple 是否多选 boolean false 否
clearable 是否可以清空选项 boolean false 否
options 下拉框选项 array [] 是 [{name: ‘’ ,value: ‘’}]

# radio 单选框

{
  "type": "radio",
  "name": "字体粗细",
  "default": 1,
  "options": [
    {
      "name": "正常",
      "value": 1
    },
    {
      "name": "加粗",
      "value": 2
    }
  ]
}
字段名 含义 类型 默认值 是否必选 备注
type radio string - 是 -
name 显示标签 string - 是 -
default 默认值 string - 否 -
labelWidth 表单域标签的宽度 string 68px 否 -
labelPosition 表单域标签的位置 string top 否 left/top
options 选项 array [] 是 [{name: ‘’ ,value: ‘’}]
isButton 是否为按钮组 boolean false 否 -

# checkbox 多选框

{
  "type": "checkbox",
  "name": "字体样式",
  "default": 1,
  "options": [
    {
      "name": "加粗",
      "value": 1
    },
    {
      "name": "倾斜",
      "value": 2
    }
  ]
}
字段名 含义 类型 默认值 是否必选 备注
type checkbox string - 是 -
name 显示标签 string - 是 -
default 默认值 string [] 否 -
labelWidth 表单域标签的宽度 string 68px 否 -
labelPosition 表单域标签的位置 string top 否 left/top
options 选项 array [] 是 [{name: ‘’ ,value: ‘’}]
isButton 是否为按钮组 boolean false 否 -

# switch 开关

{
  "type": "switch",
  "name": "是否显示",
  "default": true
}
字段名 含义 类型 默认值 是否必选 备注
type switch string - 是 -
name 显示标签 string - 是 -
default 默认值 string - 否 -
labelWidth 表单域标签的宽度 string 68px 否 -
labelPosition 表单域标签的位置 string top 否 left/top
activeValue 打开的值 boolean / string / number true 否 -
inactiveValue 关闭的值 boolean / string / number false 否 -
activeText 打开时的文字描述 string - 否 -
inactiveText 关闭时的文字描述 string - 否 -

# slider 滑块

{
  "type": "slider",
  "name": "滑块",
  "default": 2,
  "min": 0,
  "max": 10,
  "showInput": true,
  "units": "px"
}
字段名 含义 类型 默认值 是否必选 备注
type slider string - 是 -
name 显示标签 string - 是 -
default 默认值 {value:number,unit:string}|number - 否 当单位为数组时 default 为对象
labelWidth 表单域标签的宽度 string 68px 否 -
labelPosition 表单域标签的位置 string top 否 left/top
max 最大值 number - 否 -
min 最小值 number - 否 -
step 步长 number 1 否 -
showInput 是否显示输入框 boolean false 否 -
units 单位 array string - 否

# color 颜色选择器

{
  "type": "color",
  "name": "背景颜色",
  "default": "#333",
  "showAlpha": true
}
字段名 含义 类型 默认值 是否必选 备注
type color string - 是 -
name 显示标签 string - 是 -
default 默认值 string|string[] - 否 -
labelWidth 表单域标签的宽度 string 68px 否 -
labelPosition 表单域标签的位置 string top 否 left/top
multiple 是否为数组 boolean false 否 -
add 是否允许添加元素 boolean false 否 -
remove 是否允许添加删除 boolean false 否 -

# image 图片

{
  "type": "image",
  "name": "图片"
}
字段名 含义 类型 默认值 是否必选 备注
type image string - 是 从素材库中选择图片
name 显示标签 string - 是 -
default 默认值 string - 否
labelWidth 表单域标签的宽度 string 68px 否 -
labelPosition 表单域标签的位置 string top 否 left/top

# hidden 隐藏配置项

{
  "type": "hidden",
  "default": "id"
}
字段名 含义 类型 默认值 是否必选 备注
type hidden string - 是 编辑器不会配置此字段
name 显示标签 string - 否 -
default 默认值 string - 否 设置默认不显示的值，但是会作为 config 传给方法

# 高级配置项类型

# tab 左侧竖向标签页

{
  "type": "tab",
  "name": "标题",
  "icon": "el-icon-edit-outline",
  "props": {
    "name": {
      "type": "text",
      "name": "标题名称"
    }
  }
}
字段名 含义 类型 默认值 是否必选 备注
type tab string - 是 解析为左侧竖向标签页
name 显示标签 string - 否 -
icon 图标 string - 否 -
props 下级字段 object - 否 -

警告：

tab只能出现在option的直属下级。

option直属下级中基本配置项将合并到左侧第一个竖向标签页(基本面板)中。

# tabs 右侧横向标签页

{
  "type": "tabs",
  "name": "系列",
  "multiple": true,
  "add": true,
  "remove": true,
  "props": {
    "name": {
      "type": "text",
      "name": "标题名称"
    }
  },
  "default": {
    "name": "默认名称"
  }
}
字段名 含义 类型 默认值 是否必选 备注
type tabs string - 是 解析为右侧横向标签页
name 显示标签 string - 是 -
multiple 是否是数组 boolean false 否 -
add 允许添加 boolean false 否 -
remove 允许删除 boolean false 否 -
props 下级字段 object - 否 -
default 默认值 object 否 与 props 对应

# group 折叠面板

{
  "type": "group",
  "name": "文本样式",
  "isOpen": true,
  "props": {
    "fontSize": {
      "type": "number",
      "name": "字体大小"
    }
  }
}
字段名 含义 类型 默认值 是否必选 备注
type group string - 是 解析为折叠面板
name 显示标签 string - 是 -
isOpen 默认是否打开折叠面板 boolean false 否 -
props 下级字段 object - 否 -

# Echarts配置项类型

# title 标题

{
	"type": "title-echarts",
    "name": "标题",
    "icon": "widget-title",
    "default": {
        "show": true,    // 是否显示图表标题
        "text": "标题",   // 主标题文字
        "link": "",      // 主标题超链接
        "subtext": "",   // 副标题文本
        "subLink": "",   // 副标题文本连接
        "itemGap": 10    // 主副标题纵向间隔
    }
}

# legend 图例

{
    "type": "legend-echarts",
    "name": "图例",
    "icon": "widget-legend",
    "default": {
        "show": true,          // 是否显示图表图例
        "selectedMode": true,  // 选择模式
        "orient": "horizontal" // 排列朝向
    }
}

# tooltip 提示框

{
    "type": "tooltip-echarts",
    "name": "提示框",
    "icon": "widget-tooltip",
    "default": {
        "show": true,                               // 是否显示图表提示框
        "formatter": "",                            // 提示模板
        "trigger": "item",                          // 触发点 item\axis\none
        "backgroundColor": "rgba(50,50,50,0.7)",    // 背景颜色
        "borderColor": "#333",                      // 边框颜色
        "borderWidth": 0                            // 边框宽度 
    }
}

# toolbox 工具栏

{
    "type": "toolbox-echarts",
    "name": "工具栏",
    "icon": "widget-toolbox",
    "default": {
        "show": true,            // 是否显示图表工具栏
        "itemSize": 15,          // 图标大小
        "orient": "horizontal",  // 排列朝向
        "itemGap": 10            // 图标间隔
    }
}

警告：

使用Echarts配置项类型时，config.json ---> type 必须为echarts。

# 自定义配置项显示于隐藏

使用 show, 来对自定义配置项进行显示和隐藏，show 字段可以用于基本配置类型和type为group。

  1. 用于基本类型

    {
  "isShow": {
    "type": "switch",
    "name": "是否显示",
    "default": true
  },
  "position": {
    "type": "radio",
    "name": "对齐方式",
    "default": "center",
    "isButton": false,
    "options": [
      { "name": "左", "value": "left" },
      { "name": "中", "value": "center" },
      { "name": "右", "value": "right" }
    ]
  },
  "name": {
    "type": "text",
    "name": "名称",
    "default": "",
    "show": {
      "isShow": true, // 当isShow = true,并且position为"center"的时候，名称文本框才显示
      "position": "center"
    }
  }
}

  2. type为group

    {
  "isStyle": {
    "type": "switch",
    "name": "显示标题",
    "default": true,
    "labelPosition": "left"
  },
  "textStyle": {
    "type": "group",
    "name": "标题样式",
    "isOpen": true,
    "show": {
      "isStyle": true // 当isStyle为true时，标题样式的折叠面板才显示，
    },
    "props": {
      "fontSize": {
        "type": "number",
        "name": "文字大小",
        "default": 32,
        "show": {
          "isSize": true
        }
      }
    }
  }
}
Last Updated: 8/17/2022, 9:54:22 AM

← index.js 规范 →