1、插件目录结构（后端）
extensions/
├── base.go
├── base_interface.go
├── humiture
│ ├── actions
│ │ └── humiture_chart.go
│ ├── config.yaml
│ └── view
│ ├── HumBrokenlineChart.js
│ ├── humChart.js
│ ├── TempBrokenlineChart.js
│ ├── tempChart.js
│ └── temp_chart.vue
└── pm25
├── actions
│ └── pm25.go
├── config.yaml
└── view
├── pm25BrokenlineChart.js
└── pm25CurrentChart.js
2、ThingsPanel-Go\extensions\humiture\config.yaml配置文件规则如下图所示
1）映射到传感器的字段就是vue图表中的字段
2）插件名保持一致
3）模板名与ThingsPanel-Go\extensions\humiture\view下的js文件名保持一致，js为驼峰，配置文件里为中划线
4）一个模板对应一个js图表文件，一个config.yaml文件对应一个插件
5）其他如图示例
3、拿到前端插件代码后样例后（推荐vscode\HBuilder X开发）
1）安装环境node.js 16.13
2）执行命令 npm install安装依赖
3）开发后不运行，执行命令npm run build编译为js文件
4）将js文件放入ThingsPanel-Go\extensions\插件名\view文件夹下
5）修改js文件和配置文件不用重启系统
6）后端接口返回数据格式：{
"data": "[{\"device_id\":\"f1ab2c47-951f-10b8-60c0-c6b33440f189\",\"fields\":[{\"hum\":24,\"systime\":\"2022-01-18 18:59:11\",\"temp\":26},{\"hum\":24,\"systime\":\"2022-01-18 18:59:17\",\"temp\":26},{\"hum\":24,\"systime\":\"2022-01-18 18:59:41\",\"temp\":26}],\"latest\":{\"hum\":24,\"systime\":\"2022-01-18 18:59:41\",\"temp\":26}}]",
"endTs": 1642503540000,
"startTs": 1642503240000
}
7）图表数据第一次推送为全量，后续为增量
工具包说明：
1、doubleline-chart是一个双曲线通用插件，可直接复制js文件到任何设备插件中使用，在业务中配置设备映射时候的第一个字段为第一条曲线，第二个字段为第二个曲线
2、pm25-value是一个值插件，根据模板可开发其他插件的值插件，也可以模仿doubleline-chart写一个通用值插件
3、pm-brokenline-chart是一个pm的曲线插件，根据模板可开发其他插件的值插件
开发工具包-下载地址：https://forum.thingspanel.cn/assets/files/2022-02-08/1644283833-878503-thingspanel-20220208.zip