feat: 双Y轴左右轴可独立命名 + 不同轴可设不同图表类型

- 双Y轴：左右两个轴都可单独命名（左轴名称/右轴名称输入框）
- 修复系列类型下拉不生效的 bug（seriesTypeOverrides 只写不读），
  现在每个系列可独立设置柱状/折线，结合轴分配实现'左轴柱状+右轴折线'
- 后端 /api/chart 新增 leftAxisName + seriesTypes 参数（POST/GET 均可）

API.md

@@ -45,6 +45,11 @@ Content-Type: application/json
 | `leftLabel` | string | — | `"左侧"` | 左侧区域标签 |
 | `rightLabel` | string | — | `"右侧"` | 右侧区域标签 |
 | `splitStyle` | string | — | `"solid"` | 分割线样式：`solid` / `dashed` / `dotted` |
+| `dualYAxis` | boolean | — | `false` | 启用双Y轴（左右量度不同） |
+| `rightAxisSeries` | array | — | `null` | 右轴系列名列表，如 `["利润"]`（未列出的系列用左轴） |
+| `leftAxisName` | string | — | `""` | 左轴名称（如 `"销售额(元)"`） |
+| `rightAxisName` | string | — | `""` | 右轴名称（如 `"增长率(%)"`） |
+| `seriesTypes` | array | — | `null` | 每系列图表类型，按系列顺序对应，如 `["bar","line"]`（`bar`/`line`/`auto`） |
 | `width` | number | — | `800` | 图片宽度（px） |
 | `height` | number | — | `500` | 图片高度（px） |
 | `pixelRatio` | number | — | `2` | 像素倍率（越大越清晰） |

README.md

@@ -11,6 +11,7 @@
 - **柱状图** - 支持单系列/多系列对比
 - **折线图** - 支持平滑曲线、面积填充
 - **混合图** - 柱状图+折线图组合展示
+- **双Y轴** - 一张图左右两个坐标轴，量度可不同，左右轴可独立命名，系列可指定左轴/右轴且每种类型独立设置（柱状/折线）
 
 ### 📋 表格功能
 - **表格图片生成** - 根据数据生成精美的表格图片

app.js

@@ -3,6 +3,7 @@ let chartInstance = null;
 let parsedData = null;
 let seriesColors = [];
 let seriesOrder = [];
+let seriesAxis = []; // 每个系列所属轴：0=左轴 1=右轴
 let currentMode = 'chart'; // 'chart' or 'table'
 let tableImageBlob = null;
 
@@ -131,6 +132,7 @@ function generateChart() {
     seriesOrder = parsedData.seriesNames.map((_, i) => i);
     const palette = colorPalettes[document.getElementById('themeStyle').value] || colorPalettes.default;
     seriesColors = parsedData.seriesNames.map((_, i) => palette[i % palette.length]);
+    seriesAxis = parsedData.seriesNames.map(() => 0);
 
     // 渲染系列配置
     renderSeriesConfig();
@@ -172,6 +174,9 @@ function updateChart() {
     const stackMode = document.getElementById('stackMode').checked;
     const smoothLine = document.getElementById('smoothLine').checked;
     const enableSplit = document.getElementById('enableSplit').checked;
+    const dualAxis = document.getElementById('dualAxis').checked;
+    const leftAxisName = document.getElementById('leftAxisName').value;
+    const rightAxisName = document.getElementById('rightAxisName').value;
 
     // 显示/隐藏分割配置
     document.getElementById('splitConfig').style.display = enableSplit ? 'block' : 'none';
@@ -187,10 +192,17 @@ function updateChart() {
         const name = parsedData.seriesNames[origIdx];
         const data = parsedData.seriesData[name];
         const color = seriesColors[origIdx] || palette[origIdx % palette.length];
-        
+
-        let type = chartType === 'bar-line' 
+        // 系列类型：优先用系列配置的独立覆盖（支持不同轴不同图表类型）
-            ? (displayIdx % 2 === 0 ? 'bar' : 'line') 
+        const override = window.seriesTypeOverrides && window.seriesTypeOverrides[origIdx];
-            : chartType;
+        let type;
+        if (override && override !== 'auto') {
+            type = override;
+        } else if (chartType === 'bar-line') {
+            type = displayIdx % 2 === 0 ? 'bar' : 'line';
+        } else {
+            type = chartType;
+        }
 
         const seriesItem = {
             name: name,
@@ -248,6 +260,11 @@ function updateChart() {
             };
         }
 
+        // 双Y轴：按系列指定左右轴
+        if (dualAxis) {
+            seriesItem.yAxisIndex = (seriesAxis[origIdx] === 1) ? 1 : 0;
+        }
+
         return seriesItem;
     });
 
@@ -379,7 +396,30 @@ function updateChart() {
             },
             axisTick: { show: false }
         },
-        yAxis: {
+        yAxis: dualAxis ? [
+            {
+                type: 'value',
+                name: leftAxisName || '左轴',
+                nameTextStyle: { color: textColor, fontSize: 11, padding: [0, 0, 0, 4] },
+                axisLine: { show: false },
+                axisTick: { show: false },
+                axisLabel: { color: textColor, fontSize: 11 },
+                splitLine: {
+                    show: showGrid,
+                    lineStyle: { color: theme === 'dark' ? '#333' : '#f0f0f0', type: 'dashed' }
+                }
+            },
+            {
+                type: 'value',
+                name: rightAxisName || '右轴',
+                position: 'right',
+                nameTextStyle: { color: textColor, fontSize: 11, padding: [0, 4, 0, 0] },
+                axisLine: { show: false },
+                axisTick: { show: false },
+                axisLabel: { color: textColor, fontSize: 11 },
+                splitLine: { show: false }
+            }
+        ] : {
             type: 'value',
             axisLine: { show: false },
             axisTick: { show: false },
@@ -466,6 +506,13 @@ function renderSeriesConfig() {
     seriesOrder.forEach((origIdx, displayIdx) => {
         const name = parsedData.seriesNames[origIdx];
         const color = seriesColors[origIdx];
+        const dualAxis = document.getElementById('dualAxis').checked;
+        const axisSelect = dualAxis ? `
+            <select onchange="updateSeriesAxis(${origIdx}, this.value)" title="所属坐标轴">
+                <option value="0" ${seriesAxis[origIdx] === 0 ? 'selected' : ''}>左轴</option>
+                <option value="1" ${seriesAxis[origIdx] === 1 ? 'selected' : ''}>右轴</option>
+            </select>
+        ` : '';
 
         const item = document.createElement('div');
         item.className = 'series-item';
@@ -481,6 +528,7 @@ function renderSeriesConfig() {
                 <option value="bar">柱状</option>
                 <option value="line">折线</option>
             </select>
+            ${axisSelect}
         `;
 
         // 拖拽事件
@@ -566,6 +614,19 @@ function updateSeriesType(origIdx, type) {
     updateChart();
 }
 
+// ===== 双Y轴 =====
+function onDualAxisChange() {
+    const on = document.getElementById('dualAxis').checked;
+    document.getElementById('rightAxisGroup').style.display = on ? 'block' : 'none';
+    renderSeriesConfig(); // 显示/隐藏系列轴选择
+    updateChart();
+}
+
+function updateSeriesAxis(origIdx, axis) {
+    seriesAxis[origIdx] = parseInt(axis) || 0;
+    updateChart();
+}
+
 // ===== 工具函数 =====
 function adjustColor(hex, amount) {
     hex = hex.replace('#', '');

index.html

@@ -100,8 +100,19 @@ C, 20, 30, 40</pre>
                             <label><input type="checkbox" id="showLabel" onchange="updateChart()"> 数据标签</label>
                             <label><input type="checkbox" id="stackMode" onchange="updateChart()"> 堆叠模式</label>
                             <label><input type="checkbox" id="smoothLine" checked onchange="updateChart()"> 平滑曲线</label>
+                            <label><input type="checkbox" id="dualAxis" onchange="onDualAxisChange()"> 双Y轴</label>
                         </div>
                     </div>
+
+                    <div class="config-group" id="rightAxisGroup" style="display:none;">
+                        <label>左右轴名称（量度可不同）</label>
+                        <div class="res-input-row">
+                            <input type="text" id="leftAxisName" placeholder="左轴，如：销售额" oninput="updateChart()">
+                            <span class="res-times">/</span>
+                            <input type="text" id="rightAxisName" placeholder="右轴，如：增长率(%)" oninput="updateChart()">
+                        </div>
+                        <p class="hint-text">在下方「系列配置」中可指定每个系列用左轴/右轴及图表类型（柱状/折线）</p>
+                    </div>
                 </div>
 
                 <!-- 表格配置区 -->
@@ -394,18 +405,20 @@ C, 20, 30, 40</pre>
 
             <!-- 右侧面板：图表预览 + 导出预览 + 风格切换 -->
             <div class="right-panel">
-                <div class="chart-container">
+                <div class="right-main">
-                    <div id="chartArea" class="chart-area">
+                    <div class="chart-container">
-                        <div class="placeholder">
+                        <div id="chartArea" class="chart-area">
-                            <p>📊</p>
+                            <div class="placeholder">
-                            <p>输入数据后点击"生成图表"</p>
+                                <p>📊</p>
+                                <p>输入数据后点击"生成图表"</p>
+                            </div>
                         </div>
                     </div>
-                </div>
+                    <!-- 导出效果预览（按分辨率居中展示保存后的图） -->
-                <!-- 导出效果预览（按分辨率居中展示保存后的图） -->
+                    <div class="export-preview-box" id="exportPreviewBox" style="display:none;">
-                <div class="export-preview-box" id="exportPreviewBox" style="display:none;">
+                        <div class="export-preview-title" id="exportPreviewTitle">📐 导出预览</div>
-                    <div class="export-preview-title" id="exportPreviewTitle">📐 导出预览</div>
+                        <div class="export-preview-inner" id="exportPreviewInner"></div>
-                    <div class="export-preview-inner" id="exportPreviewInner"></div>
+                    </div>
                 </div>
                 <!-- 风格快速切换按钮（放在图表右侧） -->
                 <div class="theme-buttons-section">

server.js

@@ -113,7 +113,12 @@ function buildChartOption(params) {
         leftLabel = '左侧',
         rightLabel = '右侧',
         splitStyle = 'solid',
-        seriesColors: customColors = null
+        seriesColors: customColors = null,
+        dualYAxis = false,
+        rightAxisSeries = null,
+        leftAxisName = '',
+        rightAxisName = '',
+        seriesTypes = null
     } = params;
 
     const parsedData = parseData(data);
@@ -134,6 +139,11 @@ function buildChartOption(params) {
             ? (idx % 2 === 0 ? 'bar' : 'line')
             : chartType;
 
+        // 每系列独立类型覆盖（seriesTypes 数组按系列顺序对应）
+        if (Array.isArray(seriesTypes) && seriesTypes[idx] && seriesTypes[idx] !== 'auto') {
+            type = seriesTypes[idx];
+        }
+
         const seriesItem = {
             name: name,
             type: type,
@@ -148,6 +158,12 @@ function buildChartOption(params) {
             }
         };
 
+        // 双Y轴：rightAxisSeries 指定右轴系列名
+        if (dualYAxis) {
+            const rightNames = Array.isArray(rightAxisSeries) ? rightAxisSeries : (rightAxisSeries ? [rightAxisSeries] : []);
+            seriesItem.yAxisIndex = rightNames.includes(name) ? 1 : 0;
+        }
+
         if (stackMode) {
             seriesItem.stack = 'total';
         }
@@ -159,8 +175,7 @@ function buildChartOption(params) {
             seriesItem.areaStyle = theme === 'gradient' ? { opacity: 0.15 } : undefined;
         }
 
-        if (type === 'bar') {
+        if (type === 'bar') {seriesItem.barMaxWidth = 40;
-            seriesItem.barMaxWidth = 40;
             seriesItem.itemStyle.borderRadius = stackMode ? [0, 0, 0, 0] : [4, 4, 0, 0];
         }
 
@@ -269,7 +284,33 @@ function buildChartOption(params) {
             },
             axisTick: { show: false }
         },
-        yAxis: {
+        yAxis: dualYAxis ? [
+            {
+                type: 'value',
+                name: leftAxisName || '左轴',
+                nameTextStyle: { color: textColor, fontSize: 11, padding: [0, 0, 0, 4] },
+                axisLine: { show: false },
+                axisTick: { show: false },
+                axisLabel: { color: textColor, fontSize: 11 },
+                splitLine: {
+                    show: showGrid,
+                    lineStyle: {
+                        color: theme === 'dark' ? '#333' : '#f0f0f0',
+                        type: 'dashed'
+                    }
+                }
+            },
+            {
+                type: 'value',
+                name: rightAxisName || '右轴',
+                position: 'right',
+                nameTextStyle: { color: textColor, fontSize: 11, padding: [0, 4, 0, 0] },
+                axisLine: { show: false },
+                axisTick: { show: false },
+                axisLabel: { color: textColor, fontSize: 11 },
+                splitLine: { show: false }
+            }
+        ] : {
             type: 'value',
             axisLine: { show: false },
             axisTick: { show: false },
@@ -366,6 +407,11 @@ app.get('/api/chart', (req, res) => {
             leftLabel: req.query.leftLabel || '左侧',
             rightLabel: req.query.rightLabel || '右侧',
             splitStyle: req.query.splitStyle || 'solid',
+            dualYAxis: req.query.dualYAxis === 'true',
+            rightAxisSeries: req.query.rightAxisSeries ? req.query.rightAxisSeries.split(',') : null,
+            leftAxisName: req.query.leftAxisName || '',
+            rightAxisName: req.query.rightAxisName || '',
+            seriesTypes: req.query.seriesTypes ? req.query.seriesTypes.split(',') : null,
             width: parseInt(req.query.width) || 800,
             height: parseInt(req.query.height) || 500,
             format: req.query.format || 'png',
@@ -882,7 +928,7 @@ app.get('/api/health', (req, res) => {
     res.json({
         status: 'ok',
         service: 'data-chart-tool',
-        version: '1.10.0',
+        version: '1.12.0',
         endpoints: {
             'POST /api/chart': '生成图表图片（JSON body）',
             'GET /api/chart': '生成图表图片（URL 参数）',
@@ -897,7 +943,7 @@ app.get('/api/health', (req, res) => {
 app.get('/api/docs', (req, res) => {
     res.json({
         name: '数据可视化图表生成器 API',
-        version: '1.10.0',
+        version: '1.12.0',
         endpoints: [
             {
                 method: 'POST',
@@ -922,7 +968,12 @@ app.get('/api/docs', (req, res) => {
                     width: { type: 'number', default: 800, description: '图片宽度(px)' },
                     height: { type: 'number', default: 500, description: '图片高度(px)' },
                     format: { type: 'string', default: 'png', options: ['png'], description: '输出格式' },
-                    pixelRatio: { type: 'number', default: 2, description: '像素倍率（清晰度）' }
+                    pixelRatio: { type: 'number', default: 2, description: '像素倍率（清晰度）' },
+                    dualYAxis: { type: 'boolean', default: false, description: '是否启用双Y轴（左右量度不同）' },
+                    rightAxisSeries: { type: 'array', default: null, description: '右轴系列名列表（如 ["利润"]，指定哪些系列用右轴）' },
+                    leftAxisName: { type: 'string', default: '', description: '左轴名称' },
+                    rightAxisName: { type: 'string', default: '', description: '右轴名称' },
+                    seriesTypes: { type: 'array', default: null, description: '每系列图表类型（如 ["bar","line"]，按系列顺序对应，bar/line/auto）' }
                 },
                 returns: 'image/png',
                 example: {

style.css

@@ -325,9 +325,18 @@ body {
     align-items: flex-start;
 }
 
-.chart-container {
+/* 右侧主区域：原图预览 + 导出预览 上下排列 */
+.right-main {
     flex: 1;
     min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+}
+
+.chart-container {
+    flex: none;
+    min-width: 0;
     background: var(--panel-bg);
     border-radius: var(--radius);
     padding: 20px;
@@ -337,7 +346,7 @@ body {
 
 .chart-area {
     width: 100%;
-    height: 600px;
+    height: 420px;
 }
 
 .placeholder {
@@ -370,7 +379,7 @@ body {
     }
     
     .chart-area {
-        height: 450px;
+        height: 320px;
     }
     
     /* 小屏幕下风格按钮回到图表下方 */
@@ -719,6 +728,15 @@ input[type="range"]::-moz-range-thumb {
 }
 
 .btn-sm {
-    padding: 6px 12px;
+    padding: 4px 10px;
-    font-size: 0.82rem;
+    font-size: 0.78rem;
+}
+
+/* 导出设置折叠栏下载按钮（更小，避免挤占） */
+.export-header .btn-sm {
+    flex: 0 0 auto;
+    width: auto;
+    padding: 3px 8px;
+    font-size: 0.74rem;
+    white-space: nowrap;
 }