chore: 同步健康检查版本号至 v1.9.0

feat: 新增双图合并模式，支持横排/竖排将两张图合并为一张图
- 后端新增 POST /api/combine 接口（chart1/chart2 + direction/gap/pixelRatio/background） - 前端新增 🖼️ 双图合并模式：两张图独立配置数据/标题/类型/主题 - 横排（左右等高三张图）或竖排（上下等宽），一键切换实时预览 - 修复 @napi-rs/canvas echarts 渲染需先 toBuffer 再 dispose 的关键问题 - 更新 README/API 文档
2026-08-19 12:15:56 +08:00 · 2026-08-19 12:15:31 +08:00 · 2026-08-19 11:57:08 +08:00
6 changed files with 613 additions and 12 deletions
@@ -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

 健康检查。

@@ -3,7 +3,7 @@
 一个简洁强大的数据可视化工具，支持 **Web UI** 和 **API** 两种方式生成精美的对比图表和表格图片。

 ![License](https://img.shields.io/badge/license-MIT-blue.svg)
-![Version](https://img.shields.io/badge/version-1.2.0-green.svg)
+![Version](https://img.shields.io/badge/version-1.8.0-green.svg)

 ## ✨ 功能特性

@@ -29,11 +29,18 @@
 - 可自定义分割线样式（实线/虚线/点线）
 - 自动标注左右区域标签

+### 🖼️ 双图合并
+- 将两张图表合并到一张图片中，适合对比/汇总场景
+- 支持**横排（左右并排）** 和 **竖排（上下堆叠）**，一键切换实时预览
+- 两张图可独立配置：数据、标题、图表类型、主题、图例/网格/标签/堆叠
+- 支持导出 PNG
+
 ### 📡 API 接口
 - **POST /api/chart** - JSON 请求体生成图表（完整参数支持）
 - **GET /api/chart** - URL 参数生成图表（简单场景）
 - **POST /api/table** - JSON 请求体生成表格图片
 - **GET /api/table** - URL 参数生成表格图片
+- **POST /api/combine** - 双图合并（横排/竖排）生成一张图片
 - 返回 PNG 图片，支持自定义分辨率和像素倍率

 ### 📥 导出功能
@@ -59,6 +59,14 @@ document.addEventListener('DOMContentLoaded', () => {
    // 默认加载第一个示例
    document.getElementById('dataInput').value = sampleDataSets[0].data;
    generateChart();
+
+    // 预填双图合并示例
+    document.getElementById('combineData1').value = sampleDataSets[0].data;
+    document.getElementById('combineData2').value = sampleDataSets[1].data;
+    document.getElementById('combineTitle1').value = '季度销售对比';
+    document.getElementById('combineType2').value = 'line';
+    document.getElementById('combineTitle2').value = '年度增长趋势';
+    generateCombine();
 });

 // ===== 数据解析 =====
@@ -625,16 +633,24 @@ function switchMode(mode) {
    // 更新按钮状态
    document.getElementById('btnChartMode').classList.toggle('active', mode === 'chart');
    document.getElementById('btnTableMode').classList.toggle('active', mode === 'table');
+    document.getElementById('btnCombineMode').classList.toggle('active', mode === 'combine');
    
    // 显示/隐藏配置区
+    document.getElementById('dataInputSection').style.display = mode === 'combine' ? 'none' : 'block';
    document.getElementById('chartConfigSection').style.display = mode === 'chart' ? 'block' : 'none';
    document.getElementById('tableConfigSection').style.display = mode === 'table' ? 'block' : 'none';
    document.getElementById('seriesConfigSection').style.display = mode === 'chart' ? 'block' : 'none';
    document.getElementById('splitConfigSection').style.display = mode === 'chart' ? 'block' : 'none';
+    document.getElementById('combineConfigSection').style.display = mode === 'combine' ? 'block' : 'none';
    
    // 更新生成按钮
    const btnGenerate = document.getElementById('btnGenerate');
-    btnGenerate.textContent = mode === 'chart' ? '🎨 生成图表' : '📋 生成表格';
+    if (mode === 'combine') {
+        btnGenerate.style.display = 'none'; // 双图模式用自己的按钮
+    } else {
+        btnGenerate.style.display = '';
+        btnGenerate.textContent = mode === 'chart' ? '🎨 生成图表' : '📋 生成表格';
+    }
    
    // 更新导出按钮
    const btnExportSvg = document.getElementById('btnExportSvg');
@@ -648,8 +664,10 @@ function switchMode(mode) {
 function generate() {
    if (currentMode === 'chart') {
        generateChart();
-    } else {
+    } else if (currentMode === 'table') {
        generateTable();
+    } else {
+        generateCombine();
    }
 }

@@ -710,8 +728,10 @@ function updateTable() {
 function exportImage(format) {
    if (currentMode === 'chart') {
        exportChart(format);
-    } else {
+    } else if (currentMode === 'table') {
        exportTable(format);
+    } else {
+        exportCombine();
    }
 }

@@ -741,11 +761,12 @@ function quickSwitchTheme(theme) {
        // 图表模式：更新主题选择器并重新渲染
        document.getElementById('themeStyle').value = theme;
        updateChart();
-    } else {
+    } else if (currentMode === 'table') {
        // 表格模式：更新主题选择器并重新请求
        document.getElementById('tableTheme').value = theme;
        updateTable();
    }
+    // 双图合并模式：仅切换按钮高亮，不联动（两图各自独立主题）
 }

 // ===== 同步风格按钮状态（下拉框变更时） =====
@@ -767,3 +788,220 @@ function initThemeButtons() {
 document.addEventListener('DOMContentLoaded', () => {
    initThemeButtons();
 });
+
+// ===== 双图合并 =====
+let combinedCanvas = null;
+
+// 构建单个子图的 echarts option（不依赖全局状态，双图模式专用）
+function buildCombineChartOption(dataText, cfg) {
+    const parsed = parseData(dataText);
+    if (!parsed) return null;
+
+    const {
+        title = '', chartType = 'bar', theme = 'default',
+        showLegend = true, showGrid = true, showLabel = false,
+        stackMode = false, smoothLine = true
+    } = cfg;
+
+    const bgColor = theme === 'dark' ? '#1a1a2e' : '#ffffff';
+    const textColor = theme === 'dark' ? '#e0e0e0' : '#333333';
+    const axisLineColor = theme === 'dark' ? '#444' : '#ddd';
+    const palette = colorPalettes[theme] || colorPalettes.default;
+
+    const series = parsed.seriesNames.map((name, idx) => {
+        const color = palette[idx % palette.length];
+        let type = chartType === 'bar-line' ? (idx % 2 === 0 ? 'bar' : 'line') : chartType;
+
+        const s = {
+            name,
+            type,
+            data: [...parsed.seriesData[name]],
+            itemStyle: { color },
+            emphasis: { focus: 'series' }
+        };
+
+        if (stackMode) s.stack = 'total';
+
+        if (type === 'line') {
+            s.smooth = smoothLine;
+            s.lineStyle = { width: 3 };
+            s.symbolSize = 8;
+            s.areaStyle = theme === 'gradient' ? { opacity: 0.15 } : undefined;
+        }
+
+        if (type === 'bar') {
+            s.barMaxWidth = 40;
+            s.itemStyle.borderRadius = stackMode ? [0, 0, 0, 0] : [4, 4, 0, 0];
+            if (theme === 'gradient') {
+                s.itemStyle.color = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color },
+                    { offset: 1, color: adjustColor(color, 40) }
+                ]);
+            }
+        }
+
+        if (showLabel) {
+            s.label = {
+                show: true,
+                position: 'top',
+                fontSize: 11,
+                color: textColor,
+                formatter: (p) => {
+                    if (p.value >= 10000) return (p.value / 10000).toFixed(1) + 'w';
+                    if (p.value >= 1000) return (p.value / 1000).toFixed(1) + 'k';
+                    return p.value;
+                }
+            };
+        }
+
+        return s;
+    });
+
+    return {
+        backgroundColor: bgColor,
+        title: title ? {
+            text: title,
+            left: 'center',
+            top: 10,
+            textStyle: { color: textColor, fontSize: 16, fontWeight: 600 }
+        } : undefined,
+        tooltip: {
+            trigger: 'axis',
+            backgroundColor: theme === 'dark' ? 'rgba(30,30,50,0.95)' : 'rgba(255,255,255,0.95)',
+            borderColor: theme === 'dark' ? '#555' : '#eee',
+            textStyle: { color: textColor }
+        },
+        legend: showLegend ? {
+            show: true,
+            top: title ? 40 : 10,
+            textStyle: { color: textColor, fontSize: 12 },
+            itemGap: 20,
+            icon: 'roundRect'
+        } : { show: false },
+        grid: {
+            left: '3%', right: '4%', bottom: '3%',
+            top: showLegend ? (title ? 70 : 45) : (title ? 50 : 30),
+            containLabel: true
+        },
+        xAxis: {
+            type: 'category',
+            data: parsed.categories,
+            axisLine: { lineStyle: { color: axisLineColor } },
+            axisLabel: { color: textColor, fontSize: 11, interval: 0, rotate: parsed.categories.length > 10 ? 30 : 0 },
+            axisTick: { show: false }
+        },
+        yAxis: {
+            type: 'value',
+            axisLine: { show: false },
+            axisTick: { show: false },
+            axisLabel: { color: textColor, fontSize: 11 },
+            splitLine: { show: showGrid, lineStyle: { color: theme === 'dark' ? '#333' : '#f0f0f0', type: 'dashed' } }
+        },
+        series,
+        animation: false
+    };
+}
+
+// 根据数据量估算子图尺寸
+function measureCombineChart(dataText) {
+    const p = parseData(dataText);
+    if (!p) return { w: 600, h: 400 };
+    const w = Math.min(900, Math.max(500, p.categories.length * 70 + 140));
+    return { w, h: 400 };
+}
+
+// 生成合并图
+function generateCombine() {
+    const d1 = document.getElementById('combineData1').value.trim();
+    const d2 = document.getElementById('combineData2').value.trim();
+    if (!d1 || !d2) return;
+
+    const direction = document.querySelector('input[name="combineDirection"]:checked').value;
+    const gap = 24;
+
+    const readCfg = (n) => ({
+        title: document.getElementById('combineTitle' + n).value,
+        chartType: document.getElementById('combineType' + n).value,
+        theme: document.getElementById('combineTheme' + n).value,
+        showLegend: document.getElementById('combineLegend' + n).checked,
+        showGrid: document.getElementById('combineGrid' + n).checked,
+        showLabel: document.getElementById('combineLabel' + n).checked,
+        stackMode: document.getElementById('combineStack' + n).checked
+    });
+
+    const chartArea = document.getElementById('chartArea');
+    chartArea.innerHTML = '<div class="placeholder"><p>⏳</p><p>正在合并...</p></div>';
+
+    const renderOne = (dataText, cfg, w, h) => new Promise((resolve, reject) => {
+        const option = buildCombineChartOption(dataText, cfg);
+        if (!option) { reject(new Error('数据格式错误')); return; }
+        const holder = document.createElement('div');
+        holder.style.cssText = `position:absolute;left:-9999px;top:0;width:${w}px;height:${h}px;`;
+        document.body.appendChild(holder);
+        const chart = echarts.init(holder, null, { renderer: 'canvas' });
+        chart.setOption(option);
+        setTimeout(() => {
+            const cvs = holder.querySelector('canvas');
+            if (!cvs) { reject(new Error('子图渲染失败')); return; }
+            resolve(cvs);
+            chart.dispose();
+            holder.remove();
+        }, 80);
+    });
+
+    const m1 = measureCombineChart(d1);
+    const m2 = measureCombineChart(d2);
+
+    Promise.all([
+        renderOne(d1, readCfg(1), m1.w, m1.h),
+        renderOne(d2, readCfg(2), m2.w, m2.h)
+    ]).then(([c1, c2]) => {
+        let W, H, r1, r2;
+        if (direction === 'vertical') {
+            // 竖排（上下）：等宽
+            const tw = Math.max(c1.width, c2.width);
+            r1 = { w: tw, h: Math.round(c1.height * tw / c1.width) };
+            r2 = { w: tw, h: Math.round(c2.height * tw / c2.width) };
+            W = tw; H = r1.h + r2.h + gap;
+        } else {
+            // 横排（左右）：等高
+            const th = Math.max(c1.height, c2.height);
+            r1 = { w: Math.round(c1.width * th / c1.height), h: th };
+            r2 = { w: Math.round(c2.width * th / c2.height), h: th };
+            W = r1.w + r2.w + gap; H = th;
+        }
+
+        const canvas = document.createElement('canvas');
+        canvas.width = W;
+        canvas.height = H;
+        const ctx = canvas.getContext('2d');
+        ctx.fillStyle = '#ffffff';
+        ctx.fillRect(0, 0, W, H);
+
+        if (direction === 'vertical') {
+            ctx.drawImage(c1, 0, 0, r1.w, r1.h);
+            ctx.drawImage(c2, 0, r1.h + gap, r2.w, r2.h);
+        } else {
+            ctx.drawImage(c1, 0, 0, r1.w, r1.h);
+            ctx.drawImage(c2, r1.w + gap, 0, r2.w, r2.h);
+        }
+
+        combinedCanvas = canvas;
+        const url = canvas.toDataURL('image/png');
+        chartArea.innerHTML = `<div class="table-preview"><img src="${url}" alt="合并图预览" style="max-width:100%;"></div>`;
+    }).catch(err => {
+        chartArea.innerHTML = `<div class="placeholder"><p>❌</p><p>${err.message}</p></div>`;
+    });
+}
+
+// 导出合并图
+function exportCombine() {
+    if (!combinedCanvas) {
+        alert('请先生成合并图');
+        return;
+    }
+    const a = document.createElement('a');
+    a.href = combinedCanvas.toDataURL('image/png');
+    a.download = 'combine.png';
+    a.click();
+}
@@ -23,11 +23,12 @@
                    <div class="mode-switch">
                        <button class="mode-btn active" id="btnChartMode" onclick="switchMode('chart')">📈 图表模式</button>
                        <button class="mode-btn" id="btnTableMode" onclick="switchMode('table')">📋 表格模式</button>
+                        <button class="mode-btn" id="btnCombineMode" onclick="switchMode('combine')">🖼️ 双图合并</button>
                    </div>
                </div>

                <!-- 数据输入区 -->
-                <div class="panel-section">
+                <div class="panel-section" id="dataInputSection">
                    <h2>📝 数据输入</h2>
                    <div class="input-format-hint">
                        <p><strong>格式说明：</strong></p>
@@ -208,12 +209,142 @@ C, 20, 30, 40</pre>
                </div>

                <!-- 导出按钮 -->
-                <div class="panel-section">
+                <div class="panel-section" id="exportSection">
                    <div class="btn-group">
                        <button class="btn btn-success" onclick="exportImage('png')">📥 导出PNG</button>
                        <button class="btn btn-success" id="btnExportSvg" onclick="exportImage('svg')">📥 导出SVG</button>
                    </div>
                </div>
+
+                <!-- 双图合并配置区 -->
+                <div class="panel-section" id="combineConfigSection" style="display:none;">
+                    <h2>🖼️ 双图合并配置</h2>
+
+                    <div class="config-group">
+                        <label>排列方向</label>
+                        <div class="combine-direction">
+                            <label class="dir-option"><input type="radio" name="combineDirection" value="horizontal" checked onchange="generateCombine()"> ⇄ 横排（左右）</label>
+                            <label class="dir-option"><input type="radio" name="combineDirection" value="vertical" onchange="generateCombine()"> ⇅ 竖排（上下）</label>
+                        </div>
+                    </div>
+
+                    <div class="combine-chart-card">
+                        <h3>📈 图1</h3>
+                        <div class="config-group">
+                            <label>标题</label>
+                            <input type="text" id="combineTitle1" placeholder="图1标题" oninput="generateCombine()">
+                        </div>
+                        <div class="config-group">
+                            <label>图表类型</label>
+                            <select id="combineType1" onchange="generateCombine()">
+                                <option value="bar">柱状图</option>
+                                <option value="line">折线图</option>
+                                <option value="bar-line">柱状图+折线图混合</option>
+                            </select>
+                        </div>
+                        <div class="config-group">
+                            <label>主题风格</label>
+                            <select id="combineTheme1" onchange="generateCombine()">
+                                <option value="default">默认</option>
+                                <option value="dark">深色</option>
+                                <option value="macarons">马卡龙</option>
+                                <option value="gradient">渐变</option>
+                                <option value="retro">复古</option>
+                                <option value="ocean">海洋</option>
+                                <option value="forest">森林</option>
+                                <option value="sunset">日落</option>
+                                <option value="lavender">薰衣草</option>
+                                <option value="minimal">极简</option>
+                                <option value="cherry">樱花</option>
+                                <option value="midnight">午夜</option>
+                                <option value="gold">金色</option>
+                                <option value="coral">珊瑚</option>
+                                <option value="mint">薄荷</option>
+                                <option value="slate">石板灰</option>
+                                <option value="sky">天空蓝</option>
+                                <option value="rose">玫瑰红</option>
+                                <option value="amber">琥珀黄</option>
+                                <option value="emerald">翡翠绿</option>
+                                <option value="indigo">靛蓝色</option>
+                                <option value="stone">石灰白</option>
+                            </select>
+                        </div>
+                        <div class="config-group">
+                            <label>显示选项</label>
+                            <div class="checkbox-group">
+                                <label><input type="checkbox" id="combineLegend1" checked onchange="generateCombine()"> 图例</label>
+                                <label><input type="checkbox" id="combineGrid1" checked onchange="generateCombine()"> 网格线</label>
+                                <label><input type="checkbox" id="combineLabel1" onchange="generateCombine()"> 数据标签</label>
+                                <label><input type="checkbox" id="combineStack1" onchange="generateCombine()"> 堆叠</label>
+                            </div>
+                        </div>
+                        <div class="config-group">
+                            <label>数据</label>
+                            <textarea id="combineData1" rows="5" placeholder="图1的CSV数据..."></textarea>
+                        </div>
+                    </div>
+
+                    <div class="combine-chart-card">
+                        <h3>📈 图2</h3>
+                        <div class="config-group">
+                            <label>标题</label>
+                            <input type="text" id="combineTitle2" placeholder="图2标题" oninput="generateCombine()">
+                        </div>
+                        <div class="config-group">
+                            <label>图表类型</label>
+                            <select id="combineType2" onchange="generateCombine()">
+                                <option value="bar">柱状图</option>
+                                <option value="line">折线图</option>
+                                <option value="bar-line">柱状图+折线图混合</option>
+                            </select>
+                        </div>
+                        <div class="config-group">
+                            <label>主题风格</label>
+                            <select id="combineTheme2" onchange="generateCombine()">
+                                <option value="default">默认</option>
+                                <option value="dark">深色</option>
+                                <option value="macarons">马卡龙</option>
+                                <option value="gradient">渐变</option>
+                                <option value="retro">复古</option>
+                                <option value="ocean">海洋</option>
+                                <option value="forest">森林</option>
+                                <option value="sunset">日落</option>
+                                <option value="lavender">薰衣草</option>
+                                <option value="minimal">极简</option>
+                                <option value="cherry">樱花</option>
+                                <option value="midnight">午夜</option>
+                                <option value="gold">金色</option>
+                                <option value="coral">珊瑚</option>
+                                <option value="mint">薄荷</option>
+                                <option value="slate">石板灰</option>
+                                <option value="sky">天空蓝</option>
+                                <option value="rose">玫瑰红</option>
+                                <option value="amber">琥珀黄</option>
+                                <option value="emerald">翡翠绿</option>
+                                <option value="indigo">靛蓝色</option>
+                                <option value="stone">石灰白</option>
+                            </select>
+                        </div>
+                        <div class="config-group">
+                            <label>显示选项</label>
+                            <div class="checkbox-group">
+                                <label><input type="checkbox" id="combineLegend2" checked onchange="generateCombine()"> 图例</label>
+                                <label><input type="checkbox" id="combineGrid2" checked onchange="generateCombine()"> 网格线</label>
+                                <label><input type="checkbox" id="combineLabel2" onchange="generateCombine()"> 数据标签</label>
+                                <label><input type="checkbox" id="combineStack2" onchange="generateCombine()"> 堆叠</label>
+                            </div>
+                        </div>
+                        <div class="config-group">
+                            <label>数据</label>
+                            <textarea id="combineData2" rows="5" placeholder="图2的CSV数据..."></textarea>
+                        </div>
+                    </div>
+
+                    <div class="btn-group">
+                        <button class="btn btn-primary" onclick="generateCombine()">🖼️ 生成合并图</button>
+                        <button class="btn btn-success" onclick="exportCombine()">📥 导出PNG</button>
+                    </div>
+                </div>
            </div>

            <!-- 右侧面板：图表预览 + 风格切换 -->
@@ -1,6 +1,6 @@
 const express = require('express');
 const cors = require('cors');
-const { createCanvas, registerFont } = require('@napi-rs/canvas');
+const { createCanvas, registerFont, loadImage } = require('@napi-rs/canvas');
 const echarts = require('echarts');
 const path = require('path');

@@ -882,7 +882,7 @@ app.get('/api/health', (req, res) => {
    res.json({
        status: 'ok',
        service: 'data-chart-tool',
-        version: '1.2.0',
+        version: '1.9.0',
        endpoints: {
            'POST /api/chart': '生成图表图片（JSON body）',
            'GET /api/chart': '生成图表图片（URL 参数）',
@@ -897,7 +897,7 @@ app.get('/api/health', (req, res) => {
 app.get('/api/docs', (req, res) => {
    res.json({
        name: '数据可视化图表生成器 API',
-        version: '1.2.0',
+        version: '1.9.0',
        endpoints: [
            {
                method: 'POST',
@@ -1000,17 +1000,126 @@ app.get('/api/docs', (req, res) => {
                example: {
                    request: `curl "http://localhost:16016/api/table?data=产品,价格,库存\\n手机,2999,100\\n平板,1999,50&title=产品列表" -o table.png`
                }
+            },
+            {
+                method: 'POST',
+                path: '/api/combine',
+                description: '将两张图表合并到一张图片中（支持横排/竖排）',
+                'Content-Type': 'application/json',
+                params: {
+                    chart1: { type: 'object', required: true, description: '第一张图配置（同 /api/chart 参数）' },
+                    chart2: { type: 'object', required: true, description: '第二张图配置（同 /api/chart 参数）' },
+                    direction: { type: 'string', default: 'horizontal', options: ['horizontal', 'vertical'], description: '排列方向：horizontal 横排（左右）/ vertical 竖排（上下）' },
+                    gap: { type: 'number', default: 24, description: '两图间距(px)' },
+                    pixelRatio: { type: 'number', default: 2, description: '像素倍率（清晰度）' },
+                    background: { type: 'string', default: '#ffffff', description: '背景色' }
+                },
+                returns: 'image/png',
+                example: {
+                    request: `curl -X POST http://localhost: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`,
+                    response: 'PNG 图片二进制流'
+                }
            }
        ]
    });
 });

+// ===== API: 双图合并生成图片 =====
+// 将两张图（图表/表格均可）合并到一张图片中，支持横排（左右）或竖排（上下）
+app.post('/api/combine', async (req, res) => {
+    try {
+        const body = req.body || {};
+        const chart1 = body.chart1 || {};
+        const chart2 = body.chart2 || {};
+        const direction = body.direction === 'vertical' ? 'vertical' : 'horizontal';
+        const gap = parseInt(body.gap) || 24;
+        const pixelRatio = parseInt(body.pixelRatio) || 2;
+        const background = body.background || '#ffffff';
+
+        if (!chart1.data || !chart2.data) {
+            return res.status(400).json({ error: 'chart1 和 chart2 都需要提供 data 参数（CSV 格式）' });
+        }
+
+        // 渲染单个子图（直接按目标尺寸渲染，避免二次缩放损失）
+        // 注意：必须先 toBuffer 再 chart.dispose()，dispose 会清空 canvas 内容！
+        const renderSub = async (params, w, h) => {
+            const option = buildChartOption(params);
+            const c = createCanvas(w * pixelRatio, h * pixelRatio);
+            const chart = echarts.init(c, null, {
+                renderer: 'canvas',
+                width: w,
+                height: h,
+                devicePixelRatio: pixelRatio
+            });
+            chart.setOption(option);
+            const buf = c.toBuffer('image/png');
+            chart.dispose();
+            const img = await loadImage(buf);
+            return { img, w, h };
+        };
+
+        const a = await renderSub(chart1, parseInt(chart1.width) || 640, parseInt(chart1.height) || 420);
+        const b = await renderSub(chart2, parseInt(chart2.width) || 640, parseInt(chart2.height) || 420);
+
+        let W, H, aRect, bRect;
+        if (direction === 'vertical') {
+            // 竖排（上下）：等宽对齐
+            const tw = Math.max(a.w, b.w);
+            aRect = { w: tw, h: Math.round(a.h * (tw / a.w)) };
+            bRect = { w: tw, h: Math.round(b.h * (tw / b.w)) };
+            W = tw;
+            H = aRect.h + bRect.h + gap;
+        } else {
+            // 横排（左右）：等高对齐
+            const th = Math.max(a.h, b.h);
+            aRect = { w: Math.round(a.w * (th / a.h)), h: th };
+            bRect = { w: Math.round(b.w * (th / b.h)), h: th };
+            W = aRect.w + bRect.w + gap;
+            H = th;
+        }
+
+        const canvas = createCanvas(W * pixelRatio, H * pixelRatio);
+        const ctx = canvas.getContext('2d');
+        ctx.fillStyle = background;
+        ctx.fillRect(0, 0, W * pixelRatio, H * pixelRatio);
+
+        if (direction === 'vertical') {
+            // 5 参数形式：drawImage(img, dx, dy, dw, dh)，源整图缩放到目标矩形
+            ctx.drawImage(a.img, 0, 0, aRect.w * pixelRatio, aRect.h * pixelRatio);
+            ctx.drawImage(b.img, 0, (aRect.h + gap) * pixelRatio, bRect.w * pixelRatio, bRect.h * pixelRatio);
+        } else {
+            ctx.drawImage(a.img, 0, 0, aRect.w * pixelRatio, aRect.h * pixelRatio);
+            ctx.drawImage(b.img, (aRect.w + gap) * pixelRatio, 0, bRect.w * pixelRatio, bRect.h * pixelRatio);
+        }
+
+        const buffer = canvas.toBuffer('image/png');
+        res.set({
+            'Content-Type': 'image/png',
+            'Content-Length': buffer.length,
+            'X-Combine-Direction': direction,
+            'X-Chart-Width': W,
+            'X-Chart-Height': H
+        });
+        res.send(buffer);
+    } catch (err) {
+        console.error('Combine error:', err);
+        res.status(500).json({ error: '双图合并失败: ' + err.message });
+    }
+});
+
 // ===== 启动服务 =====
 app.listen(PORT, '0.0.0.0', () => {
    console.log(`🚀 数据可视化图表生成器已启动`);
    console.log(`📊 Web UI:  http://0.0.0.0:${PORT}`);
    console.log(`📡 图表API: http://0.0.0.0:${PORT}/api/chart`);
    console.log(`📋 表格API: http://0.0.0.0:${PORT}/api/table`);
+    console.log(`🖼️  合并API: http://0.0.0.0:${PORT}/api/combine`);
    console.log(`📖 文档:   http://0.0.0.0:${PORT}/api/docs`);
    console.log(`❤️  健康:   http://0.0.0.0:${PORT}/api/health`);
 });
@@ -428,6 +428,53 @@ body {
    color: white;
 }

+/* ===== 双图合并 ===== */
+.combine-direction {
+    display: flex;
+    gap: 16px;
+    flex-wrap: wrap;
+}
+
+.dir-option {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 12px;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    background: #f8fafc;
+    cursor: pointer;
+    font-size: 0.9rem;
+    transition: all 0.2s;
+}
+
+.dir-option:hover {
+    border-color: var(--primary);
+}
+
+.dir-option:has(input:checked) {
+    border-color: var(--primary);
+    background: #eef2ff;
+    color: var(--primary);
+    font-weight: 500;
+}
+
+.combine-chart-card {
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    padding: 14px;
+    margin-bottom: 14px;
+    background: #f8fafc;
+}
+
+.combine-chart-card h3 {
+    font-size: 0.95rem;
+    margin-bottom: 12px;
+    padding-bottom: 8px;
+    border-bottom: 1px dashed var(--border);
+    color: var(--text);
+}
+
 /* ===== 表格预览 ===== */
 .table-preview {
    width: 100%;