// 页面加载动画
document.addEventListener('DOMContentLoaded', function () {
    document.body.style.opacity = '0';

    // 页面淡入动画
    setTimeout(() => {
        document.body.style.transition = 'opacity 1.5s ease-in-out';
        document.body.style.opacity = '1';
    }, 100);

    // 添加页面加载完成的特效
    setTimeout(() => {
        addPageLoadEffect();
    }, 2000);

    // 初始化图表
    initBarChart();
    initMaterialChart();
    initProgressBars();
    initParticles();
    initHeaderParticles();
    initAlertList2();
    initStatusTable();
    createTrendChart();
    createReportingChart();


    // 添加鼠标交互效果
    addMouseInteractionEffects();

    // 添加页面可见性控制
    addVisibilityControl();
});

// 图表实例存储
let barChartInstance = null;
let materialChartInstance = null;

// 动画控制
let animationEnabled = true;
let animationInterval = null;

// 跳转下一页
function goNext() {
  window.location.href="https://cxcygl.lnnu.edu.cn/bigScreen/leader/index.html";
}

// 停止动画
function stopAnimations() {
    animationEnabled = false;
    if (animationInterval) {
        clearInterval(animationInterval);
        animationInterval = null;
    }
}

// 重启动画
function resumeAnimations() {
    animationEnabled = true;
}

// 初始化柱状图
function initBarChart() {
    const chartDom = document.getElementById('barChart');
    barChartInstance = echarts.init(chartDom);

    const option = {
        backgroundColor: 'transparent',
        // 禁用工具栏（包括缩放功能）
        toolbox: {
            show: false
        },
        // 禁用数据缩放
        dataZoom: [],
        // 禁用动画和缩放
        animation: false,
        // 禁用鼠标滚轮缩放
        brush: {
            toolbox: []
        },
        legend: {
            data: ['参与比例', '获奖比例'],
            top: '5%',
            textStyle: {
                color: '#ffffff',
                fontSize: 14
            },
            itemWidth: 8,
            itemHeight: 8,
            itemGap: 15
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            backgroundColor: 'rgba(0, 0, 0, 0.8)',
            borderColor: '#4FC3F7',
            borderWidth: 1,
            textStyle: {
                color: '#ffffff'
            },
            formatter: function (params) {
                let result = params[0].name + '<br/>';
                params.forEach(function (item) {
                    result += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + item.color + ';"></span>';
                    result += item.seriesName + ': ' + item.value + '%<br/>';
                });
                return result;
            }
        },
        grid: [
            {
                left: '5%',
                right: '5%',
                top: '8%',
                height: '80%',
                containLabel: true
            },
        ],
        xAxis: [
            {
                type: 'category',
                data: [],
                gridIndex: 0,
                axisLine: {
                    lineStyle: {
                        color: '#00d4ff'
                    }
                },
                axisLabel: {
                    color: '#ffffff',
                    fontSize: 10
                },
                axisTick: {
                    show: false
                }
            },
        ],
        yAxis: [
            {
                type: 'value',
                gridIndex: 0,
                max: 100,
                interval: 10,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#ffffff',
                    fontSize: 10
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(0, 212, 255, 0.2)',
                        type: 'solid'
                    }
                }
            },
        ],
        series: [
            {
                name: '参与比例',
                type: 'bar',
                xAxisIndex: 0,
                yAxisIndex: 0,
                data: [7.00, 15.00, 12.00, 3.00],
                label: {
                    show: true,          // 开启显示
                    position: 'top',     // 在柱子顶部显示
                    color: 'white',       // 字体颜色
                    formatter: '{c}%',
                    fontSize: 14         // 字体大小
                },
                formatter: function(params) {
                    return params.name;  // 显示 X 轴类目的名字
                },
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#66ffff' },
                        { offset: 0.2, color: '#33ddff' },
                        { offset: 0.4, color: '#00bbff' },
                        { offset: 0.6, color: '#0099dd' },
                        { offset: 0.8, color: '#0077bb' },
                        { offset: 1, color: '#005599' }
                    ]),
                    borderColor: '#00aaff',
                    borderWidth: 1,
                    shadowColor: 'rgba(0, 170, 255, 0.6)',
                    shadowBlur: 15,
                    shadowOffsetX: 6,
                    shadowOffsetY: 6
                },
                barWidth: '10%',
                emphasis: {
                    itemStyle: {
                        shadowColor: 'rgba(0, 255, 255, 0.8)',
                        shadowBlur: 20,
                        shadowOffsetX: 8,
                        shadowOffsetY: 8
                    }
                },
            },
            {
                name: '获奖比例',
                type: 'bar',
                formatter: function(params) {
                    return params.name;  // 显示 X 轴类目的名字
                },
                xAxisIndex: 0,
                yAxisIndex: 0,
                data: [ 76.00, 64.00, 51.00, 31.00 ],
                label: {
                    show: true,          // 开启显示
                    position: 'top',     // 在柱子顶部显示
                    color: 'white',
                    formatter: '{c}%', // 字体颜色
                    fontSize: 14         // 字体大小
                },
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#ffcc66' },
                        { offset: 1, color: '#ff6600' }
                    ])
                },
                barWidth: '10%'
            }
        ],
    };

    fetchReq.get('/system/bigScreen/getValueByKey', { key: 'match_award_student' }).then(res => {
      if (res.success) {
        option.xAxis.data = res.result.year
        option.series[0].data = res.result.joinPercent
        option.series[1].data = res.result.awardPercent
      }
    }).finally(() => {
      barChartInstance.setOption(option);
    })

    // 禁用鼠标滚轮缩放和拖拽缩放
    const barChartDom = document.getElementById('barChart');
    if (barChartDom) {
        barChartDom.addEventListener('wheel', function (e) {
            e.preventDefault();
            e.stopPropagation();
        }, { passive: false });

        barChartDom.addEventListener('mousedown', function (e) {
            if (e.ctrlKey || e.metaKey) {
                e.preventDefault();
                e.stopPropagation();
            }
        });
    }

    // 响应式
    window.addEventListener('resize', () => {
        barChartInstance.resize();
    });
}

