请设计一个“苹果需求趋势分析”的中文可视化页面，页面风格为浅色、清晰、科技感，适合农业数据平台、供需预测系统或企业营销决策平台。页面结构如下： 1. 页面顶部为标题：“苹果需求趋势分析”，居中显示，字体醒目。 2. 页面左上方为筛选区域，包含以下控件： - 时间周期选择器（选项：近7天、近30天、近90天） - 地区下拉选择框（全国、省级、市级） - 品种多选框（如：红富士、秦冠、嘎啦、青香蕉） 3. 页面主区域为一张折线图，展示苹果需求变化趋势，图表要求如下： - X轴为时间（日或周） - Y轴为需求量（单位：吨） - 多条线分别代表不同品种或不同区域，颜色区分明显 - 鼠标悬浮可查看某一时间点的具体数据，包括需求量、同比变化百分比、参考价格 4. 折线图右上角添加切换按钮，可切换为： - 按品种查看趋势 - 按区域查看趋势 - 按销售渠道查看趋势（如批发、电商、商超） 5. 折线图下方为趋势解读区域，由AI自动生成如下内容： - 当前需求增长最快的品种/地区 - 近期明显下滑的品类或市场 - 建议备货策略或投放窗口（如：“下周为红富士高需求期，建议重点备货华东区域”） 6. 页面右下角放置导出按钮，支持下载趋势图、导出分析简报（PDF/Excel） 7. 整体配色以蓝色和绿色为主，保持数据图表清晰，适配浅色背景。 请构建此页面的完整布局，适合企业销售人员、电商运营经理、政府主管机构使用。 - Initial Deployment
10309c2 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: '#1E88E5', | |
| secondary: '#43A047', | |
| accent: '#1565C0', | |
| light: '#F5F7FA', | |
| dark: '#263238' | |
| } | |
| } | |
| } | |
| } | |
| </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: #F5F7FA; | |
| color: #263238; | |
| } | |
| .chart-container { | |
| background: linear-gradient(145deg, #ffffff, #f0f4f8); | |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); | |
| border-radius: 12px; | |
| overflow: hidden; | |
| } | |
| .card { | |
| background: white; | |
| border-radius: 12px; | |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); | |
| } | |
| .filter-card { | |
| background: rgba(255, 255, 255, 0.9); | |
| backdrop-filter: blur(10px); | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, #1E88E5, #1565C0); | |
| color: white; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-primary:hover { | |
| background: linear-gradient(135deg, #1565C0, #0D47A1); | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 12px rgba(30, 136, 229, 0.3); | |
| } | |
| .btn-secondary { | |
| background: linear-gradient(135deg, #43A047, #2E7D32); | |
| color: white; | |
| } | |
| .btn-secondary:hover { | |
| background: linear-gradient(135deg, #2E7D32, #1B5E20); | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 12px rgba(67, 160, 71, 0.3); | |
| } | |
| .trend-badge { | |
| padding: 2px 8px; | |
| border-radius: 12px; | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| } | |
| .up-trend { | |
| background-color: rgba(67, 160, 71, 0.15); | |
| color: #2E7D32; | |
| } | |
| .down-trend { | |
| background-color: rgba(229, 57, 53, 0.15); | |
| color: #C62828; | |
| } | |
| .chart-tooltip { | |
| background: rgba(255, 255, 255, 0.95) ; | |
| border: 1px solid #E0E0E0 ; | |
| border-radius: 8px ; | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) ; | |
| padding: 12px ; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-light min-h-screen"> | |
| <!-- 页面头部 --> | |
| <header class="py-6 bg-gradient-to-r from-primary to-accent text-white"> | |
| <div class="container mx-auto px-4"> | |
| <h1 class="text-3xl md:text-4xl font-bold text-center"> | |
| <i class="fas fa-apple-alt mr-3"></i>苹果需求趋势分析 | |
| </h1> | |
| <p class="text-center mt-2 opacity-90">农业数据智能分析平台 · 供需预测与决策支持系统</p> | |
| </div> | |
| </header> | |
| <!-- 主内容区 --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-6"> | |
| <!-- 筛选区域 --> | |
| <div class="lg:col-span-1"> | |
| <div class="card filter-card p-6"> | |
| <h2 class="text-xl font-semibold text-primary mb-4 flex items-center"> | |
| <i class="fas fa-filter mr-2"></i>数据筛选 | |
| </h2> | |
| <!-- 时间周期选择 --> | |
| <div class="mb-5"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">时间周期</label> | |
| <div class="grid grid-cols-3 gap-2"> | |
| <button class="btn-primary py-2 px-3 rounded-lg text-sm">近7天</button> | |
| <button class="bg-gray-100 hover:bg-gray-200 py-2 px-3 rounded-lg text-sm">近30天</button> | |
| <button class="bg-gray-100 hover:bg-gray-200 py-2 px-3 rounded-lg text-sm">近90天</button> | |
| </div> | |
| </div> | |
| <!-- 地区选择 --> | |
| <div class="mb-5"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">地区范围</label> | |
| <select class="w-full p-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary"> | |
| <option>全国</option> | |
| <option>华东地区</option> | |
| <option>华北地区</option> | |
| <option>华南地区</option> | |
| <option>华中地区</option> | |
| <option>西南地区</option> | |
| <option>东北地区</option> | |
| <option>西北地区</option> | |
| </select> | |
| </div> | |
| <!-- 品种选择 --> | |
| <div class="mb-5"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">苹果品种</label> | |
| <div class="space-y-2"> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="rounded text-primary" checked> | |
| <span class="ml-2">红富士</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="rounded text-primary" checked> | |
| <span class="ml-2">秦冠</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="rounded text-primary"> | |
| <span class="ml-2">嘎啦</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="rounded text-primary"> | |
| <span class="ml-2">青香蕉</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="rounded text-primary"> | |
| <span class="ml-2">花牛</span> | |
| </label> | |
| </div> | |
| </div> | |
| <!-- 数据更新信息 --> | |
| <div class="mt-6 pt-4 border-t border-gray-200"> | |
| <p class="text-sm text-gray-600"> | |
| <i class="fas fa-sync-alt mr-2"></i>数据最后更新: 2023-10-15 14:30 | |
| </p> | |
| </div> | |
| </div> | |
| <!-- 数据摘要卡片 --> | |
| <div class="card mt-6 p-6"> | |
| <h2 class="text-xl font-semibold text-primary mb-4 flex items-center"> | |
| <i class="fas fa-chart-line mr-2"></i>关键指标 | |
| </h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <p class="text-gray-600 text-sm">全国总需求量</p> | |
| <p class="text-2xl font-bold text-primary">8,450 吨</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-600 text-sm">周环比变化</p> | |
| <p class="text-xl font-bold text-secondary">+12.3% <span class="up-trend trend-badge"><i class="fas fa-arrow-up mr-1"></i>增长</span></p> | |
| </div> | |
| <div> | |
| <p class="text-gray-600 text-sm">平均价格</p> | |
| <p class="text-xl font-bold text-accent">¥6.8 /公斤</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 图表主区域 --> | |
| <div class="lg:col-span-3"> | |
| <div class="chart-container p-4 md:p-6"> | |
| <!-- 图表控制栏 --> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6"> | |
| <div> | |
| <h2 class="text-xl font-semibold text-primary">苹果需求趋势分析</h2> | |
| <p class="text-gray-600 text-sm mt-1">数据单位: 吨 (每日需求量)</p> | |
| </div> | |
| <div class="flex flex-wrap gap-2 mt-3 md:mt-0"> | |
| <button class="btn-primary px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-seedling mr-2"></i>按品种 | |
| </button> | |
| <button class="bg-gray-100 hover:bg-gray-200 px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-map-marker-alt mr-2"></i>按区域 | |
| </button> | |
| <button class="bg-gray-100 hover:bg-gray-200 px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-store mr-2"></i>按销售渠道 | |
| </button> | |
| </div> | |
| </div> | |
| <!-- 图表容器 --> | |
| <div class="h-80 md:h-96"> | |
| <canvas id="demandChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- AI趋势解读区域 --> | |
| <div class="card mt-6 p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-semibold text-primary flex items-center"> | |
| <i class="fas fa-robot mr-2"></i>AI趋势解读 | |
| </h2> | |
| <span class="bg-blue-50 text-primary text-xs px-3 py-1 rounded-full">实时分析</span> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="p-4 bg-blue-50 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center mr-3"> | |
| <i class="fas fa-arrow-up text-white"></i> | |
| </div> | |
| <h3 class="font-semibold text-primary">需求增长最快</h3> | |
| </div> | |
| <p class="text-sm">红富士苹果在华东地区需求增长显著，周环比增长<strong class="text-secondary">+18.7%</strong>，主要受电商促销活动影响。</p> | |
| </div> | |
| <div class="p-4 bg-orange-50 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-8 h-8 rounded-full bg-orange-500 flex items-center justify-center mr-3"> | |
| <i class="fas fa-arrow-down text-white"></i> | |
| </div> | |
| <h3 class="font-semibold text-orange-700">需求明显下滑</h3> | |
| </div> | |
| <p class="text-sm">秦冠苹果在华北地区需求下降<strong class="text-orange-700">-8.2%</strong>，主要受新上市品种替代影响。</p> | |
| </div> | |
| <div class="p-4 bg-green-50 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-8 h-8 rounded-full bg-secondary flex items-center justify-center mr-3"> | |
| <i class="fas fa-lightbulb text-white"></i> | |
| </div> | |
| <h3 class="font-semibold text-secondary">策略建议</h3> | |
| </div> | |
| <p class="text-sm">下周为红富士苹果高需求期，建议重点备货华东区域，增加电商渠道库存<strong>15-20%</strong>。</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- 底部操作区 --> | |
| <footer class="container mx-auto px-4 py-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="text-sm text-gray-600 mb-4 md:mb-0"> | |
| <p>© 2023 农业数据智能分析平台 | 为农业决策提供数据支持</p> | |
| </div> | |
| <div class="flex space-x-3"> | |
| <button class="btn-primary px-5 py-2.5 rounded-lg flex items-center"> | |
| <i class="fas fa-download mr-2"></i>下载图表 | |
| </button> | |
| <button class="btn-secondary px-5 py-2.5 rounded-lg flex items-center"> | |
| <i class="fas fa-file-export mr-2"></i>导出分析简报 | |
| </button> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // 图表初始化 | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const ctx = document.getElementById('demandChart').getContext('2d'); | |
| // 模拟数据 | |
| const dates = []; | |
| for (let i = 6; i >= 0; i--) { | |
| const date = new Date(); | |
| date.setDate(date.getDate() - i); | |
| dates.push(date.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' })); | |
| } | |
| // 图表配置 | |
| const chart = new Chart(ctx, { | |
| type: 'line', | |
| data: { | |
| labels: dates, | |
| datasets: [ | |
| { | |
| label: '红富士', | |
| data: [320, 340, 380, 420, 450, 480, 520], | |
| borderColor: '#1E88E5', | |
| backgroundColor: 'rgba(30, 136, 229, 0.1)', | |
| borderWidth: 3, | |
| pointRadius: 5, | |
| pointBackgroundColor: '#fff', | |
| pointBorderWidth: 2, | |
| tension: 0.2 | |
| }, | |
| { | |
| label: '秦冠', | |
| data: [280, 300, 320, 310, 290, 270, 260], | |
| borderColor: '#43A047', | |
| backgroundColor: 'rgba(67, 160, 71, 0.1)', | |
| borderWidth: 3, | |
| pointRadius: 5, | |
| pointBackgroundColor: '#fff', | |
| pointBorderWidth: 2, | |
| tension: 0.2 | |
| }, | |
| { | |
| label: '嘎啦', | |
| data: [180, 200, 220, 240, 230, 250, 270], | |
| borderColor: '#FF9800', | |
| backgroundColor: 'rgba(255, 152, 0, 0.1)', | |
| borderWidth: 3, | |
| pointRadius: 5, | |
| pointBackgroundColor: '#fff', | |
| pointBorderWidth: 2, | |
| tension: 0.2 | |
| }, | |
| { | |
| label: '青香蕉', | |
| data: [150, 160, 170, 165, 180, 190, 200], | |
| borderColor: '#9C27B0', | |
| backgroundColor: 'rgba(156, 39, 176, 0.1)', | |
| borderWidth: 3, | |
| pointRadius: 5, | |
| pointBackgroundColor: '#fff', | |
| pointBorderWidth: 2, | |
| tension: 0.2 | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'top', | |
| labels: { | |
| padding: 20, | |
| usePointStyle: true, | |
| pointStyle: 'circle', | |
| font: { | |
| size: 13 | |
| } | |
| } | |
| }, | |
| tooltip: { | |
| backgroundColor: 'rgba(255, 255, 255, 0.95)', | |
| titleColor: '#1E88E5', | |
| titleFont: { | |
| weight: 'bold', | |
| size: 14 | |
| }, | |
| bodyColor: '#263238', | |
| bodyFont: { | |
| size: 13 | |
| }, | |
| borderColor: '#E0E0E0', | |
| borderWidth: 1, | |
| padding: 12, | |
| usePointStyle: true, | |
| callbacks: { | |
| label: function(context) { | |
| const label = context.dataset.label || ''; | |
| const value = context.parsed.y || 0; | |
| const prices = { | |
| '红富士': '¥7.2/kg', | |
| '秦冠': '¥5.8/kg', | |
| '嘎啦': '¥6.5/kg', | |
| '青香蕉': '¥6.0/kg' | |
| }; | |
| const change = { | |
| '红富士': '+18.7%', | |
| '秦冠': '-8.2%', | |
| '嘎啦': '+12.5%', | |
| '青香蕉': '+5.3%' | |
| }; | |
| return [ | |
| `${label}: ${value} 吨`, | |
| `同比变化: ${change[label]}`, | |
| `参考价格: ${prices[label]}` | |
| ]; | |
| } | |
| } | |
| } | |
| }, | |
| scales: { | |
| x: { | |
| grid: { | |
| display: false | |
| }, | |
| title: { | |
| display: true, | |
| text: '日期', | |
| font: { | |
| size: 13, | |
| weight: 'bold' | |
| } | |
| } | |
| }, | |
| y: { | |
| beginAtZero: true, | |
| grid: { | |
| color: 'rgba(0, 0, 0, 0.05)' | |
| }, | |
| title: { | |
| display: true, | |
| text: '需求量 (吨)', | |
| font: { | |
| size: 13, | |
| weight: 'bold' | |
| } | |
| } | |
| } | |
| }, | |
| interaction: { | |
| mode: 'index', | |
| intersect: false | |
| }, | |
| animations: { | |
| tension: { | |
| duration: 1000, | |
| easing: 'linear' | |
| } | |
| } | |
| } | |
| }); | |
| // 添加响应式调整 | |
| window.addEventListener('resize', function() { | |
| chart.resize(); | |
| }); | |
| // 筛选按钮交互 | |
| document.querySelectorAll('.btn-primary, .bg-gray-100').forEach(button => { | |
| button.addEventListener('click', function() { | |
| document.querySelectorAll('.btn-primary, .bg-gray-100').forEach(btn => { | |
| btn.classList.remove('btn-primary'); | |
| btn.classList.add('bg-gray-100', 'hover:bg-gray-200'); | |
| }); | |
| this.classList.remove('bg-gray-100', 'hover:bg-gray-200'); | |
| this.classList.add('btn-primary'); | |
| }); | |
| }); | |
| }); | |
| </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/apple6" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |