更新时间：2024-12-16 GMT+08:00
创建自定义组件
本文介绍如何注册、调试、发布自定义组件。
步骤一：注册自定义组件
- 登录智能数据洞察控制台。
- 单击管理控制台左上角的
，选择区域，单击左下角的企业项目选择项目。 - 在控制台右侧“我的项目”单击项目名称，进入项目页面。
- 单击“作品管理 > 自定义组件”，进入自定义组件界面。
- 单击页面右上角的“注册组件”，弹出注册组件界面。
- 配置参数后，确认无误单击“确定”。
表1 注册组件参数说明 参数
说明
组件名称
用户自定义的组件名称，注册后名称不支持修改。
图标
组件显示的图标，用户可自定义图标，如果不选择，则使用的是默认图标。
适用范围
注册组件的使用范围仅支持大屏和仪表板。
适用平台
使用平台仅支持PC。
开发包
开发好的开发包上传。开发包的大小在40M以内，且格式为zip包。
描述
用户对自定义组件的描述，最多可输入200字符。
步骤二：下载开发者工具并制作开发包
- 单击开发者平台界面右上角的“下载开发者工具”，下载开发包保存在本地。
- 解压压缩包配置开发包，详细开发包介绍请参见自定义组件开发包说明。
开发自定义组件需要的环境准备：node.js建议20以上版本、npm建议10.5.0以上版本。
- 进入insight-dev-tools文件夹，以windows系统管理员身份启用命令行（cmd），并确保在insight-dev-tools路径。
npm install
- 组件内部的link连接。
npm link
- 组件初始化。
insight init
图1 初始化
- “1”代表初始化命令。
- “2”代表选择语言。
- “3”代表组件名称，用户可自定义。
- “4”代表组件别名，用户可自定义。
- “5”代表组件版本号，用户可自定义。
- “6”代表组件的描述，用户根据需求自定义。
- 初始化后，insight-dev-tools文件夹中出现src目录，src目录中包含组件的配置目录。
图2 src目录
- gui.js：组件的配置，包括样式、数据和交互。
- index.js：实现配置文件。
- index.less：样式配置文件。
- package.json：依赖包文件。
- 进入src目录，构建组件，构建后src目录下出现dist文件夹（dist文件中的index.js指的当前实现的组件包）。
- 进入src目录。
cd .\src\
- 构建组件。
insight build
- 进入src目录。
步骤三：调试组件
- 在本地完成开发包的制作后，请将本地组件接入控制台调试组件使用效果。
- 在本地输入命令调试组件，获取调试端口。
insight start
- 在开发者平台界面，单击操作列的“调试”，进入调试组件界面，进行参数配置（调试端口请根据图片中的端口填写）。
表2 自定义组件调试参数 参数
说明
组件名称
用户设置的自定义组件名称。
调试对象
本地包：从本地获取的开发包。
适用范围
目前支持大屏和仪表板。
项目
选择用于调试的项目，可以使用该项目的数据进行调试。
大屏/仪表板
选择具体用于调试的大屏/仪表板。
调试端口
输入调试端口，进行校验，只允许输入数字。
- 指定不同的端口，可调试本地开发服务器上不同的开发包。
- 只有本地包调试需要输入，待发布包模式没有该项。
- 本地包模式下，没有填写调试端口，单击“调试”时，会提示需要填写调试端口。
- 参数配置完成后单击“确定”，进入“大屏/仪表板> 自定义组件”界面调试。
- 调试后再构建组件。
insight build
步骤四：上传开发包
- 在控制台完成调试后，在本地打包自定义组件，list文件夹中出现zip压缩包。
insight pack
图4 zip压缩包
- 进入开发者平台界面，选择未上传开发包的自定义组件，单击操作列的“编辑”，进入编辑页面，上传本地开发包。
- 单击“确认”，开发包上传成功。
父主题： 自定义组件