// 初始化材料分布饼图
function initMaterialChart() {
    materialChartInstance = echarts.init(document.getElementById('materialChart'));
    try {
        console.log('Creating evaluationChart...');
        const chartDom = document.getElementById('materialChart');
        if (!chartDom) {
            console.error('evaluationChart element not found');
            return;
        }
        console.log('evaluationChart element found:', chartDom);
        const myChart = echarts.init(chartDom);
        console.log('ECharts instance created for evaluationChart');

    const option = {
        backgroundColor: 'transparent',
        // 动画配置
        animation: true,
        animationDuration: 5000, // 总动画时长25秒
        animationEasing: 'cubicOut',
        animationDelay: 0, // 全局不延迟，让每个系列控制自己的延迟
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            backgroundColor: 'rgba(0, 0, 0, 0.8)',
            borderColor: 'rgba(255, 255, 255, 0.2)',
            borderWidth: 1,
            textStyle: {
                color: '#ffffff',
                fontSize: 12
            },
            formatter: function(params) {
                let result = params[0].name + '<br/>';
                const colors = {
                  '一等奖': '#fc6b81',
                  '二等奖': '#ff6b81',
                  '三等奖': '#fad870',
                  '优秀奖': '#0bb988'
                };
                params.forEach(function(item) {
                    const color = colors[item.seriesName] || item.color;
                    result += '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:6px;height:6px;background-color:' + color + ';"></span>';
                    result += item.seriesName + ': ' + item.value + '<br/>';
                });
                return result;
            }
        },
        legend: {
            data: ['一等奖', '二等奖', '三等奖', '优秀奖'],
            top: '5%',
            textStyle: {
                color: '#ffffff',
                fontSize: 14
            },
            itemWidth: 8,
            itemHeight: 8,
            itemGap: 15
        },
        grid: {
            left: '3%',
            right: '3%',
            bottom: '0%',
            top: '25%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['省级', '国家级'],
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#ffffff',
                fontSize: 13
            }
        },
        yAxis: {
            type: 'value',
            max: 500,
            splitLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.1)',
                    width: 1
                }
            },
            axisLabel: {
                color: '#ffffff',
                fontSize: 10
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            }
        },
        series: [
            {
                name: '一等奖',
                type: 'bar',
                data: [221, 23],
                label: {
                    show: true,          // 开启显示
                    position: 'top',     // 在柱子顶部显示
                    color: 'white',       // 字体颜色
                    fontSize: 14         // 字体大小
                },
                // 柱子动画配置
                animation: true,
                animationDuration: 3000, // 每个柱子动画3秒
                animationEasing: 'cubicOut',
                animationDelay: function (idx) {
                    return idx * 4000; // 每个地区间隔4秒开始
                },
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: 'rgba(240, 90, 120, 1)' // 顶部亮粉色，90%不透明度
                        }, {
                            offset: 1, color: 'rgba(240, 90, 120, 0.2)' // 底部深粉色，20%不透明度
                        }]
                    }
                },
                backgroundStyle: {
                    color: 'rgba(0,50,100,0.4)'
                },
                showBackground: true,
                barWidth: '10%',
                barGap: '10%',
                barCategoryGap: '40%'
            },
            {
                name: '二等奖',
                type: 'bar',
                data: [313, 55],
                label: {
                    show: true,          // 开启显示
                    position: 'top',     // 在柱子顶部显示
                    color: 'white',       // 字体颜色
                    fontSize: 14         // 字体大小
                },
                // 柱子动画配置
                animation: true,
                animationDuration: 3000, // 每个柱子动画3秒
                animationEasing: 'cubicOut',
                animationDelay: function (idx) {
                    return idx * 4000 + 1000; // 比绿色柱子晚1秒开始
                },
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: 'rgba(253, 98, 146, 1)' // 顶部亮粉色，90%不透明度
                        }, {
                            offset: 1, color: 'rgba(253, 98, 146, 0.2)' // 底部深粉色，20%不透明度
                        }]
                    }
                },
                backgroundStyle: {
                    color: 'rgba(0,50,100,0.4)'
                },
                showBackground: true,
                barWidth: '10%'
            },
            {
                name: '三等奖',
                type: 'bar',
                data: [457, 72],
                label: {
                    show: true,          // 开启显示
                    position: 'top',     // 在柱子顶部显示
                    color: 'white',       // 字体颜色
                    fontSize: 14         // 字体大小
                },
                // 柱子动画配置
                animation: true,
                animationDuration: 3000, // 每个柱子动画3秒
                animationEasing: 'cubicOut',
                animationDelay: function (idx) {
                    return idx * 4000 + 2000; // 比绿色柱子晚2秒开始
                },
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
						{
                            offset: 0, color: 'rgba(250, 216, 112, 1)' // 顶部亮黄色，90%不透明度
                        }, {
                            offset: 1, color: 'rgba(250, 216, 112, 0.2)' // 底部深黄色，20%不透明度
                        }]
                    }
                },
                backgroundStyle: {
                    color: 'rgba(0,50,100,0.4)'
                },
                showBackground: true,
                barWidth: '10%'
            },
            {
                name: '优秀奖',
                type: 'bar',
                data: [145, 86],
                label: {
                    show: true,          // 开启显示
                    position: 'top',     // 在柱子顶部显示
                    color: 'white',       // 字体颜色
                    fontSize: 14         // 字体大小
                },
                // 柱子动画配置
                animation: true,
                animationDuration: 3000, // 每个柱子动画3秒
                animationEasing: 'cubicOut',
                animationDelay: function (idx) {
                    return idx * 4000 + 2000; // 比绿色柱子晚2秒开始
                },
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
						{
                            offset: 0, color: 'rgba(11, 185, 136, 1)' // 顶部亮绿色，90%不透明度
                        }, {
                            offset: 1, color: 'rgba(11, 185, 136, 0.2)' // 底部深绿色，20%不透明度
                        }]
                    }
                },
                backgroundStyle: {
                    color: 'rgba(0,50,100,0.4)'
                },
                showBackground: true,
                barWidth: '10%'
            }
        ]
    };

        fetchReq.get('/system/bigScreen/getValueByKey', { key: 'match_award_level_number' }).then(res => {
          if (res.success) {
            option.series[0].data = res.result.level1
            option.series[1].data = res.result.level2
            option.series[2].data = res.result.level3
            option.series[3].data = res.result.level4
          }
        }).finally(() => {
          myChart.setOption(option)
        })
        console.log('evaluationChart option set successfully');

        // 响应式处理
        window.addEventListener('resize', function() {
            myChart.resize();
        });

        console.log('evaluationChart created successfully');
    } catch (error) {
        console.error('Error creating evaluationChart:', error);
    }
}

