feat: 双图合并升级为多图合并 + 数据输入框加宽

- 合并模式默认2张图,新增'+添加图表'按钮可不断添加,每张图可独立删除
- 每张图卡片:标题/类型/主题/显示选项/数据,动态渲染(combineCharts 数组驱动)
- 合并逻辑支持 N 张图:横排等高依次排列、竖排等宽依次堆叠
- 后端 /api/combine 支持 charts 数组(N 张),兼容 chart1+chart2
- 修复合并图数据输入框过窄:.config-group textarea 统一 width:100%(与设置区一致)
This commit is contained in:
2026-08-19 13:30:35 +08:00
parent 576024af76
commit e56c6cb79f
6 changed files with 219 additions and 203 deletions
+16 -7
View File
@@ -10,7 +10,7 @@
|------|------|------|
| POST | `/api/chart` | 生成图表图片(JSON body,推荐) |
| GET | `/api/chart` | 生成图表图片(URL 参数) |
| POST | `/api/combine` | 图合并(横排/竖排)生成一张图 |
| POST | `/api/combine` | 图合并(横排/竖排)生成一张图 |
| GET | `/api/health` | 健康检查 |
| GET | `/api/docs` | 返回本文档(JSON |
@@ -157,9 +157,9 @@ curl "http://192.168.0.101:16016/api/chart?data=%E4%BA%A7%E5%93%81,Q1,Q2%0A%E6%8
---
## 3. POST /api/combine图合并)
## 3. POST /api/combine图合并)
张图表合并到一张图片中,支持**横排(左右并排)** 或 **竖排(上下堆叠)** 两种方向,返回 PNG 图片。
**多张图表**合并到一张图片中(默认 2 张,可多张),支持**横排(左右并排)** 或 **竖排(上下堆叠)** 两种方向,返回 PNG 图片。
### 请求
@@ -172,22 +172,31 @@ Content-Type: application/json
| 参数 | 类型 | 必填 | 说明 |
|------|------|------|------|
| `chart1` | object | ✅ | 第一张图配置(`/api/chart` 参数:data/chartType/title/theme 等 |
| `chart2` | object | ✅ | 第二张图配置(同 `/api/chart` 参数) |
| `charts` | array | ✅ | 图表配置数组(N 张),每项`/api/chart` 参数:data/chartType/title/theme 等 |
| `direction` | string | 否 | `horizontal` 横排(默认)/ `vertical` 竖排 |
| `gap` | number | 否 | 图间距(默认 24px |
| `gap` | number | 否 | 图间距(默认 24px |
| `pixelRatio` | number | 否 | 像素倍率,默认 2(越清晰文件越大) |
| `background` | string | 否 | 背景色,默认 `#ffffff` |
> 兼容旧参数:`chart1` + `chart2` 仍可传(等价于 `charts: [chart1, chart2]`)。
每个子图配置支持:`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 '{
"charts": [
{"data": "产品, Q1, Q2\n手机, 1200, 1800\n平板, 800, 950", "title": "销售", "chartType": "bar"},
{"data": "月份, 营收\n1月, 500\n2月, 680\n3月, 820", "title": "趋势", "chartType": "line"},
{"data": "地区, 销量\n华东, 300\n华南, 450", "title": "地区销量", "chartType": "bar"}
],
"direction": "horizontal"
}' -o combine.png
``` -d '{
"chart1": {
"data": "产品, Q1, Q2\n手机, 1200, 1800\n平板, 800, 950",
"title": "2024年销售",