feat: 新增双图合并模式,支持横排/竖排将两张图合并为一张图

- 后端新增 POST /api/combine 接口(chart1/chart2 + direction/gap/pixelRatio/background)
- 前端新增 🖼️ 双图合并模式:两张图独立配置数据/标题/类型/主题
- 横排(左右等高三张图)或竖排(上下等宽),一键切换实时预览
- 修复 @napi-rs/canvas echarts 渲染需先 toBuffer 再 dispose 的关键问题
- 更新 README/API 文档
This commit is contained in:
2026-08-19 12:15:31 +08:00
parent 3107d56764
commit e62aac539b
6 changed files with 610 additions and 9 deletions
+71 -2
View File
@@ -1,6 +1,6 @@
# 📡 数据可视化图表生成器 - API 文档
> 版本:v1.1.0 | 基础地址:`http://192.168.0.101:16016`
> 版本:v1.9.0 | 基础地址:`http://192.168.0.101:16016`
---
@@ -10,6 +10,7 @@
|------|------|------|
| POST | `/api/chart` | 生成图表图片(JSON body,推荐) |
| GET | `/api/chart` | 生成图表图片(URL 参数) |
| POST | `/api/combine` | 双图合并(横排/竖排)生成一张图 |
| GET | `/api/health` | 健康检查 |
| GET | `/api/docs` | 返回本文档(JSON |
@@ -151,7 +152,75 @@ curl "http://192.168.0.101:16016/api/chart?data=%E4%BA%A7%E5%93%81,Q1,Q2%0A%E6%8
---
## 3. GET /api/health
## 3. POST /api/combine(双图合并)
将两张图表合并到一张图片中,支持**横排(左右并排)** 或 **竖排(上下堆叠)** 两种方向,返回 PNG 图片。
### 请求
```
POST /api/combine
Content-Type: application/json
```
### 参数说明
| 参数 | 类型 | 必填 | 说明 |
|------|------|------|------|
| `chart1` | object | ✅ | 第一张图配置(同 `/api/chart` 参数:data/chartType/title/theme 等) |
| `chart2` | object | ✅ | 第二张图配置(同 `/api/chart` 参数) |
| `direction` | string | 否 | `horizontal` 横排(默认)/ `vertical` 竖排 |
| `gap` | number | 否 | 两图间距(默认 24px) |
| `pixelRatio` | number | 否 | 像素倍率,默认 2(越清晰文件越大) |
| `background` | string | 否 | 背景色,默认 `#ffffff` |
每个子图配置支持:`data`CSV)、`chartType`bar/line/bar-line)、`title``theme``showLegend``showGrid``showLabel``stackMode``smoothLine``width``height`
### curl 示例
**横排(左右并排):**
```bash
curl -X POST http://127.0.0.1:16016/api/combine \
-H "Content-Type: application/json" \
-d '{
"chart1": {
"data": "产品, Q1, Q2\n手机, 1200, 1800\n平板, 800, 950",
"title": "2024年销售",
"chartType": "bar"
},
"chart2": {
"data": "月份, 营收\n1月, 500\n2月, 680\n3月, 820",
"title": "营收趋势",
"chartType": "line"
},
"direction": "horizontal"
}' -o combine.png
```
**竖排(上下堆叠):**
```bash
curl -X POST http://127.0.0.1:16016/api/combine \
-H "Content-Type: application/json" \
-d '{
"chart1": {"data": "指标, 2023年\n营收, 500\n利润, 80", "title": "营收对比", "chartType": "bar"},
"chart2": {"data": "月份, 效率\n1月, 85\n2月, 88", "title": "效率趋势", "chartType": "line"},
"direction": "vertical"
}' -o combine.png
```
### 返回
PNG 图片二进制流,响应头包含:
| 响应头 | 说明 |
|--------|------|
| `Content-Type` | `image/png` |
| `X-Combine-Direction` | `horizontal` / `vertical` |
| `X-Chart-Width` / `X-Chart-Height` | 合并图逻辑尺寸 |
---
## 4. GET /api/health
健康检查。