快速开发

提示

4.0+版本仅针对私有化部署方式使用。

1. 配置 visual.json 文件

目录：/static/visual/visual.json

"customs": {
  "env": "dev",
  "source": "./static/widgets",
  "entry": {
    "config": "config.json",
    "index": "index.js",
    "thumbnail": "thumbnail.png",
    "handler": "render"
  },
  "datas": [
    {
      "group": "group1",
      "title": "测试一级分组",
      "icon": "chart-set",
      "children": [
        {
          "group": "group2",
          "title": "测试二级分组",
          "icon": "pie-chart",
          "widgets": [
            {
              "name": "test",
              "title": "测试组件",
              "version": "0.0.1"
            }
          ]
        }
      ]
    },
    {
      "group": "group3",
      "title": "测试分组",
      "icon": "pie-chart",
      "widgets": [
        {
          "name": "test2",
          "title": "测试组件2",
          "version": "0.0.1"
        }
      ]
    },
    {
      "name": "test3",
      "title": "测试组件3",
      "group": [
        "chart",
        "pie"
      ],
      "version": "0.0.1"
    }
  ]
}

• env： 当前环境。可配置参数为dev、prod。默认配置为prod。

  • dev： 开发模式

  • prod： 产品模式

  当设置为prod时，会根据组件名称及版本号将组件定义的config.json添加到本地缓存中。建议在开发过程中设置为dev，上线环境设置为prod。

• source： 用于指定自定义组件解析文件的目录。默认配置./static/widgets。

• entry： 用于指定自定义组件解析各个文件对应的文件名。

  • config： 用于解析组件的属性配置。默认配置为config.json。

  • index： 用于解析组件主入口。默认配置为index.js。

  • thumbnail： 用于展示在设计器左侧组件列表中的图片。默认配置为 thumbnail.png。

  • handler： 组件入口方法。默认配置为render。

• datas： 组件配置。用于在设计器左侧展示组件列表。

  1. 配置两级分组

{
  "group": "group1", // 一级分组名
  "title": "测试一级分组", // 分组中文名
  "icon": "chart-set", // 分组图标
  "children": [
    // 下级分组
    {
      "group": "group2", // 二级分组名
      "title": "测试二级分组", // 分组中文名
      "icon": "pie-chart", // 分组图标
      "widgets": [
        // 组件
        {
          "name": "test", // 组件英文名， 不允许重复
          "title": "测试组件", // 组件中文名
          "version": "0.0.1" // 组件版本
        }
      ]
    }
  ]
}

2. 配置一级分组

{
  "group": "group3", // 分组名
  "title": "测试分组", // 分组中文名
  "icon": "pie-chart", // 分组图标
  "widgets": [
    // 组件
    {
      "name": "test2", // 组件英文名， 不允许重复
      "title": "测试组件2", // 组件中文名
      "version": "0.0.1" // 组件版本
    }
  ]
}

注意

未设置二级分组则二级分组默认同一级分组

3. 直接配置自定义组件

{
  "name": "test3", // 组件英文名， 不允许重复
  "title": "测试组件3", // 组件中文名
  "group": [
    // 组件分组，可直接指定已存在的一级分组名和二级分组名
    "chart",
    "pie"
  ],
  "version": "0.0.1" // 组件版本
}

内置分组名：

一级分组名	二级分组名
chart	pie、bar、line
map	map
words	text、table、interactive
adorn	media 、border、titlebar

2. 自定义组件 config.json 与解析

文档结构概览

test                    // 组件文件夹名
	config.json         // 属性配置文件   必要
	index.js	        // 组件解析文件
	thumbnail.png       // 组件图片       必要

注意

组件文件夹名应与全局 config.json 文件中customs ---> data ---> widgets ---> name保持一致。