feat: 新增双图合并模式，支持横排/竖排将两张图合并为一张图
- 后端新增 POST /api/combine 接口（chart1/chart2 + direction/gap/pixelRatio/background）
- 前端新增 🖼️ 双图合并模式：两张图独立配置数据/标题/类型/主题
- 横排（左右等高三张图）或竖排（上下等宽），一键切换实时预览
- 修复 @napi-rs/canvas echarts 渲染需先 toBuffer 再 dispose 的关键问题
- 更新 README/API 文档
This commit is contained in:
+133
-2
@@ -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>
|
||||
|
||||
<!-- 右侧面板：图表预览 + 风格切换 -->
|
||||
|
||||
Reference in New Issue
Block a user