设计一个“技能人才数据统计分析页面”，用于政务后台管理。页面风格简洁大方、政务化，主色调为绿色+灰白，内容清晰易读，适配PC大屏。 页面用于展示技能人才的统计信息，支持管理员查看按“年龄段”、“技能类型”、“所属地区”等维度的统计报表与图表分析。 页面布局如下： 1. 页面顶部（深蓝色横栏）： - 页面标题：“技能人才数据统计” - 页面右上角显示管理员头像和“退出登录”按钮 2. 筛选与条件栏（灰色背景）： - 设置下拉筛选条件，字段包括： - 技能类型（农机操作、果树修剪、茶艺、电商等） - 地区（全国、省、市三级联动） - 年龄段（18-25、26-35、36-45、46以上） - 时间范围（支持选择年/月范围） - 一个蓝色按钮【查询统计】 3. 数据看板区（白色卡片）： - 显示四个核心数字指标（大字卡片风格）： - 技能人才总数：25,348人 - 本年新增：4,212人 - 参与培训人数：16,120人 - 获得认证证书人数：13,765人 4. 可视化图表区（浅灰背景）： - 使用图表展示统计信息： - 条形图：不同技能类型对应人数（农机：8,421人，茶艺：3,274人等） - 饼图：人才年龄结构占比（18-25岁：15%，26-35岁：35%，等） - 热力地图：中国地图分省展示技能人才分布（人数越多颜色越深） - 折线图：过去12个月人才增长趋势 5. 报表导出功能： - 页面右上角提供【导出Excel】【生成PDF报表】按钮 - 支持下载当前筛选条件下的全部统计数据和图表 6. 底部说明区： - 提示说明：数据来源、更新时间（如：数据截至2025年6月30日） - 联系方式：统计口业务负责人邮箱、电话等 设计要求： - 各模块色块清晰分隔 - 图表色彩合理（蓝、橙、绿为主） - 信息密度适中，支持鼠标悬停显示详细数据 - Initial Deployment
dde95be verified | <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.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#1b5936', | |
| secondary: '#2c9b5e', | |
| light: '#e6f4ea', | |
| dark: '#1a3a27', | |
| neutral: '#f1f5f9' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap'); | |
| body { | |
| font-family: 'Noto Sans SC', sans-serif; | |
| background-color: #f9fbfa; | |
| color: #333; | |
| } | |
| .chart-container { | |
| background: white; | |
| border-radius: 8px; | |
| box-shadow: 0 4px 6px rgba(0,0,0,0.05); | |
| transition: all 0.3s ease; | |
| } | |
| .chart-container:hover { | |
| box-shadow: 0 6px 12px rgba(0,0,0,0.1); | |
| transform: translateY(-2px); | |
| } | |
| .stat-card { | |
| transition: transform 0.3s ease; | |
| } | |
| .stat-card:hover { | |
| transform: scale(1.03); | |
| } | |
| #map-container { | |
| height: 100%; | |
| min-height: 300px; | |
| } | |
| .map-point { | |
| position: absolute; | |
| width: 12px; | |
| height: 12px; | |
| background: #2c9b5e; | |
| border: 2px solid white; | |
| border-radius: 50%; | |
| box-shadow: 0 0 5px rgba(0,0,0,0.2); | |
| transform: translate(-50%, -50%); | |
| } | |
| .map-point:hover { | |
| transform: translate(-50%, -50%) scale(1.5); | |
| z-index: 10; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-neutral-100"> | |
| <!-- 顶部导航栏 --> | |
| <header class="bg-primary text-white shadow-md"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <h1 class="text-xl font-bold flex items-center"> | |
| <i class="fas fa-chart-line mr-2"></i>技能人才数据统计 | |
| </h1> | |
| <div class="flex items-center"> | |
| <button class="bg-secondary hover:bg-green-700 text-white px-4 py-2 rounded mr-4 flex items-center"> | |
| <i class="fas fa-file-excel mr-2"></i>导出Excel | |
| </button> | |
| <button class="bg-secondary hover:bg-green-700 text-white px-4 py-2 rounded mr-4 flex items-center"> | |
| <i class="fas fa-file-pdf mr-2"></i>生成PDF报表 | |
| </button> | |
| <div class="relative group"> | |
| <div class="flex items-center cursor-pointer"> | |
| <img src="https://randomuser.me/api/portraits/men/41.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="管理员"> | |
| <span class="ml-2">张主任</span> | |
| <i class="fas fa-chevron-down ml-2 text-sm"></i> | |
| </div> | |
| <div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 hidden group-hover:block z-10"> | |
| <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100 flex items-center"> | |
| <i class="fas fa-user mr-2 text-sm"></i>个人中心 | |
| </a> | |
| <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100 flex items-center"> | |
| <i class="fas fa-cog mr-2 text-sm"></i>系统设置 | |
| </a> | |
| <div class="border-t border-gray-200 my-1"></div> | |
| <a href="#" class="block px-4 py-2 text-red-500 hover:bg-gray-100 flex items-center"> | |
| <i class="fas fa-sign-out-alt mr-2"></i>退出登录 | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- 筛选区域 --> | |
| <div class="bg-gray-100 py-4 shadow-inner"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-wrap items-center gap-4"> | |
| <div class="flex-1"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">技能类型</label> | |
| <div class="relative"> | |
| <select class="w-full bg-white border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-primary-light focus:border-primary"> | |
| <option>全部类型</option> | |
| <option selected>农机操作</option> | |
| <option>果树修剪</option> | |
| <option>茶艺</option> | |
| <option>电商</option> | |
| <option>烹饪</option> | |
| <option>家政服务</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="flex-1"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">地区</label> | |
| <div class="grid grid-cols-3 gap-2"> | |
| <select class="bg-white border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-primary-light focus:border-primary"> | |
| <option>全国</option> | |
| <option>东部</option> | |
| <option>西部</option> | |
| </select> | |
| <select class="bg-white border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-primary-light focus:border-primary"> | |
| <option>全部省份</option> | |
| <option>江苏省</option> | |
| </select> | |
| <select class="bg-white border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-primary-light focus:border-primary"> | |
| <option>全部城市</option> | |
| <option>南京市</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="flex-1"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">年龄段</label> | |
| <select class="w-full bg-white border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-primary-light focus:border-primary"> | |
| <option>全部</option> | |
| <option>18-25岁</option> | |
| <option selected>26-35岁</option> | |
| <option>36-45岁</option> | |
| <option>46岁以上</option> | |
| </select> | |
| </div> | |
| <div class="flex-1"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">时间范围</label> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <input type="month" class="bg-white border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-primary-light focus:border-primary" value="2025-01"> | |
| <input type="month" class="bg-white border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-primary-light focus:border-primary" value="2025-06"> | |
| </div> | |
| </div> | |
| <div class="self-end"> | |
| <button class="bg-primary hover:bg-dark text-white px-6 py-2.5 rounded-md flex items-center font-medium"> | |
| <i class="fas fa-search mr-2"></i>查询统计 | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 数据看板区 --> | |
| <div class="container mx-auto px-4 py-6"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-tachometer-alt mr-2 text-primary"></i>核心数据指标 | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5"> | |
| <!-- 卡片 1 --> | |
| <div class="stat-card bg-white rounded-xl shadow-md border-l-4 border-primary overflow-hidden"> | |
| <div class="p-5"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-gray-500 text-sm">技能人才总数</p> | |
| <p class="text-3xl font-bold mt-1 text-gray-800">25,348</p> | |
| <p class="text-green-600 text-sm mt-2 flex items-center"> | |
| <i class="fas fa-arrow-up mr-1"></i>较上月增长 5.2% | |
| </p> | |
| </div> | |
| <div class="bg-primary-light bg-opacity-20 p-3 rounded-full"> | |
| <i class="fas fa-users text-primary text-2xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-5 py-2 text-xs text-gray-500"> | |
| <i class="fas fa-info-circle mr-1"></i>涵盖所有技能类型人才 | |
| </div> | |
| </div> | |
| <!-- 卡片 2 --> | |
| <div class="stat-card bg-white rounded-xl shadow-md border-l-4 border-green-500 overflow-hidden"> | |
| <div class="p-5"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-gray-500 text-sm">本年新增</p> | |
| <p class="text-3xl font-bold mt-1 text-gray-800">4,212</p> | |
| <p class="text-green-600 text-sm mt-2 flex items-center"> | |
| <i class="fas fa-arrow-up mr-1"></i>较去年同期增长 12.6% | |
| </p> | |
| </div> | |
| <div class="bg-green-100 p-3 rounded-full"> | |
| <i class="fas fa-user-plus text-green-600 text-2xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-5 py-2 text-xs text-gray-500"> | |
| <i class="fas fa-info-circle mr-1"></i>统计时间：2025年1月-6月 | |
| </div> | |
| </div> | |
| <!-- 卡片 3 --> | |
| <div class="stat-card bg-white rounded-xl shadow-md border-l-4 border-blue-500 overflow-hidden"> | |
| <div class="p-5"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-gray-500 text-sm">参与培训人数</p> | |
| <p class="text-3xl font-bold mt-1 text-gray-800">16,120</p> | |
| <p class="text-green-600 text-sm mt-2 flex items-center"> | |
| <i class="fas fa-arrow-up mr-1"></i>培训完成率 87.4% | |
| </p> | |
| </div> | |
| <div class="bg-blue-100 p-3 rounded-full"> | |
| <i class="fas fa-graduation-cap text-blue-500 text-2xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-5 py-2 text-xs text-gray-500"> | |
| <i class="fas fa-info-circle mr-1"></i>2025年度培训计划 | |
| </div> | |
| </div> | |
| <!-- 卡片 4 --> | |
| <div class="stat-card bg-white rounded-xl shadow-md border-l-4 border-yellow-500 overflow-hidden"> | |
| <div class="p-5"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-gray-500 text-sm">获得认证证书人数</p> | |
| <p class="text-3xl font-bold mt-1 text-gray-800">13,765</p> | |
| <p class="text-gray-600 text-sm mt-2 flex items-center"> | |
| <i class="fas fa-certificate mr-1 text-yellow-500"></i>认证通过率 85.3% | |
| </p> | |
| </div> | |
| <div class="bg-yellow-100 p-3 rounded-full"> | |
| <i class="fas fa-award text-yellow-500 text-2xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-5 py-2 text-xs text-gray-500"> | |
| <i class="fas fa-info-circle mr-1"></i>国家认可的职业资格证书 | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 图表化展示区域 --> | |
| <div class="py-5 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-chart-pie mr-2 text-primary"></i>数据可视化分析 | |
| </h2> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-5 mb-5"> | |
| <!-- 技能类型分布柱状图 --> | |
| <div class="chart-container p-4"> | |
| <div class="text-lg font-medium text-gray-700 mb-3 flex items-center"> | |
| <i class="fas fa-chart-bar mr-2 text-primary"></i>技能人才类型分布 | |
| </div> | |
| <div class="h-72"> | |
| <canvas id="skillsChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- 年龄结构饼图 --> | |
| <div class="chart-container p-4"> | |
| <div class="text-lg font-medium text-gray-700 mb-3 flex items-center"> | |
| <i class="fas fa-chart-pie mr-2 text-primary"></i>人才年龄结构 | |
| </div> | |
| <div class="h-72"> | |
| <canvas id="ageChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-5 mb-5"> | |
| <!-- 人才分布地图 --> | |
| <div class="chart-container p-4"> | |
| <div class="text-lg font-medium text-gray-700 mb-3 flex items-center"> | |
| <i class="fas fa-map-marked-alt mr-2 text-primary"></i>技能人才地域分布 | |
| </div> | |
| <div class="h-72 relative" id="map-container"> | |
| <div class="map-point" style="top: 30%; left: 25%;" data-region="江苏" data-count="5840"> | |
| <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 bg-black bg-opacity-75 text-white px-2 py-1 rounded text-xs opacity-0 transition-opacity pointer-events-none"> | |
| <div>江苏省</div> | |
| <div>5840人</div> | |
| </div> | |
| </div> | |
| <div class="map-point" style="top: 35%; left: 30%;" data-region="浙江" data-count="4120"> | |
| <div class="map-tooltip">浙江省: 4120人</div> | |
| </div> | |
| <div class="map-point" style="top: 40%; left: 20%;" data-region="安徽" data-count="3200"> | |
| <div class="map-tooltip">安徽省: 3200人</div> | |
| </div> | |
| <div class="map-point" style="top: 27%; left: 50%;" data-region="山东" data-count="3800"> | |
| <div class="map-tooltip">山东省: 3800人</div> | |
| </div> | |
| <div class="map-point" style="top: 55%; left: 35%;" data-region="广东" data-count="5200"> | |
| <div class="map-tooltip">广东省: 5200人</div> | |
| </div> | |
| <div class="map-point" style="top: 50%; left: 45%;" data-region="湖南" data-count="2800"> | |
| <div class="map-tooltip">湖南省: 2800人</div> | |
| </div> | |
| <div class="map-point" style="top: 45%; left: 40%;" data-region="湖北" data-count="2650"> | |
| <div class="map-tooltip">湖北省: 2650人</div> | |
| </div> | |
| <div class="map-point" style="top: 32%; left: 60%;" data-region="辽宁" data-count="2380"> | |
| <div class="map-tooltip">辽宁省: 2380人</div> | |
| </div> | |
| <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAwIiBoZWlnaHQ9IjYwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Zz48cGF0aCBkPSJNNTAsMTAwTDEwMCwxNTBMMTUwLDEyMEwyMDAsMTYwTDI1MCwxMzBMMzAwLDE4MEwzNTAsMTUwTDQwMCwyMDAiIHN0cm9rZT0iIzhjOGM4YyIgZmlsbD0ibm9uZSIvPjwvZz48cGF0aCBkPSJNNTAsNTAwTDEwMCwzNTBMMTUwLDM1MEwyMDAsMzAwTDI1MCwzNTBMMzAwLDMwMEwzNTAsMjUwTDQwMCwzMDAiIHN0cm9rZT0iIzhjOGM4YyIgZmlsbD0iI2YxZjVmOSIvPjwvc3ZnPg==" alt="中国地图" class="w-full h-full object-contain filter brightness(97%)"> | |
| </div> | |
| </div> | |
| <!-- 增长趋势折线图 --> | |
| <div class="chart-container p-4"> | |
| <div class="text-lg font-medium text-gray-700 mb-3 flex items-center"> | |
| <i class="fas fa-chart-line mr-2 text-primary"></i>人才增长趋势 (近12个月) | |
| </div> | |
| <div class="h-72"> | |
| <canvas id="growthChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 底部信息 --> | |
| <footer class="bg-gray-100 py-4 border-t border-gray-200"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between"> | |
| <div class="mb-3 md:mb-0"> | |
| <p class="text-sm text-gray-600"> | |
| <i class="fas fa-database mr-1 text-gray-500"></i>数据来源：国家职业技能人才信息系统 | |
| </p> | |
| <p class="text-sm text-gray-600 mt-1"> | |
| <i class="fas fa-sync-alt mr-1 text-gray-500"></i>最后更新时间：2025年6月30日 15:42 | |
| </p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-600 flex items-center"> | |
| <i class="fas fa-envelope mr-1 text-gray-500"></i>业务支持邮箱：rencai@stats.gov.cn | |
| </p> | |
| <p class="text-sm text-gray-600 mt-1 flex items-center"> | |
| <i class="fas fa-phone-alt mr-1 text-gray-500"></i>联系电话：010-12345678 | |
| </p> | |
| </div> | |
| </div> | |
| <div class="mt-4 pt-3 border-t border-gray-200 text-center text-xs text-gray-500"> | |
| © 2025 人力资源和社会保障部职业技能人才数据中心版权所有 | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // 初始化区域地图提示点 | |
| document.querySelectorAll('.map-point').forEach(point => { | |
| const tooltip = point.querySelector('.map-tooltip'); | |
| point.addEventListener('mouseenter', () => { | |
| point.style.zIndex = '100'; | |
| if (tooltip) tooltip.classList.remove('opacity-0'); | |
| }); | |
| point.addEventListener('mouseleave', () => { | |
| point.style.zIndex = '1'; | |
| if (tooltip) tooltip.classList.add('opacity-0'); | |
| }); | |
| }); | |
| // 设置地图点的不同大小 | |
| document.querySelectorAll('.map-point').forEach(point => { | |
| const count = parseInt(point.getAttribute('data-count')); | |
| const size = 8 + Math.sqrt(count) * 0.3; // 根据人数设置点的不同大小 | |
| point.style.width = `${size}px`; | |
| point.style.height = `${size}px`; | |
| }); | |
| // 图表初始化 - 技能分布图表（柱状图） | |
| const skillsCtx = document.getElementById('skillsChart').getContext('2d'); | |
| const skillsChart = new Chart(skillsCtx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['农机操作', '果树修剪', '茶艺', '电商', '烹饪', '家政服务', '美容美发'], | |
| datasets: [{ | |
| label: '人才数量 (人)', | |
| data: [6421, 3875, 3274, 4521, 2852, 3170, 2235], | |
| backgroundColor: [ | |
| 'rgba(43, 155, 94, 0.7)', | |
| 'rgba(66, 133, 244, 0.7)', | |
| 'rgba(242, 169, 0, 0.7)', | |
| 'rgba(219, 68, 55, 0.7)', | |
| 'rgba(101, 31, 255, 0.7)', | |
| 'rgba(15, 157, 88, 0.7)', | |
| 'rgba(194, 24, 91, 0.7)' | |
| ], | |
| borderColor: [ | |
| 'rgb(43, 155, 94)', | |
| 'rgb(66, 133, 244)', | |
| 'rgb(242, 169, 0)', | |
| 'rgb(219, 68, 55)', | |
| 'rgb(101, 31, 255)', | |
| 'rgb(15, 157, 88)', | |
| 'rgb(194, 24, 91)' | |
| ], | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| return `${context.label}: ${context.raw.toLocaleString()}人`; | |
| } | |
| } | |
| }, | |
| legend: { | |
| display: false | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| ticks: { | |
| callback: function(value) { | |
| return value.toLocaleString(); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // 图表初始化 - 年龄结构（饼图） | |
| const ageCtx = document.getElementById('ageChart').getContext('2d'); | |
| const ageChart = new Chart(ageCtx, { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['18-25岁', '26-35岁', '36-45岁', '46岁以上'], | |
| datasets: [{ | |
| data: [15, 35, 28, 22], | |
| backgroundColor: [ | |
| 'rgba(43, 155, 94, 0.8)', | |
| 'rgba(66, 133, 244, 0.8)', | |
| 'rgba(242, 169, 0, 0.8)', | |
| 'rgba(219, 68, 55, 0.8)' | |
| ], | |
| borderColor: [ | |
| 'rgba(43, 155, 94, 1)', | |
| 'rgba(66, 133, 244, 1)', | |
| 'rgba(242, 169, 0, 1)', | |
| 'rgba(219, 68, 55, 1)' | |
| ], | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'right', | |
| }, | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| const label = context.label || ''; | |
| const value = context.raw || 0; | |
| const sum = context.dataset.data.reduce((a, b) => a + b, 0); | |
| const percentage = Math.round(value / sum * 100); | |
| return `${label}: ${value}% (${Math.round((value/100)*25348).toLocaleString()}人)`; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // 图表初始化 - 增长趋势（折线图） | |
| const growthCtx = document.getElementById('growthChart').getContext('2d'); | |
| const growthChart = new Chart(growthCtx, { | |
| type: 'line', | |
| data: { | |
| labels: ['7月', '8月', '9月', '10月', '11月', '12月', '1月', '2月', '3月', '4月', '5月', '6月'], | |
| datasets: [{ | |
| label: '新增人数', | |
| data: [620, 580, 650, 710, 685, 720, 810, 880, 790, 820, 840, 880], | |
| fill: false, | |
| borderColor: 'rgb(43, 155, 94)', | |
| backgroundColor: 'rgba(43, 155, 94, 0.2)', | |
| tension: 0.3, | |
| borderWidth: 3, | |
| pointBackgroundColor: 'white', | |
| pointBorderColor: 'rgb(43, 155, 94)', | |
| pointRadius: 5, | |
| pointHoverRadius: 7 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| return `新增人数: ${context.raw}人`; | |
| } | |
| } | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: false, | |
| min: 500, | |
| ticks: { | |
| callback: function(value) { | |
| return value.toLocaleString(); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // 设置筛选条件按钮点击效果 | |
| document.querySelectorAll('select, input').forEach(elem => { | |
| elem.addEventListener('change', () => { | |
| document.querySelector('.bg-primary').classList.add('animate-pulse'); | |
| setTimeout(() => { | |
| document.querySelector('.bg-primary').classList.remove('animate-pulse'); | |
| }, 500); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=maomaobj/nongye11" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |