<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>排列图生成器</title>
    <link rel="icon" type="image/svg+xml"
        href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' width='200' height='200'%3E%3Cdefs%3E%3ClinearGradient id='redGradient' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23FF4757;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%23E84118;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='20' y='20' width='160' height='160' rx='35' fill='url(%23redGradient)'/%3E%3Cg transform='translate(100, 100)'%3E%3Cg%3E%3Ccircle cx='0' cy='0' r='40' fill='none' stroke='%23FFFFFF' stroke-width='18'/%3E%3Crect x='-7' y='-55' width='14' height='18' fill='%23FFFFFF' rx='3'/%3E%3Crect x='-7' y='37' width='14' height='18' fill='%23FFFFFF' rx='3'/%3E%3Cg transform='rotate(60)'%3E%3Crect x='-7' y='-55' width='14' height='18' fill='%23FFFFFF' rx='3'/%3E%3Crect x='-7' y='37' width='14' height='18' fill='%23FFFFFF' rx='3'/%3E%3C/g%3E%3Cg transform='rotate(120)'%3E%3Crect x='-7' y='-55' width='14' height='18' fill='%23FFFFFF' rx='3'/%3E%3Crect x='-7' y='37' width='14' height='18' fill='%23FFFFFF' rx='3'/%3E%3C/g%3E%3Cline x1='24' y1='24' x2='42' y2='42' stroke='%23FFFFFF' stroke-width='18' stroke-linecap='round'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M -18 -2 L -8 8 L 18 -18' fill='none' stroke='%23FFFFFF' stroke-width='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M 12 -22 A 28 28 0 0 0 -20 0' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='6' stroke-linecap='round'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html,
        body {
            height: 100%;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: #f5f5f5;
            padding: 12px;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #8B0000 0%, #B22222 100%);
            color: white;
            padding: 20px 30px;
            text-align: center;
        }

        .header h1 {
            font-size: 28px;
            margin-bottom: 5px;
        }

        .main-content {
            display: flex;
            min-height: 600px;
        }

        .sidebar {
            width: 400px;
            border-right: 1px solid #e0e0e0;
            padding: 16px;
            overflow-y: auto;
            max-height: calc(100vh - 160px);
            -webkit-overflow-scrolling: touch;
        }

        .sidebar::-webkit-scrollbar {
            width: 8px;
        }

        .sidebar::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        .sidebar::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 4px;
        }

        .sidebar::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        .chart-area {
            flex: 1;
            padding: 20px;
            display: flex;
            flex-direction: row;
            position: relative;
            gap: 0;
        }

        .chart-container {
            position: relative;
            flex: 1;
            min-height: 500px;
        }

        /* 关键修复：确保图容器在移动端有明确高度并可伸展 */
        #paretoChart {
            width: 100%;
            height: 100%;
            min-height: 420px;
            touch-action: pan-x pan-y;
        }

        .section {
            margin-bottom: 25px;
            padding-bottom: 20px;
            border-bottom: 1px solid #f0f0f0;
        }

        .section:last-child {
            border-bottom: none;
        }

        .section-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }

        .section-title::before {
            content: '';
            width: 4px;
            height: 16px;
            background: #B22222;
            margin-right: 8px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
            font-size: 14px;
            color: #666;
            margin-bottom: 5px;
        }

        input[type="text"],
        input[type="number"],
        input[type="color"],
        select,
        textarea {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 15px;
            transition: border-color 0.3s;
        }

        input[type="color"] {
            height: 40px;
            cursor: pointer;
        }

        input[type="text"]:focus,
        input[type="number"]:focus,
        select:focus,
        textarea:focus {
            outline: none;
            border-color: #B22222;
        }

        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
            margin-right: 8px;
            margin-bottom: 8px;
        }

        .btn-primary {
            background: #B22222;
            color: #fff;
        }

        .btn-primary:hover {
            background: #8B0000;
        }

        .btn-secondary {
            background: #7A7A7A;
            color: #fff;
        }

        .btn-secondary:hover {
            background: #606060;
        }

        .btn-success {
            background: #2E8B57;
            color: #fff;
        }

        .btn-success:hover {
            background: #24764A;
        }

        .btn-danger {
            background: #8B0000;
            color: #fff;
        }

        .btn-danger:hover {
            background: #6E0000;
        }

        .btn-warning {
            background: #FFB84D;
            color: #333;
        }

        .btn-warning:hover {
            background: #E6A640;
        }

        .btn-sm {
            padding: 4px 8px;
            font-size: 12px;
        }

        .btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .item-input {
            display: flex;
            gap: 10px;
            margin-bottom: 12px;
            align-items: center;
            flex-wrap: wrap;
        }

        .item-input input[type="text"] {
            flex: 2;
        }

        .item-input input[type="number"] {
            flex: 1;
        }

        .item-input input[type="color"] {
            flex: 0 0 50px;
            min-width: 50px;
        }

        .toolbar {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 15px;
        }

        .theme-selector {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .theme-btn {
            padding: 8px 16px;
            border: 2px solid #ddd;
            border-radius: 4px;
            background: white;
            cursor: pointer;
            transition: all 0.3s;
        }

        .theme-btn.active {
            border-color: #B22222;
            background: #B22222;
            color: white;
        }

        .history-info {
            font-size: 12px;
            color: #999;
            margin-top: 5px;
        }

        @keyframes slideInRight {
            from {
                transform: translateX(400px);
                opacity: 0;
            }

            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        @keyframes slideOutRight {
            from {
                transform: translateX(0);
                opacity: 1;
            }

            to {
                transform: translateX(400px);
                opacity: 0;
            }
        }

        @media (max-width: 1200px) {
            .main-content {
                flex-direction: column;
            }

            .sidebar {
                width: 100%;
                border-right: none;
                border-bottom: 1px solid #e0e0e0;
                max-height: none;
                padding: 14px;
            }

            .chart-container {
                min-height: 500px;
            }

            .chart-area {
                flex-direction: column;
                gap: 12px;
            }
        }

        .item-list {
            max-height: 50vh;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        .item-list::-webkit-scrollbar {
            width: 6px;
        }

        .item-list::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        .item-list::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 3px;
        }

        @media (max-width: 768px) {
            body {
                padding: 8px;
            }

            .header h1 {
                font-size: 22px;
            }

            .header p {
                font-size: 12px;
            }

            .item-input input[type="text"] {
                flex: 100%;
            }

            .item-input input[type="number"] {
                flex: 48%;
            }

            .item-input input[type="color"] {
                flex: 0 0 48px;
                min-width: 48px;
            }

            .btn {
                padding: 10px 14px;
                font-size: 13px;
            }

            .chart-container {
                min-height: 420px;
            }

            .chart-area {
                padding: 12px;
            }

            /* 关键修复：在移动端明确指定图表高度，防止为0导致不可见 */
            #paretoChart {
                min-height: 420px;
                height: 420px;
            }

            .toolbar .btn.btn-primary[onclick="updateChartAndSave()"] {
                display: inline-block !important;
            }
        }

        @media (max-width: 420px) {
            body {
                padding: 6px;
            }

            .header h1 {
                font-size: 20px;
            }

            .header p {
                display: none;
            }

            .item-list {
                max-height: 48vh;
            }

            .chart-container {
                min-height: 360px;
            }

            #paretoChart {
                min-height: 360px;
                height: 360px;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="header">
            <div
                style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;">
                <div style="display: flex; align-items: center; gap: 15px; flex-wrap: wrap;">
                    <button onclick="window.location.href='../index.html'"
                        style="padding: 10px 20px; font-size: 14px; background: rgba(255, 255, 255, 0.18); color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 6px; cursor: pointer; transition: all 0.3s; backdrop-filter: blur(10px);"
                        onmouseover="this.style.background='rgba(255, 255, 255, 0.28)'"
                        onmouseout="this.style.background='rgba(255, 255, 255, 0.18)'">← 返回</button>
                    <div>
                        <h1>📊 排列图生成器</h1>
                        <p>Pareto Diagram Generator by eminstan</p>
                    </div>
                </div>
                <div style="display: flex; gap: 10px; flex-wrap: wrap;">
                    <button id="undoBtn" onclick="undo()"
                        style="padding: 10px 20px; font-size: 14px; background: rgba(255, 255, 255, 0.18); color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 6px; cursor: pointer; transition: all 0.3s; backdrop-filter: blur(10px);"
                        onmouseover="this.style.background='rgba(255, 255, 255, 0.28)'"
                        onmouseout="this.style.background='rgba(255, 255, 255, 0.18)'">↶ 撤销</button>
                    <button id="redoBtn" onclick="redo()"
                        style="padding: 10px 20px; font-size: 14px; background: rgba(255, 255, 255, 0.18); color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 6px; cursor: pointer; transition: all 0.3s; backdrop-filter: blur(10px);"
                        onmouseover="this.style.background='rgba(255, 255, 255, 0.28)'"
                        onmouseout="this.style.background='rgba(255, 255, 255, 0.18)'">↷ 重做</button>
                    <button onclick="saveConfig()"
                        style="padding: 10px 20px; font-size: 14px; background: rgba(255, 255, 255, 0.18); color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 6px; cursor: pointer; transition: all 0.3s; backdrop-filter: blur(10px);"
                        onmouseover="this.style.background='rgba(255, 255, 255, 0.28)'"
                        onmouseout="this.style.background='rgba(255, 255, 255, 0.18)'">💾 保存</button>
                    <button onclick="loadConfig()"
                        style="padding: 10px 20px; font-size: 14px; background: rgba(255, 255, 255, 0.18); color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 6px; cursor: pointer; transition: all 0.3s; backdrop-filter: blur(10px);"
                        onmouseover="this.style.background='rgba(255, 255, 255, 0.28)'"
                        onmouseout="this.style.background='rgba(255, 255, 255, 0.18)'">📂 加载</button>
                    <button onclick="resetAll()"
                        style="padding: 10px 20px; font-size: 14px; background: rgba(255, 255, 255, 0.18); color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 6px; cursor: pointer; transition: all 0.3s; backdrop-filter: blur(10px);"
                        onmouseover="this.style.background='rgba(255, 255, 255, 0.28)'"
                        onmouseout="this.style.background='rgba(255, 255, 255, 0.18)'">🔄 重置</button>
                    <button onclick="copyImage()"
                        style="padding: 10px 20px; font-size: 14px; background: rgba(255, 255, 255, 0.18); color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 6px; cursor: pointer; transition: all 0.3s; backdrop-filter: blur(10px);"
                        onmouseover="this.style.background='rgba(255, 255, 255, 0.28)'"
                        onmouseout="this.style.background='rgba(255, 255, 255, 0.18)'">📋 复制PNG</button>
                    <button onclick="exportImage()"
                        style="padding: 10px 20px; font-size: 14px; background: rgba(255, 255, 255, 0.18); color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 6px; cursor: pointer; transition: all 0.3s; backdrop-filter: blur(10px);"
                        onmouseover="this.style.background='rgba(255, 255, 255, 0.28)'"
                        onmouseout="this.style.background='rgba(255, 255, 255, 0.18)'">📥 导出PNG</button>
                </div>
            </div>
        </div>
        <div class="main-content">
            <div class="sidebar">
                <div class="section">
                    <div class="section-title">数据导入</div>
                    <div class="form-group">
                        <label>粘贴数据（支持从Excel或Word表格复制）</label>
                        <textarea id="dataImport" placeholder="请粘贴带制表符的数据，格式如：
项目名称    频数
A缺陷    80
B缺陷    60
C缺陷    30" style="width: 100%; min-height: 120px; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px; font-family: 'Consolas', monospace; resize: vertical;"></textarea>
                    </div>
                    <button class="btn btn-primary" onclick="importData()">📊 导入数据</button>
                    <button class="btn btn-secondary" onclick="clearImport()">🗑 清空</button>
                </div>
                <div class="section">
                    <div class="section-title">项目数据</div>
                    <div style="display: flex; gap: 10px; align-items: center; margin-bottom: 10px; flex-wrap: wrap;">
                        <button class="btn btn-success" onclick="addItem()">➕ 添加项目</button>
                        <label style="margin: 0;">频数单位：</label>
                        <input type="text" id="unitInput" value="个" placeholder="单位" style="width: 80px;"
                            onchange="validateAndUpdate()">
                    </div>
                    <div id="itemList" class="item-list"></div>
                </div>
                <div class="section">
                    <div class="section-title">图表配置</div>
                    <div class="form-group">
                        <label>主题样式</label>
                        <div class="theme-selector">
                            <button class="theme-btn active" onclick="changeTheme('colorful')">多彩</button>
                            <button class="theme-btn" onclick="changeTheme('dark')">暗黑</button>
                        </div>
                    </div>
                    <div class="form-group">
                        <label style="display:flex;align-items:center;gap:10px">
                            <input type="checkbox" id="showLegend" onchange="updateChartAndSave()">
                            显示图例
                        </label>
                    </div>
                    <div class="form-group">
                        <label>折线颜色</label>
                        <input type="color" id="lineColor" value="#ee6666" onchange="updateChartAndSave()">
                    </div>
                </div>
                <div class="section">
                    <div class="section-title">字体与标注</div>
                    <div class="form-group">
                        <label>标题（N=）字体大小 <span id="fontTitleSizeDisplay" style="color:#999;margin-left:6px;">16</span>
                            px</label>
                        <input type="range" id="fontTitleSize" min="8" max="48" step="1" value="16"
                            oninput="updateChartAndSave()">
                    </div>
                    <div class="form-group">
                        <label>坐标轴名称字体大小 <span id="fontAxisNameSizeDisplay"
                                style="color:#999;margin-left:6px;">12</span> px</label>
                        <input type="range" id="fontAxisNameSize" min="8" max="36" step="1" value="12"
                            oninput="updateChartAndSave()">
                    </div>
                    <div class="form-group">
                        <label>坐标轴刻度字体大小 <span id="fontAxisLabelSizeDisplay"
                                style="color:#999;margin-left:6px;">12</span> px</label>
                        <input type="range" id="fontAxisLabelSize" min="8" max="36" step="1" value="12"
                            oninput="updateChartAndSave()">
                    </div>
                    <div class="form-group">
                        <label>柱状数据标签字体大小 <span id="fontBarLabelSizeDisplay"
                                style="color:#999;margin-left:6px;">12</span> px</label>
                        <input type="range" id="fontBarLabelSize" min="8" max="36" step="1" value="12"
                            oninput="updateChartAndSave()">
                    </div>
                    <div class="form-group">
                        <label>折线数据标签字体大小 <span id="fontLineLabelSizeDisplay"
                                style="color:#999;margin-left:6px;">12</span> px</label>
                        <input type="range" id="fontLineLabelSize" min="8" max="36" step="1" value="12"
                            oninput="updateChartAndSave()">
                    </div>
                </div>
                <div class="section">
                    <div class="section-title">操作</div>
                    <div class="toolbar">
                        <button class="btn btn-primary" onclick="updateChartAndSave()" style="display: none;">🔄
                            更新图表</button>
                    </div>
                    <div class="history-info" id="historyInfo">可撤销: 0 | 可重做: 0</div>
                </div>
            </div>
            <div class="chart-area">
                <div class="chart-container">
                    <div id="paretoChart" aria-label="Pareto chart" role="img"></div>
                </div>
            </div>
        </div>
    </div>
    <script>
        let chart = null;
        let currentTheme = 'colorful';
        let itemCounter = 0;

        // 历史系统
        let undoStack = [];
        let redoStack = [];
        const MAX_HISTORY = 50;
        let isApplyingHistory = false; // 正在应用历史时，禁止触发保存

        const themes = {
            colorful: { backgroundColor: '#fff', textColor: '#333', lineColor: '#e74c3c' },
            dark: { backgroundColor: '#1a1a1a', textColor: '#fff', lineColor: '#ff6b6b' }
        };

        // 关键修复：等待容器尺寸稳定后再初始化 ECharts，避免移动端首屏高度为0
        function initChartSafely() {
            const container = document.getElementById('paretoChart');
            const attemptInit = (retry = 0) => {
                const rect = container.getBoundingClientRect();
                if (rect.width > 0 && rect.height > 0) {
                    chart = echarts.init(container);
                    safeInitialLoad();
                } else if (retry < 10) {
                    requestAnimationFrame(() => attemptInit(retry + 1));
                } else {
                    // 强制设置一个高度后再尝试
                    container.style.minHeight = container.style.minHeight || '420px';
                    chart = echarts.init(container);
                    safeInitialLoad();
                }
            };
            attemptInit();
        }

        function safeInitialLoad() {
            // 先加载历史栈
            loadHistoryStacks();

            if (undoStack.length > 0) {
                const latest = JSON.parse(undoStack[undoStack.length - 1]);
                applyConfigWithoutSave(latest);
                updateHistoryButtons();
            } else {
                addItem('A缺陷', 80, '#5470c6');
                addItem('B缺陷', 60, '#91cc75');
                addItem('C缺陷', 30, '#fac858');
                addItem('D缺陷', 20, '#ee6666');
                addItem('E缺陷', 4, '#73c0de');
                addItem('F缺陷', 6, '#3ba272');
                updateChart();
                saveToUndoStack();
            }
            setTimeout(restoreAutoSave, 1000);
        }

        window.onload = function () {
            initChartSafely();
        };

        // 添加项目
        function addItem(name = '', value = 0, color = '') {
            itemCounter++;
            const itemList = document.getElementById('itemList');
            const div = document.createElement('div');
            div.className = 'item-input';
            div.id = `item${itemCounter}`;
            const defaultColors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#d4ec59'];
            const defaultColor = color || defaultColors[(itemCounter - 1) % defaultColors.length];
            div.innerHTML = `
                <input type="text" placeholder="项目名称" value="${name}" onchange="validateAndUpdate()">
                <input type="number" placeholder="频数" value="${value}" min="0" onchange="validateAndUpdate()">
                <input type="color" value="${defaultColor}" title="选择颜色" onchange="validateAndUpdate()" style="width: 50px; padding: 2px;">
                <button class="btn btn-danger btn-sm" onclick="removeItem(${itemCounter})">删除</button>
            `;
            itemList.appendChild(div);
        }

        function removeItem(id) {
            const element = document.getElementById(`item${id}`);
            if (element) {
                element.remove();
                validateAndUpdate();
            }
        }

        // 输入变化统一入口
        function validateAndUpdate() {
            updateChart();
            saveToUndoStack();
        }

        function updateChartAndSave() {
            updateChart();
            saveToUndoStack();
        }

        function getItemsData() {
            const items = [];
            const itemElements = document.querySelectorAll('.item-input');
            itemElements.forEach(element => {
                const nameInput = element.querySelector('input[type="text"]');
                const valueInput = element.querySelector('input[type="number"]');
                const colorInput = element.querySelector('input[type="color"]');
                if (nameInput && valueInput && colorInput) {
                    const name = nameInput.value.trim();
                    const value = parseFloat(valueInput.value) || 0;
                    const color = colorInput.value;
                    if (name && value > 0) {
                        items.push({ name, value, color });
                    }
                }
            });
            items.sort((a, b) => b.value - a.value);
            return items;
        }

        function calculateCumulativeData(items) {
            const total = items.reduce((sum, item) => sum + item.value, 0);
            let cumulative = 0;
            const lineData = [];
            const lineXAxis = [];
            lineData.push(0);
            lineXAxis.push(0);
            items.forEach((item, index) => {
                cumulative += item.value;
                lineData.push(cumulative);
                lineXAxis.push(index + 1);
            });
            return { lineData, lineXAxis, total };
        }

        // 同步滑条旁的数值显示
        function updateFontControlsPreview() {
            ['fontTitleSize', 'fontAxisNameSize', 'fontAxisLabelSize', 'fontBarLabelSize', 'fontLineLabelSize']
                .forEach(id => {
                    const el = document.getElementById(id);
                    const sp = document.getElementById(id + 'Display');
                    if (el && sp) sp.textContent = el.value;
                });
        }

        function updateChart() {
            if (!chart) return;
            const items = getItemsData();
            if (items.length === 0) {
                chart.clear();
                return;
            }
            // 同步滑条预览数值
            updateFontControlsPreview();
            const { lineData, lineXAxis, total } = calculateCumulativeData(items);
            const theme = themes[currentTheme];
            const lineColor = document.getElementById('lineColor').value;
            const showLegend = document.getElementById('showLegend')?.checked || false;

            // 字体大小配置（带默认）
            const titleFontSize = parseInt(document.getElementById('fontTitleSize')?.value) || 16;
            const axisNameFontSize = parseInt(document.getElementById('fontAxisNameSize')?.value) || 12;
            const axisLabelFontSize = parseInt(document.getElementById('fontAxisLabelSize')?.value) || 12;
            const barLabelFontSize = parseInt(document.getElementById('fontBarLabelSize')?.value) || 12;
            const lineLabelFontSize = parseInt(document.getElementById('fontLineLabelSize')?.value) || 12;

            const option = {
                backgroundColor: theme.backgroundColor,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { type: 'cross', crossStyle: { color: '#999' } },
                    formatter: function (params) {
                        let result = '';
                        params.forEach(param => {
                            if (param.seriesName.startsWith('频数（')) {
                                result += param.name + '<br/>';
                                result += param.marker + ' ' + param.seriesName + ': ' + param.value + '<br/>';
                            } else if (param.seriesName === '累计频率') {
                                const percentage = ((param.value / total) * 100).toFixed(1);
                                result += param.marker + ' ' + param.seriesName + ': ' + param.value + ' (' + percentage + '%)<br/>';
                            }
                        });
                        return result;
                    }
                },
                legend: { data: ['频数（个）', '累计频率'], top: 10, textStyle: { color: theme.textColor }, show: showLegend },
                title: {
                    text: 'N=' + total, left: '7%', top: '17%',
                    textStyle: { color: theme.textColor, fontSize: titleFontSize, fontWeight: 'bold' }
                },
                grid: { left: '3%', right: '4%', bottom: '10%', top: '15%', containLabel: true },
                xAxis: [
                    {
                        type: 'category',
                        data: items.map(item => item.name),
                        axisPointer: { type: 'shadow' },
                        axisLabel: {
                            color: theme.textColor, rotate: 0, interval: 0, lineHeight: 20, fontSize: axisLabelFontSize,
                            formatter: function (value) {
                                const chartWidth = chart.getWidth();
                                const gridLeft = chartWidth * 0.03;
                                const gridRight = chartWidth * 0.04;
                                const availableWidth = chartWidth - gridLeft - gridRight;
                                const barWidth = availableWidth / items.length;
                                const maxCharsPerLine = Math.floor(barWidth / 14);
                                if (maxCharsPerLine < 2) return value;
                                let result = '';
                                for (let i = 0; i < value.length; i += maxCharsPerLine) {
                                    result += value.substr(i, maxCharsPerLine) + '\n';
                                }
                                return result.trim();
                            }
                        },
                        axisLine: { lineStyle: { color: theme.textColor } },
                        axisTick: { show: false }
                    },
                    {
                        type: 'value', min: 0, max: items.length, show: false,
                        axisLabel: { show: false }, axisLine: { show: false }, axisTick: { show: false }, splitLine: { show: false }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '频数（' + (document.getElementById('unitInput').value || '个') + '）',
                        max: total, interval: Math.ceil(total / 10),
                        nameTextStyle: { color: theme.textColor, fontSize: axisNameFontSize },
                        axisLabel: { color: theme.textColor, fontSize: axisLabelFontSize },
                        axisLine: { show: true, lineStyle: { color: '#000' } },
                        axisTick: { show: true, inside: true, lineStyle: { color: '#000' } },
                        splitLine: { show: false }
                    },
                    {
                        type: 'value', name: '累计频率(%)', min: 0, max: 100, interval: 10,
                        nameTextStyle: { color: theme.textColor, fontSize: axisNameFontSize },
                        axisLabel: { formatter: '{value}%', color: theme.textColor, fontSize: axisLabelFontSize },
                        axisLine: { show: true, lineStyle: { color: '#000' } },
                        axisTick: { show: true, inside: true, lineStyle: { color: '#000' } },
                        splitLine: { show: false }
                    }
                ],
                series: [
                    {
                        name: '频数（' + (document.getElementById('unitInput').value || '个') + '）',
                        type: 'bar', xAxisIndex: 0, yAxisIndex: 0,
                        barWidth: '100%', barCategoryGap: '0%',
                        data: items.map(item => ({ value: item.value, itemStyle: { color: item.color } })),
                        label: { show: true, position: 'top', color: theme.textColor, fontSize: barLabelFontSize },
                        markLine: { silent: true, symbol: 'none', label: { show: false }, lineStyle: { color: '#000', width: 1, type: 'solid' }, data: [{ yAxis: total }] }
                    },
                    {
                        name: '累计频率',
                        type: 'line', xAxisIndex: 1, yAxisIndex: 1,
                        data: lineData.map((v, i) => [lineXAxis[i], (v / total) * 100]),
                        itemStyle: { color: lineColor },
                        lineStyle: { width: 3, color: lineColor },
                        symbol: 'circle', symbolSize: 8,
                        label: {
                            show: true, position: 'top',
                            formatter: function (params) {
                                if (params.dataIndex === 0 || params.dataIndex === lineData.length - 1) return '';
                                return params.value[1].toFixed(1) + '%';
                            },
                            color: theme.textColor, fontSize: lineLabelFontSize
                        }
                    },
                    {
                        name: '右下角点',
                        type: 'scatter', xAxisIndex: 1, yAxisIndex: 1,
                        data: [[items.length, 0]], itemStyle: { color: lineColor },
                        symbol: 'circle', symbolSize: 8, silent: true, tooltip: { show: false }
                    }
                ]
            };
            chart.setOption(option, true);
            // 移动端可见性保障：初始化后立即执行一次 resize
            chart.resize();
        }

        function changeTheme(themeName) {
            currentTheme = themeName;
            document.querySelectorAll('.theme-btn').forEach(btn => btn.classList.remove('active'));
            event.target.classList.add('active');
            const theme = themes[themeName];
            document.getElementById('lineColor').value = theme.lineColor;
            updateChart();
            saveToUndoStack();
        }

        function importData() {
            const importText = document.getElementById('dataImport').value.trim();
            if (!importText) { showMessage('请先输入数据！', 'error'); return; }
            try {
                const lines = importText.split('\n').filter(line => line.trim());
                if (lines.length < 2) { showMessage('数据格式错误：至少需要标题行和一行数据', 'error'); return; }
                document.getElementById('itemList').innerHTML = '';
                itemCounter = 0;
                for (let i = 1; i < lines.length; i++) {
                    const cells = lines[i].split('\t').map(c => c.trim());
                    if (cells.length >= 2) {
                        const name = cells[0];
                        const value = parseFloat(cells[1]);
                        if (name && !isNaN(value) && value > 0) {
                            addItem(name, value);
                        }
                    }
                }
                updateChart();
                saveToUndoStack();
                showMessage('数据导入成功！', 'success');
            } catch (error) {
                console.error('导入数据错误:', error);
                showMessage('数据解析失败，请检查格式是否正确', 'error');
            }
        }

        function clearImport() {
            document.getElementById('dataImport').value = '';
            showMessage('已清空导入区域', 'success');
        }

        function exportImage() {
            const url = chart.getDataURL({ type: 'png', pixelRatio: 2, backgroundColor: themes[currentTheme].backgroundColor });
            const link = document.createElement('a');
            link.download = `排列图_${new Date().getTime()}.png`;
            link.href = url;
            link.click();
            showMessage('图片导出成功！', 'success');
        }

        function copyImage() {
            const img = new Image();
            img.crossOrigin = 'anonymous';
            img.src = chart.getDataURL({ type: 'png', pixelRatio: 2, backgroundColor: themes[currentTheme].backgroundColor });
            img.onload = function () {
                const canvas = document.createElement('canvas');
                canvas.width = img.width; canvas.height = img.height;
                const ctx = canvas.getContext('2d');
                ctx.drawImage(img, 0, 0);
                canvas.toBlob(function (blob) {
                    const item = new ClipboardItem({ 'image/png': blob });
                    navigator.clipboard.write([item]).then(function () {
                        showMessage('图片已复制到剪贴板！', 'success');
                    }).catch(function (error) {
                        console.error('复制失败:', error);
                        showMessage('复制失败，请使用导出PNG功能', 'error');
                    });
                }, 'image/png');
            };
        }

        function getCurrentConfig() {
            const items = [];
            const itemElements = document.querySelectorAll('.item-input');
            itemElements.forEach(element => {
                const nameInput = element.querySelector('input[type="text"]');
                const valueInput = element.querySelector('input[type="number"]');
                const colorInput = element.querySelector('input[type="color"]');
                if (nameInput && valueInput && colorInput) {
                    items.push({
                        name: nameInput.value,
                        value: parseFloat(valueInput.value) || 0,
                        color: colorInput.value
                    });
                }
            });
            return {
                theme: currentTheme,
                lineColor: document.getElementById('lineColor').value,
                showLegend: document.getElementById('showLegend')?.checked || false,
                fontSizes: {
                    title: parseInt(document.getElementById('fontTitleSize')?.value) || 16,
                    axisName: parseInt(document.getElementById('fontAxisNameSize')?.value) || 12,
                    axisLabel: parseInt(document.getElementById('fontAxisLabelSize')?.value) || 12,
                    barLabel: parseInt(document.getElementById('fontBarLabelSize')?.value) || 12,
                    lineLabel: parseInt(document.getElementById('fontLineLabelSize')?.value) || 12
                },
                items: items,
                unit: document.getElementById('unitInput').value || '个'
            };
        }

        function applyConfig(config) {
            applyConfigWithoutSave(config);
            undoStack = [];
            redoStack = [];
            saveToUndoStack();
            persistHistoryStacks();
        }

        function applyConfigWithoutSave(config) {
            isApplyingHistory = true;

            currentTheme = config.theme || 'colorful';
            document.querySelectorAll('.theme-btn').forEach(btn => btn.classList.remove('active'));
            const activeBtn = document.querySelector(`.theme-btn[onclick="changeTheme('${currentTheme}')"]`);
            if (activeBtn) activeBtn.classList.add('active');

            document.getElementById('lineColor').value = config.lineColor || themes[currentTheme].lineColor;
            document.getElementById('unitInput').value = config.unit || '个';
            const showLegendEl = document.getElementById('showLegend');
            if (showLegendEl) showLegendEl.checked = !!config.showLegend;

            // 字体大小回填（向后兼容，若无则填默认）
            const fonts = config.fontSizes || {};
            const setVal = (id, val) => { const el = document.getElementById(id); if (el) el.value = val; };
            setVal('fontTitleSize', Number.isFinite(fonts.title) ? fonts.title : 16);
            setVal('fontAxisNameSize', Number.isFinite(fonts.axisName) ? fonts.axisName : 12);
            setVal('fontAxisLabelSize', Number.isFinite(fonts.axisLabel) ? fonts.axisLabel : 12);
            setVal('fontBarLabelSize', Number.isFinite(fonts.barLabel) ? fonts.barLabel : 12);
            setVal('fontLineLabelSize', Number.isFinite(fonts.lineLabel) ? fonts.lineLabel : 12);
            // 更新滑条旁显示值
            updateFontControlsPreview();

            document.getElementById('itemList').innerHTML = '';
            itemCounter = 0;

            if (config.items && config.items.length > 0) {
                config.items.forEach(item => {
                    addItem(item.name, item.value, item.color);
                });
            }

            updateChart();

            isApplyingHistory = false;
        }

        // 历史与持久化
        function saveToUndoStack() {
            if (isApplyingHistory) return;

            const config = getCurrentConfig();
            const configStr = JSON.stringify(config);

            if (undoStack.length > 0 && undoStack[undoStack.length - 1] === configStr) {
                return;
            }

            undoStack.push(configStr);
            if (undoStack.length > MAX_HISTORY) undoStack.shift();

            redoStack = [];

            persistHistoryStacks();
            updateHistoryButtons();
            autoSave();
        }

        function undo() {
            if (undoStack.length <= 1) {
                showMessage('没有可撤销的操作', 'error');
                return;
            }
            const currentState = undoStack.pop();
            redoStack.push(currentState);

            const previousState = undoStack[undoStack.length - 1];
            const config = JSON.parse(previousState);
            applyConfigWithoutSave(config);

            persistHistoryStacks();
            updateHistoryButtons();
            showMessage('已撤销', 'success');
        }

        function redo() {
            if (redoStack.length === 0) {
                showMessage('没有可重做的操作', 'error');
                return;
            }
            const nextState = redoStack.pop();
            undoStack.push(nextState);

            const config = JSON.parse(nextState);
            applyConfigWithoutSave(config);

            persistHistoryStacks();
            updateHistoryButtons();
            showMessage('已重做', 'success');
        }

        function updateHistoryButtons() {
            const undoBtn = document.getElementById('undoBtn');
            const redoBtn = document.getElementById('redoBtn');
            const historyInfo = document.getElementById('historyInfo');

            undoBtn.disabled = undoStack.length <= 1;
            redoBtn.disabled = redoStack.length === 0;

            historyInfo.textContent = `可撤销: ${Math.max(0, undoStack.length - 1)} | 可重做: ${redoStack.length}`;
        }

        function persistHistoryStacks() {
            try {
                localStorage.setItem('paretoHistoryUndo', JSON.stringify(undoStack));
                localStorage.setItem('paretoHistoryRedo', JSON.stringify(redoStack));
            } catch (e) {
                console.error('历史栈持久化失败:', e);
            }
        }

        function loadHistoryStacks() {
            try {
                const undoSaved = localStorage.getItem('paretoHistoryUndo');
                const redoSaved = localStorage.getItem('paretoHistoryRedo');
                if (undoSaved) {
                    const parsedUndo = JSON.parse(undoSaved);
                    if (Array.isArray(parsedUndo) && parsedUndo.length > 0) {
                        undoStack = parsedUndo.slice(-MAX_HISTORY);
                    }
                }
                if (redoSaved) {
                    const parsedRedo = JSON.parse(redoSaved);
                    if (Array.isArray(parsedRedo)) {
                        redoStack = parsedRedo.slice(-MAX_HISTORY);
                    }
                }
            } catch (e) {
                console.error('加载历史栈失败:', e);
            }
        }

        // 保存/加载配置
        function saveConfig() {
            const config = getCurrentConfig();
            const blob = new Blob([JSON.stringify(config, null, 2)], { type: 'application/json' });
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.download = `排列图配置_${new Date().getTime()}.json`;
            link.href = url;
            link.click();
            URL.revokeObjectURL(url);
            showMessage('配置保存成功！', 'success');
        }

        function loadConfig() {
            const input = document.createElement('input');
            input.type = 'file';
            input.accept = '.json';
            input.onchange = function (e) {
                const file = e.target.files[0];
                if (!file) return;
                const reader = new FileReader();
                reader.onload = function (event) {
                    try {
                        const config = JSON.parse(event.target.result);
                        applyConfig(config);
                        showMessage('配置加载成功！', 'success');
                        // 加载后确保尺寸与渲染一致
                        if (chart) chart.resize();
                    } catch (error) {
                        showMessage('配置文件格式错误！', 'error');
                    }
                };
                reader.readAsText(file);
            };
            input.click();
        }

        // 重置
        function resetAll() {
            if (confirm('确定要重置所有配置吗？此操作不可撤销。')) {
                currentTheme = 'colorful';
                document.querySelectorAll('.theme-btn').forEach(btn => btn.classList.remove('active'));
                document.querySelector('.theme-btn').classList.add('active');
                document.getElementById('lineColor').value = themes.colorful.lineColor;
                document.getElementById('unitInput').value = '个';
                const showLegendEl = document.getElementById('showLegend');
                if (showLegendEl) showLegendEl.checked = false;
                const resetVal = (id, val) => { const el = document.getElementById(id); if (el) el.value = val; };
                resetVal('fontTitleSize', 16);
                resetVal('fontAxisNameSize', 12);
                resetVal('fontAxisLabelSize', 12);
                resetVal('fontBarLabelSize', 12);
                resetVal('fontLineLabelSize', 12);
                updateFontControlsPreview();
                document.getElementById('itemList').innerHTML = '';
                itemCounter = 0;
                addItem('A缺陷', 80, '#5470c6');
                addItem('B缺陷', 60, '#91cc75');
                addItem('C缺陷', 30, '#fac858');

                undoStack = [];
                redoStack = [];
                updateChart();
                saveToUndoStack();
                persistHistoryStacks();
                showMessage('已重置所有配置', 'success');

                if (chart) chart.resize();
            }
        }

        // 提示
        function showMessage(message, type) {
            const existingMsg = document.querySelector('.message-toast');
            if (existingMsg) existingMsg.remove();
            const toast = document.createElement('div');
            toast.className = 'message-toast';
            toast.textContent = message;
            const colors = { success: '#2E8B57', error: '#8B0000', warning: '#FFB84D', info: '#B22222' };
            toast.style.cssText = `
                position: fixed; top: 20px; right: 20px; padding: 12px 24px;
                background: ${colors[type] || colors.info}; color: white; border-radius: 4px;
                box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 10000; font-size: 14px;
                animation: slideInRight 0.3s ease-out;
            `;
            document.body.appendChild(toast);
            setTimeout(() => {
                toast.style.animation = 'slideOutRight 0.3s ease-out';
                setTimeout(() => toast.remove(), 300);
            }, 3000);
        }

        // 自动保存
        let autoSaveTimer = null;
        function autoSave() {
            clearTimeout(autoSaveTimer);
            autoSaveTimer = setTimeout(() => {
                const config = getCurrentConfig();
                localStorage.setItem('paretoAutoSave', JSON.stringify(config));
            }, 800);
        }

        function restoreAutoSave() {
            if (undoStack.length > 0) return;
            const saved = localStorage.getItem('paretoAutoSave');
            if (saved) {
                try {
                    const config = JSON.parse(saved);
                    applyConfig(config);
                    showMessage('已自动恢复上次的配置', 'success');
                    if (chart) chart.resize();
                } catch (error) {
                    console.error('恢复自动保存失败:', error);
                }
            }
        }

        // 快捷键
        document.addEventListener('keydown', function (e) {
            if (e.ctrlKey && e.key === 'z' && !e.shiftKey) {
                e.preventDefault(); undo();
            }
            if ((e.ctrlKey && e.shiftKey && e.key === 'Z') || (e.ctrlKey && e.key === 'y')) {
                e.preventDefault(); redo();
            }
        });

        // 视口变化时确保重绘
        window.addEventListener('resize', function () {
            if (chart) chart.resize();
        });

        // 可见性变化时尝试重绘（移动端切换标签、转屏后）
        document.addEventListener('visibilitychange', function () {
            if (!document.hidden && chart) chart.resize();
        });
    </script>
</body>

</html>