// 初始化进度条动画
function initProgressBars() {
    const progressFills = document.querySelectorAll('.progress-fill');

    // 初始时设置宽度为0
    progressFills.forEach(fill => {
        const targetWidth = fill.style.width;
        fill.style.width = '0%';

        // 延迟执行动画
        setTimeout(() => {
            fill.style.width = targetWidth;
        }, 500);
    });
}

// 初始化粒子特效
function initParticles() {
    const particleContainers = document.querySelectorAll('.particles-container');

    particleContainers.forEach(container => {
        // 为每个容器创建粒子
        createParticles(container, 12);
    });
}

// 创建粒子
function createParticles(container, count) {
    for (let i = 0; i < count; i++) {
        const particle = document.createElement('div');
        particle.className = 'particle';

        // 随机位置
        const x = Math.random() * 100;
        const y = Math.random() * 100;

        particle.style.left = x + '%';
        particle.style.top = y + '%';

        // 随机动画延迟
        const delay = Math.random() * 3;
        particle.style.animationDelay = delay + 's';

        container.appendChild(particle);
    }
}

// 初始化头部粒子特效
function initHeaderParticles() {
    const headerParticlesContainer = document.querySelector('.header-particles');

    if (headerParticlesContainer) {
        createHeaderParticles(headerParticlesContainer, 20);
    }
}

// 创建头部粒子
function createHeaderParticles(container, count) {
    for (let i = 0; i < count; i++) {
        const particle = document.createElement('div');

        // 随机垂直位置
        const y = Math.random() * 100;
        particle.style.top = y + '%';

        // 随机动画延迟
        const delay = Math.random() * 6;
        particle.style.animationDelay = delay + 's';

        // 一半粒子从左边来，一半从右边来
        if (i < count / 2) {
            // 从左边来的粒子
            particle.className = 'header-particle from-left';
            particle.style.left = '0px'; // CSS动画会控制位置
        } else {
            // 从右边来的粒子
            particle.className = 'header-particle from-right';
            particle.style.left = '0px'; // CSS动画会控制位置
        }

        container.appendChild(particle);
    }
}


// 初始化第二个告警列表动画
function initAlertList2() {
    const alertItems = document.querySelectorAll('.alert-item2');

    // 初始时隐藏所有告警项
    alertItems.forEach((item, index) => {
        item.style.opacity = '0';
        item.style.transform = 'translateX(-30px)';

        // 依次显示告警项
        setTimeout(() => {
            item.style.transition = 'all 0.5s ease';
            item.style.opacity = '1';
            item.style.transform = 'translateX(0)';
        }, index * 200 + 1500); // 延迟1.5秒后开始，每个间隔200ms
    });
}

// 初始化状态表格
function initStatusTable() {
    const tableBody = document.getElementById('statusTableBody');
    if (!tableBody) return;

    fetchReq.get('/system/bigScreen/getValueByKey', { key: 'match_items' }).then(res => {
      // 状态数据
      const statusData = res.result
      // 复制数据以实现无缝滚动
      const duplicatedData = [...statusData, ...statusData];

      // 清空现有内容
      tableBody.innerHTML = '';

      // 生成表格行
      duplicatedData.forEach((item, index) => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td>${item.name}</td>
        `;

        // 添加鼠标悬停效果
        row.addEventListener('mouseenter', function () {
          this.style.background = 'rgba(0, 212, 255, 0.3)';
          this.style.transform = 'scale(1.02)';
          this.style.boxShadow = '0 4px 15px rgba(0, 212, 255, 0.4)';
        });

        row.addEventListener('mouseleave', function () {
          // 恢复原来的背景色
          if (index % 2 === 0) {
            this.style.background = 'rgba(0, 50, 80, 0.4)';
          } else {
            this.style.background = 'rgba(0, 30, 50, 0.6)';
          }
          this.style.transform = 'scale(1)';
          this.style.boxShadow = 'none';
        });

        tableBody.appendChild(row);
      });

      // 添加表格容器的鼠标事件
      const tableContainer = document.querySelector('.table-container');
      if (tableContainer) {
        tableContainer.addEventListener('mouseenter', function () {
          const table = this.querySelector('.status-table');
          if (table) {
            table.style.animationPlayState = 'paused';
          }
        });

        tableContainer.addEventListener('mouseleave', function () {
          const table = this.querySelector('.status-table');
          if (table) {
            table.style.animationPlayState = 'running';
          }
        });
      }
    })
}

// 页面加载完成特效
function addPageLoadEffect() {
    // 创建闪光效果
    const flash = document.createElement('div');
    flash.style.cssText = `
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle, rgba(0, 255, 255, 0.3) 0%, transparent 70%);
        pointer-events: none;
        z-index: 9999;
        opacity: 0;
        animation: flashEffect 2s ease-out forwards;
    `;

    document.body.appendChild(flash);

    // 2秒后移除闪光效果
    setTimeout(() => {
        document.body.removeChild(flash);
    }, 2000);

    // 添加CSS动画
    const style = document.createElement('style');
    style.textContent = `
        @keyframes flashEffect {
            0% {
                opacity: 0;
                transform: scale(0.5);
            }
            50% {
                opacity: 0.8;
                transform: scale(1.2);
            }
            100% {
                opacity: 0;
                transform: scale(2);
            }
        }
    `;
    document.head.appendChild(style);
}

// 添加鼠标交互效果
function addMouseInteractionEffects() {
    // 为所有面板添加鼠标悬停效果
    const panels = document.querySelectorAll('.left-top, .left-bottom, .middle, .right-top, .right-bottom');

    panels.forEach(panel => {
        panel.addEventListener('mouseenter', function () {
            this.style.transform = 'scale(1.02)';
            this.style.filter = 'brightness(1.1) saturate(1.1)';
            this.style.transition = 'all 0.3s ease';
            this.style.zIndex = '10';
        });

        panel.addEventListener('mouseleave', function () {
            this.style.transform = 'scale(1)';
            this.style.filter = 'brightness(1) saturate(1)';
            this.style.zIndex = '1';
        });
    });

    // 为图表容器添加特殊的鼠标效果
    const chartContainers = document.querySelectorAll('.chart-container, .chart-container2, .chart-container3');

    chartContainers.forEach(container => {
        container.addEventListener('mouseenter', function () {
            this.style.filter = 'brightness(1.15) saturate(1.2) drop-shadow(0 0 20px rgba(0, 212, 255, 0.4))';
            this.style.transition = 'all 0.3s ease';
        });

        container.addEventListener('mouseleave', function () {
            this.style.filter = 'brightness(1) saturate(1)';
        });
    });

    // 为数字添加点击效果
    const counts = document.querySelectorAll('.count');

    counts.forEach(count => {
        count.addEventListener('click', function () {
            // 创建点击波纹效果
            const ripple = document.createElement('span');
            ripple.style.cssText = `
                position: absolute;
                border-radius: 50%;
                background: rgba(0, 255, 255, 0.6);
                transform: scale(0);
                animation: rippleEffect 0.6s linear;
                pointer-events: none;
            `;

            const rect = this.getBoundingClientRect();
            const size = Math.max(rect.width, rect.height);
            ripple.style.width = ripple.style.height = size + 'px';
            ripple.style.left = (rect.width / 2 - size / 2) + 'px';
            ripple.style.top = (rect.height / 2 - size / 2) + 'px';

            this.style.position = 'relative';
            this.appendChild(ripple);

            setTimeout(() => {
                ripple.remove();
            }, 600);
        });
    });

    // 添加波纹动画CSS
    const rippleStyle = document.createElement('style');
    rippleStyle.textContent = `
        @keyframes rippleEffect {
            to {
                transform: scale(2);
                opacity: 0;
            }
        }
    `;
    document.head.appendChild(rippleStyle);
}

// 显示通知
function showNotification(message, type = 'info') {
    const notification = document.createElement('div');
    notification.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        padding: 12px 20px;
        border-radius: 6px;
        color: white;
        font-size: 14px;
        z-index: 10000;
        opacity: 0;
        transform: translateX(100%);
        transition: all 0.3s ease;
        pointer-events: none;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    `;

    // 根据类型设置颜色
    switch (type) {
        case 'success':
            notification.style.background = 'linear-gradient(135deg, #00ff88, #00dd77)';
            break;
        case 'warning':
            notification.style.background = 'linear-gradient(135deg, #ffaa00, #ff8800)';
            break;
        case 'error':
            notification.style.background = 'linear-gradient(135deg, #ff6b6b, #ff5252)';
            break;
        default:
            notification.style.background = 'linear-gradient(135deg, #4FC3F7, #29B6F6)';
    }

    notification.textContent = message;
    document.body.appendChild(notification);

    // 显示动画
    setTimeout(() => {
        notification.style.opacity = '1';
        notification.style.transform = 'translateX(0)';
    }, 100);

    // 3秒后隐藏
    setTimeout(() => {
        notification.style.opacity = '0';
        notification.style.transform = 'translateX(100%)';
        setTimeout(() => {
            document.body.removeChild(notification);
        }, 300);
    }, 3000);
}

// 页面可见性控制
function addVisibilityControl() {
    let wasAnimationEnabled = animationEnabled;

    document.addEventListener('visibilitychange', function () {
        if (document.hidden) {
            // 页面隐藏时暂停动画
            wasAnimationEnabled = animationEnabled;
            if (animationEnabled) {
                stopAnimations();
            }
        } else {
            // 页面显示时恢复动画
            if (wasAnimationEnabled) {
                resumeAnimations();
            }
        }
    });

    // 窗口失去焦点时暂停动画
    window.addEventListener('blur', function () {
        wasAnimationEnabled = animationEnabled;
        if (animationEnabled) {
            stopAnimations();
        }
    });

    // 窗口获得焦点时恢复动画
    window.addEventListener('focus', function () {
        if (wasAnimationEnabled) {
            resumeAnimations();
        }
    });
}

// 最近七日上报趋势图表
function createTrendChart() {
    try {
        console.log('Creating urgencyChart...');
        const chartDom = document.getElementById('trendChart');
        if (!chartDom) {
            console.error('urgencyChart element not found');
            return;
        }
        console.log('urgencyChart element found:', chartDom);
        const myChart = echarts.init(chartDom);
        console.log('ECharts instance created for urgencyChart');

        const option = {
            backgroundColor: 'transparent',
            // 优化的动画配置
            animation: true,
            animationDuration: 2000,
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
                return idx * 300;
            },
            legend: {
                orient: 'vertical',
                right: '2%',
                top: 'center',
                textStyle: {
                    color: '#ffffff',
                    fontSize: 14
                },
                itemWidth: 12,
                itemHeight: 12,
                itemGap: 20
            },
            series: [
                // 外层底色圆环
                {
                    type: 'pie',
                    radius: ['40%', '80%'],
                    center: ['40%', '50%'],
                    silent: true,
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    },
                    data: [{
                        value: 100,
                        itemStyle: {
                            color: 'rgba(255, 255, 255, 0.1)'
                        }
                    }]
                },
                // 主要数据圆环
                {
                    type: 'pie',
                    radius: ['45%', '75%'],
                    center: ['40%', '50%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: true,
                        position: 'outside',
                        formatter: '{b}\n{c}%',
                        textStyle: {
                            color: '#ffffff',
                            fontSize: 14,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: true,
                        length: 15,
                        length2: 10,
                        lineStyle: {
                            color: '#ffffff',
                            width: 1
                        }
                    },
                    data: []
                }
            ]
        }
        fetchReq.get('/system/bigScreen/getValueByKey', { key: 'match_award_level_percent' }).then(res => {
          if (res.success) {
            option.series[1].data = res.result
          }
        }).finally(() => {
          myChart.setOption(option)
        })
        console.log('urgencyChart option set successfully');


        // 响应式调整
        window.addEventListener('resize', function() {
            myChart.resize();
        });

        console.log('urgencyChart created successfully');
    } catch (error) {
        console.error('Error creating urgencyChart:', error);
    }
}

// 事件上报情况图表 - 使用ECharts
function createReportingChart() {
    try {
        console.log('Creating reportingChart...');
        const chartDom = document.getElementById('reportingChart');
        if (!chartDom) {
            console.error('reportingChart element not found');
            return;
        }
        console.log('reportingChart element found:', chartDom);
        const myChart = echarts.init(chartDom);
        const option = {
            backgroundColor: 'transparent',
            // 优化的动画配置
            animation: true,
            animationDuration: 8000, // 总动画时长8秒
            animationEasing: 'elasticOut',
            animationDelay: 0, // 全局不延迟，让每个柱子控制自己的延迟
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                backgroundColor: 'rgba(0, 0, 0, 0.8)',
                borderColor: '#00d4ff',
                borderWidth: 1,
                textStyle: {
                    color: '#fff'
                }
            },
            legend: {
                data: ['人数'], // 只显示实际数据系列，不包括背景
                textStyle: {
                    color: '#ffffff',
                    fontSize: 14
                },
                top: '5%',
                right: '5%'
            },
            grid: {
                left: '10%',
                right: '10%',
                bottom: 120,   // <<< 增加底部留白，避免被压缩
            },
            xAxis: {
                type: 'category',
                data: [],
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.2)'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#ffffff',
                    fontSize: 12,
                    interval: 0,   // 强制显示所有标签（可选，不写会自动隐藏部分）
                    rotate: 45,    // 文字旋转角度，正值逆时针，负值顺时针
                    align: 'right', // 对齐方式，可选 'left' 'center' 'right',
                    margin: 30
                }
            },
            yAxis: {
                type: 'value',
                max: 250,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#ffffff',
                    fontSize: 12
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.1)'
                    }
                }
            },
            series: [
                {
                    name: '人数',
                    type: 'bar',
                    data: [],
                    // 优化的柱子动画配置
                    animation: true,
                    animationDuration: 150, // 每个柱子动画1.5秒
                    animationEasing: 'bounceOut',
                    animationDelay: function (idx) {
                        return idx * 120; // 每个蓝色柱子间隔1.2秒开始
                    },
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: 'rgba(55, 137, 255, 1)' // 顶部颜色
                            }, {
                                offset: 1, color: 'rgba(55, 137, 255, 0.2)' // 底部颜色
                            }]
                        },
                        borderRadius: [4, 4, 0, 0]
                    },
                    backgroundStyle: {
                        color: 'rgba(7,65,124,0.8)'
                    },
                    showBackground: true,
                    barWidth: '20%',
                    label: {
                        show: true,
                        position: 'top',
                        color: '#00ffff',
                        fontSize: 11,
                        fontWeight: 'bold',
                        textShadow: '0 0 4px rgba(0, 255, 255, 0.8)',
                        formatter: '{c}',
                        // 数字动画
                        animation: true,
                        animationDuration: 600,
                        animationEasing: 'bounceOut',
                        animationDelay: function (idx) {
                            return idx * 2500 + 2000; // 蓝色柱子完成后数字出现
                        }
                    }
                },
            ]
        };

        fetchReq.get('/system/bigScreen/getValueByKey', { key: 'match_award_college' }).then(res => {
          if (res.success) {
            option.xAxis.data = res.result.college
            option.series[0].data = res.result.stuNum
          }
        }).finally(() => {
          myChart.setOption(option)
        })
        console.log('reportingChart option set successfully');


        // 响应式处理
        window.addEventListener('resize', function() {
            myChart.resize();
        });

        console.log('reportingChart created successfully');
    } catch (error) {
        console.error('Error creating reportingChart:', error);
    }
}
