commit 121521456da921f937d67904678b97195ed37f3a
Author: hz4th_coder <hz4th_coder@tphai.com>
Date:   Sat Jun 13 14:04:01 2026 +0800

    feat: 初始化数据可视化图表生成器
    
    功能特性：
    - 支持柱状图、折线图、混合图
    - 支持多系列数据对比
    - 支持拖拽调整系列顺序和自定义颜色
    - 支持区域分割（左右对比）
    - 5种主题风格可选
    - 支持导出PNG/SVG
    - 响应式布局，适配移动端

diff --git a/app.js b/app.js
new file mode 100644
index 0000000..933b8e1
--- /dev/null
+++ b/app.js
@@ -0,0 +1,607 @@
+// ===== 全局状态 =====
+let chartInstance = null;
+let parsedData = null;
+let seriesColors = [];
+let seriesOrder = [];
+
+// ===== 预设颜色方案 =====
+const colorPalettes = {
+    default: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
+    dark: ['#4fc3f7', '#81c784', '#fff176', '#ff8a65', '#ba68c8', '#4dd0e1', '#ffab91', '#aed581', '#f48fb1'],
+    macarons: ['#2ec7c9', '#b6a2de', '#5ab1ef', '#ffb980', '#d87a80', '#8d98b3', '#e5cf0d', '#97b552', '#95706d'],
+    gradient: ['#7f7fd5', '#86a8e7', '#91eae4', '#ff6b6b', '#feca57', '#48dbfb', '#ff9ff3', '#54a0ff', '#5f27cd'],
+    retro: ['#d4a5a5', '#95b9c7', '#f6e8c3', '#dfceb4', '#a4c3b5', '#c9b1ff', '#f5c7b8', '#b8d4e3', '#e8c8a0']
+};
+
+// ===== 示例数据 =====
+const sampleDataSets = [
+    {
+        name: '季度销售对比',
+        data: `产品, Q1, Q2, Q3, Q4
+手机, 1200, 1800, 2100, 2500
+平板, 800, 950, 1100, 1300
+笔记本, 600, 750, 900, 1050
+耳机, 400, 520, 680, 800`
+    },
+    {
+        name: '年度增长趋势',
+        data: `指标, 2020年, 2021年, 2022年, 2023年, 2024年
+营收(万), 500, 680, 820, 1050, 1380
+利润(万), 80, 120, 160, 230, 350
+用户(千), 50, 85, 130, 200, 320`
+    },
+    {
+        name: '多指标对比（适合区域分割）',
+        data: `月份, 方案A-效率, 方案A-成本, 方案B-效率, 方案B-成本
+1月, 85, 120, 78, 135
+2月, 88, 115, 82, 128
+3月, 92, 108, 88, 120
+4月, 90, 112, 95, 110
+5月, 95, 105, 98, 105
+6月, 98, 98, 102, 95`
+    }
+];
+
+// ===== 初始化 =====
+document.addEventListener('DOMContentLoaded', () => {
+    // 默认加载第一个示例
+    document.getElementById('dataInput').value = sampleDataSets[0].data;
+    generateChart();
+});
+
+// ===== 数据解析 =====
+function parseData(rawText) {
+    const lines = rawText.trim().split('\n').filter(l => l.trim());
+    if (lines.length < 2) {
+        alert('数据至少需要包含表头和一行数据');
+        return null;
+    }
+
+    // 自动检测分隔符
+    let delimiter = ',';
+    if (lines[0].includes('\t')) {
+        delimiter = '\t';
+    } else if (lines[0].split('|').length > lines[0].split(',').length) {
+        delimiter = '|';
+    }
+
+    const rows = lines.map(line => {
+        return line.split(delimiter).map(cell => cell.trim());
+    });
+
+    const headers = rows[0];
+    const categories = [];
+    const seriesData = {};
+
+    // 第一列是横坐标，其余列是系列
+    for (let i = 1; i < headers.length; i++) {
+        seriesData[headers[i]] = [];
+    }
+
+    for (let i = 1; i < rows.length; i++) {
+        categories.push(rows[i][0]);
+        for (let j = 1; j < rows[i].length && j < headers.length; j++) {
+            const val = parseFloat(rows[i][j]);
+            seriesData[headers[j]].push(isNaN(val) ? 0 : val);
+        }
+    }
+
+    return {
+        categories,
+        seriesNames: headers.slice(1),
+        seriesData
+    };
+}
+
+// ===== 生成图表 =====
+function generateChart() {
+    const rawText = document.getElementById('dataInput').value;
+    if (!rawText.trim()) {
+        alert('请输入数据');
+        return;
+    }
+
+    parsedData = parseData(rawText);
+    if (!parsedData) return;
+
+    // 初始化系列顺序和颜色
+    seriesOrder = parsedData.seriesNames.map((_, i) => i);
+    const palette = colorPalettes[document.getElementById('themeStyle').value] || colorPalettes.default;
+    seriesColors = parsedData.seriesNames.map((_, i) => palette[i % palette.length]);
+
+    // 渲染系列配置
+    renderSeriesConfig();
+
+    // 初始化图表
+    initChart();
+    updateChart();
+}
+
+// ===== 初始化图表实例 =====
+function initChart() {
+    const chartDom = document.getElementById('chartArea');
+    chartDom.innerHTML = '';
+    
+    if (chartInstance) {
+        chartInstance.dispose();
+    }
+    
+    chartInstance = echarts.init(chartDom, null, { renderer: 'canvas' });
+    
+    // 响应式
+    window.addEventListener('resize', () => {
+        chartInstance && chartInstance.resize();
+    });
+}
+
+// ===== 更新图表 =====
+function updateChart() {
+    if (!parsedData || !chartInstance) return;
+
+    const chartType = document.getElementById('chartType').value;
+    const title = document.getElementById('chartTitle').value;
+    const theme = document.getElementById('themeStyle').value;
+    const showLegend = document.getElementById('showLegend').checked;
+    const showGrid = document.getElementById('showGrid').checked;
+    const showLabel = document.getElementById('showLabel').checked;
+    const stackMode = document.getElementById('stackMode').checked;
+    const smoothLine = document.getElementById('smoothLine').checked;
+    const enableSplit = document.getElementById('enableSplit').checked;
+
+    // 显示/隐藏分割配置
+    document.getElementById('splitConfig').style.display = enableSplit ? 'block' : 'none';
+
+    // 背景色
+    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 = seriesOrder.map((origIdx, displayIdx) => {
+        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') 
+            : chartType;
+
+        const seriesItem = {
+            name: name,
+            type: type,
+            data: [...data],
+            itemStyle: { color: color },
+            emphasis: {
+                focus: 'series',
+                itemStyle: {
+                    shadowBlur: 10,
+                    shadowColor: 'rgba(0,0,0,0.3)'
+                }
+            }
+        };
+
+        // 堆叠
+        if (stackMode) {
+            seriesItem.stack = 'total';
+        }
+
+        // 折线图特有
+        if (type === 'line') {
+            seriesItem.smooth = smoothLine;
+            seriesItem.lineStyle = { width: 3 };
+            seriesItem.symbolSize = 8;
+            seriesItem.areaStyle = theme === 'gradient' ? {
+                opacity: 0.15
+            } : undefined;
+        }
+
+        // 柱状图特有
+        if (type === 'bar') {
+            seriesItem.barMaxWidth = 40;
+            seriesItem.itemStyle.borderRadius = stackMode ? [0, 0, 0, 0] : [4, 4, 0, 0];
+            if (theme === 'gradient') {
+                seriesItem.itemStyle.color = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: color },
+                    { offset: 1, color: adjustColor(color, 40) }
+                ]);
+            }
+        }
+
+        // 数据标签
+        if (showLabel) {
+            seriesItem.label = {
+                show: true,
+                position: type === 'bar' ? 'top' : 'top',
+                fontSize: 11,
+                color: textColor,
+                formatter: (params) => {
+                    if (params.value >= 10000) return (params.value / 10000).toFixed(1) + 'w';
+                    if (params.value >= 1000) return (params.value / 1000).toFixed(1) + 'k';
+                    return params.value;
+                }
+            };
+        }
+
+        return seriesItem;
+    });
+
+    // 区域分割 - 使用 graphic 组件精确画分割线在柱子间隙中
+    const graphicElements = [];
+    if (enableSplit) {
+        const splitIdx = parseInt(document.getElementById('splitIndex').value) || 3;
+        const leftLabel = document.getElementById('leftLabel').value || '左侧';
+        const rightLabel = document.getElementById('rightLabel').value || '右侧';
+        const splitStyle = document.getElementById('splitStyle').value;
+
+        if (splitIdx < parsedData.categories.length) {
+            // 区域背景色用 markArea
+            const splitLineColor = theme === 'dark' ? '#ff6b6b' : '#e74c3c';
+
+            if (series.length > 0) {
+                series[0].markArea = {
+                    silent: true,
+                    data: [
+                        [
+                            {
+                                name: leftLabel,
+                                xAxis: parsedData.categories[0],
+                                itemStyle: {
+                                    color: theme === 'dark' ? 'rgba(79,195,247,0.06)' : 'rgba(79,70,229,0.05)',
+                                    borderWidth: 0
+                                },
+                                label: {
+                                    show: true,
+                                    position: 'insideTop',
+                                    fontSize: 13,
+                                    fontWeight: 'bold',
+                                    color: theme === 'dark' ? '#4fc3f7' : '#4f46e5',
+                                    offset: [0, 10]
+                                }
+                            },
+                            { xAxis: parsedData.categories[splitIdx - 1] }
+                        ],
+                        [
+                            {
+                                name: rightLabel,
+                                xAxis: parsedData.categories[splitIdx],
+                                itemStyle: {
+                                    color: theme === 'dark' ? 'rgba(255,107,107,0.06)' : 'rgba(239,68,68,0.05)',
+                                    borderWidth: 0
+                                },
+                                label: {
+                                    show: true,
+                                    position: 'insideTop',
+                                    fontSize: 13,
+                                    fontWeight: 'bold',
+                                    color: theme === 'dark' ? '#ff6b6b' : '#ef4444',
+                                    offset: [0, 10]
+                                }
+                            },
+                            { xAxis: parsedData.categories[parsedData.categories.length - 1] }
+                        ]
+                    ]
+                };
+            }
+
+            // 用 graphic 组件在渲染后画分割线（在柱子间隙中）
+            // 先存到全局，在 setOption 后通过 rendered 事件绘制
+            window._splitConfig = { splitIdx, splitLineColor, splitStyle, theme };
+        } else {
+            window._splitConfig = null;
+        }
+    } else {
+        window._splitConfig = null;
+    }
+
+    // 图表配置
+    const option = {
+        backgroundColor: bgColor,
+        title: title ? {
+            text: title,
+            left: 'center',
+            top: 15,
+            textStyle: {
+                color: textColor,
+                fontSize: 18,
+                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 },
+            axisPointer: {
+                type: chartType === 'bar' ? 'shadow' : 'cross',
+                crossStyle: { color: '#999' }
+            },
+            formatter: function(params) {
+                let html = `<div style="font-weight:600;margin-bottom:6px">${params[0].axisValue}</div>`;
+                params.forEach(p => {
+                    html += `<div style="display:flex;align-items:center;gap:6px;margin:3px 0">
+                        <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${p.color}"></span>
+                        <span>${p.seriesName}:</span>
+                        <span style="font-weight:600">${p.value.toLocaleString()}</span>
+                    </div>`;
+                });
+                return html;
+            }
+        },
+        legend: showLegend ? {
+            show: true,
+            top: title ? 50 : 15,
+            textStyle: { color: textColor, fontSize: 12 },
+            itemGap: 20,
+            icon: 'roundRect'
+        } : { show: false },
+        grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            top: showLegend ? (title ? 90 : 60) : (title ? 60 : 30),
+            containLabel: true
+        },
+        xAxis: {
+            type: 'category',
+            data: parsedData.categories,
+            axisLine: { lineStyle: { color: axisLineColor } },
+            axisLabel: { 
+                color: textColor, 
+                fontSize: 12,
+                interval: 0,
+                rotate: parsedData.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: series,
+        animationDuration: 800,
+        animationEasing: 'cubicOut'
+    };
+
+    chartInstance.setOption(option, true);
+
+    // 绘制分割线（在 category 间隙中）
+    drawSplitLine();
+}
+
+// ===== 在柱子间隙中精确绘制分割线 =====
+function drawSplitLine() {
+    if (!chartInstance || !window._splitConfig) {
+        if (chartInstance) {
+            chartInstance.setOption({ graphic: { elements: [] } });
+        }
+        return;
+    }
+
+    const { splitIdx, splitLineColor, splitStyle } = window._splitConfig;
+
+    // 使用 convertToPixel 获取 category 的像素坐标（x位置）
+    const leftX = chartInstance.convertToPixel({ xAxisIndex: 0 }, splitIdx - 1);
+    const rightX = chartInstance.convertToPixel({ xAxisIndex: 0 }, splitIdx);
+    const midX = (leftX + rightX) / 2;
+
+    // 使用内部 coordinateSystem 获取精确的绘图区域边界
+    // 这是ECharts内部稳定可用的接口
+    const gridRect = chartInstance.getModel()
+        .getComponent('grid', 0)
+        .coordinateSystem.getRect();
+    
+    const yTop = gridRect.y;
+    const yBottom = gridRect.y + gridRect.height;
+
+    // 虚线样式
+    let lineDash = null;
+    if (splitStyle === 'dashed') lineDash = [8, 4];
+    else if (splitStyle === 'dotted') lineDash = [3, 3];
+
+    chartInstance.setOption({
+        graphic: {
+            elements: [
+                {
+                    type: 'line',
+                    shape: {
+                        x1: midX,
+                        y1: yTop,
+                        x2: midX,
+                        y2: yBottom
+                    },
+                    style: {
+                        stroke: splitLineColor,
+                        lineWidth: 2,
+                        lineDash: lineDash
+                    },
+                    z: 100
+                }
+            ]
+        }
+    });
+}
+
+// ===== 渲染系列配置 =====
+function renderSeriesConfig() {
+    const container = document.getElementById('seriesConfig');
+    container.innerHTML = '';
+
+    seriesOrder.forEach((origIdx, displayIdx) => {
+        const name = parsedData.seriesNames[origIdx];
+        const color = seriesColors[origIdx];
+
+        const item = document.createElement('div');
+        item.className = 'series-item';
+        item.draggable = true;
+        item.dataset.index = displayIdx;
+
+        item.innerHTML = `
+            <span class="drag-handle">⠿</span>
+            <span class="series-name">${name}</span>
+            <input type="color" value="${color}" onchange="updateSeriesColor(${origIdx}, this.value)">
+            <select onchange="updateSeriesType(${origIdx}, this.value)">
+                <option value="auto">自动</option>
+                <option value="bar">柱状</option>
+                <option value="line">折线</option>
+            </select>
+        `;
+
+        // 拖拽事件
+        item.addEventListener('dragstart', handleDragStart);
+        item.addEventListener('dragover', handleDragOver);
+        item.addEventListener('drop', handleDrop);
+        item.addEventListener('dragend', handleDragEnd);
+
+        container.appendChild(item);
+    });
+}
+
+// ===== 拖拽排序 =====
+let draggedItem = null;
+
+function handleDragStart(e) {
+    draggedItem = this;
+    this.classList.add('dragging');
+    e.dataTransfer.effectAllowed = 'move';
+}
+
+function handleDragOver(e) {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'move';
+    
+    const rect = this.getBoundingClientRect();
+    const midY = rect.top + rect.height / 2;
+    
+    if (e.clientY < midY) {
+        this.style.borderTopColor = 'var(--primary)';
+        this.style.borderTopWidth = '2px';
+    } else {
+        this.style.borderBottomColor = 'var(--primary)';
+        this.style.borderBottomWidth = '2px';
+    }
+}
+
+function handleDrop(e) {
+    e.preventDefault();
+    
+    // 清除样式
+    document.querySelectorAll('.series-item').forEach(item => {
+        item.style.borderTopColor = '';
+        item.style.borderTopWidth = '';
+        item.style.borderBottomColor = '';
+        item.style.borderBottomWidth = '';
+    });
+
+    if (draggedItem === this) return;
+
+    const fromIdx = parseInt(draggedItem.dataset.index);
+    const toIdx = parseInt(this.dataset.index);
+
+    // 交换顺序
+    const temp = seriesOrder[fromIdx];
+    seriesOrder[fromIdx] = seriesOrder[toIdx];
+    seriesOrder[toIdx] = temp;
+
+    renderSeriesConfig();
+    updateChart();
+}
+
+function handleDragEnd() {
+    this.classList.remove('dragging');
+    document.querySelectorAll('.series-item').forEach(item => {
+        item.style.borderTopColor = '';
+        item.style.borderTopWidth = '';
+        item.style.borderBottomColor = '';
+        item.style.borderBottomWidth = '';
+    });
+}
+
+// ===== 系列操作 =====
+function updateSeriesColor(origIdx, color) {
+    seriesColors[origIdx] = color;
+    updateChart();
+}
+
+function updateSeriesType(origIdx, type) {
+    // 存储自定义类型覆盖
+    if (!window.seriesTypeOverrides) window.seriesTypeOverrides = {};
+    window.seriesTypeOverrides[origIdx] = type;
+    updateChart();
+}
+
+// ===== 工具函数 =====
+function adjustColor(hex, amount) {
+    hex = hex.replace('#', '');
+    const num = parseInt(hex, 16);
+    let r = Math.min(255, ((num >> 16) & 0xff) + amount);
+    let g = Math.min(255, ((num >> 8) & 0xff) + amount);
+    let b = Math.min(255, (num & 0xff) + amount);
+    return `rgb(${r},${g},${b})`;
+}
+
+function loadSampleData() {
+    // 循环切换示例
+    const currentIdx = sampleDataSets.findIndex(s => s.data === document.getElementById('dataInput').value);
+    const nextIdx = (currentIdx + 1) % sampleDataSets.length;
+    document.getElementById('dataInput').value = sampleDataSets[nextIdx].data;
+    generateChart();
+}
+
+function clearData() {
+    document.getElementById('dataInput').value = '';
+    document.getElementById('chartArea').innerHTML = `
+        <div class="placeholder">
+            <p>📊</p>
+            <p>输入数据后点击"生成图表"</p>
+        </div>
+    `;
+    if (chartInstance) {
+        chartInstance.dispose();
+        chartInstance = null;
+    }
+    parsedData = null;
+    document.getElementById('seriesConfig').innerHTML = '<p class="hint-text">生成图表后可在此调整各系列的顺序和颜色</p>';
+}
+
+// ===== 导出图表 =====
+function exportChart(format) {
+    if (!chartInstance) {
+        alert('请先生成图表');
+        return;
+    }
+
+    if (format === 'png') {
+        const url = chartInstance.getDataURL({
+            type: 'png',
+            pixelRatio: 2,
+            backgroundColor: document.getElementById('themeStyle').value === 'dark' ? '#1a1a2e' : '#fff'
+        });
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'chart.png';
+        a.click();
+    } else if (format === 'svg') {
+        // 重新用 SVG 渲染
+        const svgChart = echarts.init(document.createElement('div'), null, { renderer: 'svg' });
+        svgChart.setOption(chartInstance.getOption());
+        const url = svgChart.getDataURL({
+            type: 'svg',
+            pixelRatio: 2
+        });
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'chart.svg';
+        a.click();
+        svgChart.dispose();
+    }
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..648bc89
--- /dev/null
+++ b/index.html
@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>数据可视化图表生成器</title>
+    <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="app-container">
+        <!-- 顶部标题 -->
+        <header class="app-header">
+            <h1>📊 数据可视化图表生成器</h1>
+            <p class="subtitle">粘贴数据，生成精美图表</p>
+        </header>
+
+        <div class="main-content">
+            <!-- 左侧面板：数据输入和配置 -->
+            <div class="left-panel">
+                <!-- 数据输入区 -->
+                <div class="panel-section">
+                    <h2>📝 数据输入</h2>
+                    <div class="input-format-hint">
+                        <p><strong>格式说明：</strong></p>
+                        <p>第一行为表头（系列名称），第一列为横坐标值</p>
+                        <pre>类别, 系列1, 系列2, 系列3
+A, 10, 20, 30
+B, 15, 25, 35
+C, 20, 30, 40</pre>
+                    </div>
+                    <textarea id="dataInput" placeholder="在此粘贴数据...&#10;支持逗号、制表符分隔&#10;&#10;示例：&#10;产品, 2023年, 2024年, 2025年&#10;Q1, 120, 150, 180&#10;Q2, 200, 220, 260&#10;Q3, 180, 210, 240&#10;Q4, 250, 280, 320"></textarea>
+                    <div class="btn-group">
+                        <button class="btn btn-primary" onclick="generateChart()">🎨 生成图表</button>
+                        <button class="btn btn-secondary" onclick="loadSampleData()">📋 加载示例</button>
+                        <button class="btn btn-secondary" onclick="clearData()">🗑️ 清空</button>
+                    </div>
+                </div>
+
+                <!-- 图表配置区 -->
+                <div class="panel-section">
+                    <h2>⚙️ 图表配置</h2>
+                    
+                    <div class="config-group">
+                        <label>图表类型</label>
+                        <select id="chartType" onchange="updateChart()">
+                            <option value="bar">柱状图</option>
+                            <option value="line">折线图</option>
+                            <option value="bar-line">柱状图+折线图混合</option>
+                        </select>
+                    </div>
+
+                    <div class="config-group">
+                        <label>标题</label>
+                        <input type="text" id="chartTitle" placeholder="图表标题" oninput="updateChart()">
+                    </div>
+
+                    <div class="config-group">
+                        <label>主题风格</label>
+                        <select id="themeStyle" onchange="updateChart()">
+                            <option value="default">默认</option>
+                            <option value="dark">深色</option>
+                            <option value="macarons">马卡龙</option>
+                            <option value="gradient">渐变</option>
+                            <option value="retro">复古</option>
+                        </select>
+                    </div>
+
+                    <div class="config-group">
+                        <label>显示选项</label>
+                        <div class="checkbox-group">
+                            <label><input type="checkbox" id="showLegend" checked onchange="updateChart()"> 图例</label>
+                            <label><input type="checkbox" id="showGrid" checked onchange="updateChart()"> 网格线</label>
+                            <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>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 系列配置区 -->
+                <div class="panel-section">
+                    <h2>🎨 系列配置</h2>
+                    <div id="seriesConfig" class="series-config">
+                        <p class="hint-text">生成图表后可在此调整各系列的顺序和颜色</p>
+                    </div>
+                </div>
+
+                <!-- 区域分割配置 -->
+                <div class="panel-section">
+                    <h2>📐 区域分割</h2>
+                    <div class="config-group">
+                        <label><input type="checkbox" id="enableSplit" onchange="updateChart()"> 启用区域分割</label>
+                    </div>
+                    <div id="splitConfig" class="split-config" style="display:none;">
+                        <div class="config-group">
+                            <label>分割位置（横坐标索引，如：3 表示在第3个数据后分割）</label>
+                            <input type="number" id="splitIndex" value="3" min="1" oninput="updateChart()">
+                        </div>
+                        <div class="config-group">
+                            <label>左侧区域标签</label>
+                            <input type="text" id="leftLabel" placeholder="如：2023年" oninput="updateChart()">
+                        </div>
+                        <div class="config-group">
+                            <label>右侧区域标签</label>
+                            <input type="text" id="rightLabel" placeholder="如：2024年" oninput="updateChart()">
+                        </div>
+                        <div class="config-group">
+                            <label>分割线样式</label>
+                            <select id="splitStyle" onchange="updateChart()">
+                                <option value="solid">实线</option>
+                                <option value="dashed">虚线</option>
+                                <option value="dotted">点线</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 导出按钮 -->
+                <div class="panel-section">
+                    <div class="btn-group">
+                        <button class="btn btn-success" onclick="exportChart('png')">📥 导出PNG</button>
+                        <button class="btn btn-success" onclick="exportChart('svg')">📥 导出SVG</button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 右侧面板：图表预览 -->
+            <div class="right-panel">
+                <div class="chart-container">
+                    <div id="chartArea" class="chart-area">
+                        <div class="placeholder">
+                            <p>📊</p>
+                            <p>输入数据后点击"生成图表"</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="app.js"></script>
+</body>
+</html>
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..91bf2c1
--- /dev/null
+++ b/style.css
@@ -0,0 +1,380 @@
+/* ===== 全局样式 ===== */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+:root {
+    --primary: #4f46e5;
+    --primary-hover: #4338ca;
+    --success: #10b981;
+    --success-hover: #059669;
+    --bg: #f8fafc;
+    --panel-bg: #ffffff;
+    --border: #e2e8f0;
+    --text: #1e293b;
+    --text-light: #64748b;
+    --shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
+    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
+    --radius: 12px;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+    background: var(--bg);
+    color: var(--text);
+    min-height: 100vh;
+}
+
+/* ===== 布局 ===== */
+.app-container {
+    max-width: 1600px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+.app-header {
+    text-align: center;
+    padding: 20px 0 30px;
+}
+
+.app-header h1 {
+    font-size: 2rem;
+    background: linear-gradient(135deg, var(--primary), #7c3aed);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.subtitle {
+    color: var(--text-light);
+    margin-top: 5px;
+    font-size: 0.95rem;
+}
+
+.main-content {
+    display: grid;
+    grid-template-columns: 420px 1fr;
+    gap: 20px;
+    align-items: start;
+}
+
+/* ===== 左侧面板 ===== */
+.left-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    max-height: calc(100vh - 140px);
+    overflow-y: auto;
+    padding-right: 8px;
+}
+
+.left-panel::-webkit-scrollbar {
+    width: 6px;
+}
+
+.left-panel::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.left-panel::-webkit-scrollbar-thumb {
+    background: #cbd5e1;
+    border-radius: 3px;
+}
+
+.panel-section {
+    background: var(--panel-bg);
+    border-radius: var(--radius);
+    padding: 20px;
+    box-shadow: var(--shadow);
+    border: 1px solid var(--border);
+}
+
+.panel-section h2 {
+    font-size: 1.05rem;
+    margin-bottom: 12px;
+    color: var(--text);
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+/* ===== 数据输入 ===== */
+.input-format-hint {
+    background: #f1f5f9;
+    border-radius: 8px;
+    padding: 10px 14px;
+    margin-bottom: 12px;
+    font-size: 0.82rem;
+    color: var(--text-light);
+}
+
+.input-format-hint pre {
+    margin-top: 6px;
+    font-family: 'Fira Code', monospace;
+    font-size: 0.78rem;
+    color: var(--primary);
+    white-space: pre-wrap;
+}
+
+#dataInput {
+    width: 100%;
+    height: 180px;
+    border: 2px solid var(--border);
+    border-radius: 8px;
+    padding: 12px;
+    font-family: 'Fira Code', 'Courier New', monospace;
+    font-size: 0.85rem;
+    resize: vertical;
+    transition: border-color 0.2s;
+    line-height: 1.5;
+}
+
+#dataInput:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+}
+
+/* ===== 按钮 ===== */
+.btn-group {
+    display: flex;
+    gap: 8px;
+    margin-top: 12px;
+    flex-wrap: wrap;
+}
+
+.btn {
+    padding: 8px 16px;
+    border: none;
+    border-radius: 8px;
+    font-size: 0.88rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.btn-primary {
+    background: var(--primary);
+    color: white;
+}
+
+.btn-primary:hover {
+    background: var(--primary-hover);
+    transform: translateY(-1px);
+    box-shadow: var(--shadow);
+}
+
+.btn-secondary {
+    background: #f1f5f9;
+    color: var(--text);
+    border: 1px solid var(--border);
+}
+
+.btn-secondary:hover {
+    background: #e2e8f0;
+}
+
+.btn-success {
+    background: var(--success);
+    color: white;
+    flex: 1;
+}
+
+.btn-success:hover {
+    background: var(--success-hover);
+    transform: translateY(-1px);
+}
+
+/* ===== 配置区 ===== */
+.config-group {
+    margin-bottom: 12px;
+}
+
+.config-group > label {
+    display: block;
+    font-size: 0.85rem;
+    font-weight: 500;
+    color: var(--text-light);
+    margin-bottom: 5px;
+}
+
+.config-group select,
+.config-group input[type="text"],
+.config-group input[type="number"] {
+    width: 100%;
+    padding: 8px 12px;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    font-size: 0.88rem;
+    background: white;
+    transition: border-color 0.2s;
+}
+
+.config-group select:focus,
+.config-group input:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+}
+
+.checkbox-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.checkbox-group label {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 0.83rem;
+    color: var(--text);
+    cursor: pointer;
+    background: #f8fafc;
+    padding: 4px 10px;
+    border-radius: 6px;
+    border: 1px solid var(--border);
+    transition: all 0.2s;
+}
+
+.checkbox-group label:hover {
+    background: #f1f5f9;
+    border-color: var(--primary);
+}
+
+.checkbox-group input[type="checkbox"] {
+    accent-color: var(--primary);
+}
+
+/* ===== 系列配置 ===== */
+.series-config {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.series-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    background: #f8fafc;
+    border-radius: 8px;
+    border: 1px solid var(--border);
+    cursor: grab;
+    transition: all 0.2s;
+}
+
+.series-item:hover {
+    border-color: var(--primary);
+    box-shadow: var(--shadow);
+}
+
+.series-item.dragging {
+    opacity: 0.5;
+    cursor: grabbing;
+}
+
+.series-item .drag-handle {
+    color: #94a3b8;
+    cursor: grab;
+    font-size: 1.1rem;
+}
+
+.series-item .series-name {
+    flex: 1;
+    font-size: 0.85rem;
+    font-weight: 500;
+}
+
+.series-item input[type="color"] {
+    width: 32px;
+    height: 32px;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    padding: 0;
+}
+
+.series-item select {
+    padding: 4px 8px;
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    font-size: 0.8rem;
+    background: white;
+}
+
+.hint-text {
+    font-size: 0.83rem;
+    color: var(--text-light);
+    text-align: center;
+    padding: 10px;
+}
+
+/* ===== 右侧图表区 ===== */
+.right-panel {
+    position: sticky;
+    top: 20px;
+}
+
+.chart-container {
+    background: var(--panel-bg);
+    border-radius: var(--radius);
+    padding: 20px;
+    box-shadow: var(--shadow-lg);
+    border: 1px solid var(--border);
+}
+
+.chart-area {
+    width: 100%;
+    height: 600px;
+}
+
+.placeholder {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-light);
+}
+
+.placeholder p:first-child {
+    font-size: 4rem;
+    margin-bottom: 16px;
+}
+
+.placeholder p:last-child {
+    font-size: 1.1rem;
+}
+
+/* ===== 响应式 ===== */
+@media (max-width: 1024px) {
+    .main-content {
+        grid-template-columns: 1fr;
+    }
+    
+    .left-panel {
+        max-height: none;
+    }
+    
+    .chart-area {
+        height: 450px;
+    }
+}
+
+/* ===== 动画 ===== */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.panel-section {
+    animation: fadeIn 0.3s ease-out;
+}