| <!DOCTYPE html> |
| <html lang="zh-CN"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>苹果市场需求精准预测</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/china-map-data@1.0.0/dist/china.js"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| .card-hover:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); |
| } |
| .map-container, .chart-container { |
| transition: all 0.3s ease; |
| } |
| .map-container:hover, .chart-container:hover { |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); |
| } |
| #chinaMap, #trendChart { |
| width: 100%; |
| height: 100%; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 font-sans"> |
| |
| <header class="bg-white shadow-sm"> |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> |
| <div class="flex items-center"> |
| <i class="fas fa-apple-alt text-green-500 text-2xl mr-3"></i> |
| <h1 class="text-2xl font-bold text-gray-800">苹果市场需求精准预测</h1> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <div class="flex items-center bg-gray-100 rounded-lg px-3 py-2"> |
| <i class="fas fa-calendar-alt text-gray-500 mr-2"></i> |
| <input type="date" class="bg-transparent border-none outline-none text-gray-700" value="2023-11-15"> |
| </div> |
| <div class="relative"> |
| <select class="appearance-none bg-gray-100 border-none rounded-lg px-4 py-2 pr-8 text-gray-700 focus:outline-none"> |
| <option>1周预测</option> |
| <option>2周预测</option> |
| <option selected>4周预测</option> |
| <option>8周预测</option> |
| </select> |
| <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"> |
| <i class="fas fa-chevron-down"></i> |
| </div> |
| </div> |
| <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center"> |
| <i class="fas fa-sync-alt mr-2"></i> |
| <span>更新数据</span> |
| </button> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="container mx-auto px-4 py-6"> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> |
| |
| <div class="bg-white rounded-xl shadow-md p-6 card-hover transition-all duration-300 border-l-4 border-blue-500"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <p class="text-gray-500 text-sm">全国预计总销量</p> |
| <h2 class="text-3xl font-bold text-gray-800 mt-2">128,450 <span class="text-lg">吨</span></h2> |
| <p class="text-green-500 text-sm mt-2 flex items-center"> |
| <i class="fas fa-arrow-up mr-1"></i> 环比增长 8.2% |
| </p> |
| </div> |
| <div class="bg-blue-100 p-3 rounded-full"> |
| <i class="fas fa-chart-line text-blue-500 text-xl"></i> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-xl shadow-md p-6 card-hover transition-all duration-300 border-l-4 border-green-500"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <p class="text-gray-500 text-sm">热门销区城市</p> |
| <div class="mt-3 space-y-2"> |
| <div class="flex justify-between items-center"> |
| <span class="text-gray-700">1. 北京</span> |
| <span class="font-medium text-gray-800">12,450吨</span> |
| </div> |
| <div class="flex justify-between items-center"> |
| <span class="text-gray-700">2. 上海</span> |
| <span class="font-medium text-gray-800">11,230吨</span> |
| </div> |
| <div class="flex justify-between items-center"> |
| <span class="text-gray-700">3. 广州</span> |
| <span class="font-medium text-gray-800">9,870吨</span> |
| </div> |
| </div> |
| </div> |
| <div class="bg-green-100 p-3 rounded-full"> |
| <i class="fas fa-map-marker-alt text-green-500 text-xl"></i> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-xl shadow-md p-6 card-hover transition-all duration-300 border-l-4 border-purple-500"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <p class="text-gray-500 text-sm">预测均价</p> |
| <h2 class="text-3xl font-bold text-gray-800 mt-2">6.85 <span class="text-lg">元/斤</span></h2> |
| <p class="text-red-500 text-sm mt-2 flex items-center"> |
| <i class="fas fa-arrow-down mr-1"></i> 环比下降 2.3% |
| </p> |
| </div> |
| <div class="bg-purple-100 p-3 rounded-full"> |
| <i class="fas fa-tags text-purple-500 text-xl"></i> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-xl shadow-md p-6 card-hover transition-all duration-300 border-l-4 border-yellow-500"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <p class="text-gray-500 text-sm">高需求品种</p> |
| <div class="mt-3"> |
| <span class="inline-block bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm mr-2 mb-2">红富士</span> |
| <span class="inline-block bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm mr-2 mb-2">嘎啦</span> |
| <span class="inline-block bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm mr-2 mb-2">秦冠</span> |
| <span class="inline-block bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm mr-2 mb-2">青香蕉</span> |
| </div> |
| </div> |
| <div class="bg-yellow-100 p-3 rounded-full"> |
| <i class="fas fa-seedling text-yellow-500 text-xl"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8"> |
| |
| <div class="bg-white rounded-xl shadow-md p-6 map-container h-96"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="text-lg font-semibold text-gray-800">全国苹果需求热力图</h3> |
| <div class="flex space-x-2"> |
| <button class="bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-lg text-sm text-gray-700">省份</button> |
| <button class="bg-blue-500 hover:bg-blue-600 px-3 py-1 rounded-lg text-sm text-white">城市</button> |
| </div> |
| </div> |
| <div id="chinaMap"></div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-xl shadow-md p-6 chart-container h-96"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="text-lg font-semibold text-gray-800">需求趋势分析</h3> |
| <div class="flex space-x-2"> |
| <button class="bg-blue-500 hover:bg-blue-600 px-3 py-1 rounded-lg text-sm text-white">销量趋势</button> |
| <button class="bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-lg text-sm text-gray-700">品种对比</button> |
| </div> |
| </div> |
| <div id="trendChart"></div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-xl shadow-md p-6 mb-8"> |
| <div class="flex items-center mb-6"> |
| <i class="fas fa-robot text-blue-500 text-2xl mr-3"></i> |
| <h3 class="text-xl font-semibold text-gray-800">AI智能建议</h3> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
| |
| <div class="bg-blue-50 rounded-lg p-5"> |
| <div class="flex items-center mb-3"> |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-truck text-blue-500"></i> |
| </div> |
| <h4 class="font-medium text-gray-800">产区发货匹配</h4> |
| </div> |
| <ul class="space-y-3 text-sm text-gray-700"> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i> |
| <span>渭南秦冠适合发往成都市场</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i> |
| <span>烟台红富士优先供应北京、上海</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i> |
| <span>洛川苹果可增加广州市场投放</span> |
| </li> |
| </ul> |
| </div> |
|
|
| |
| <div class="bg-green-50 rounded-lg p-5"> |
| <div class="flex items-center mb-3"> |
| <div class="bg-green-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-percentage text-green-500"></i> |
| </div> |
| <h4 class="font-medium text-gray-800">促销建议</h4> |
| </div> |
| <ul class="space-y-3 text-sm text-gray-700"> |
| <li class="flex items-start"> |
| <i class="fas fa-bolt text-green-500 mt-1 mr-2"></i> |
| <span>电商平台建议主推85#红富士礼盒装</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-bolt text-green-500 mt-1 mr-2"></i> |
| <span>商超渠道可开展"买二送一"活动</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-bolt text-green-500 mt-1 mr-2"></i> |
| <span>批发市场建议增加小包装规格</span> |
| </li> |
| </ul> |
| </div> |
|
|
| |
| <div class="bg-purple-50 rounded-lg p-5"> |
| <div class="flex items-center mb-3"> |
| <div class="bg-purple-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-lightbulb text-purple-500"></i> |
| </div> |
| <h4 class="font-medium text-gray-800">区域市场洞察</h4> |
| </div> |
| <ul class="space-y-3 text-sm text-gray-700"> |
| <li class="flex items-start"> |
| <i class="fas fa-map-marked-alt text-purple-500 mt-1 mr-2"></i> |
| <span>东北区域将迎来节假日需求高峰</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-map-marked-alt text-purple-500 mt-1 mr-2"></i> |
| <span>长三角地区偏好高端礼盒包装</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-map-marked-alt text-purple-500 mt-1 mr-2"></i> |
| <span>西南市场对酸甜口品种需求增加</span> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <footer class="bg-white border-t py-6"> |
| <div class="container mx-auto px-4 text-center text-gray-500 text-sm"> |
| <p>© 2023 苹果市场需求精准预测 - 农业大数据分析中心</p> |
| <p class="mt-2">数据更新时间: 2023-11-15 09:30:45 | 预测模型版本: V2.3.5</p> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| const mapChart = echarts.init(document.getElementById('chinaMap')); |
| |
| |
| const data = [ |
| {name: '北京', value: 12450}, |
| {name: '天津', value: 8450}, |
| {name: '上海', value: 11230}, |
| {name: '重庆', value: 7650}, |
| {name: '河北', value: 9230}, |
| {name: '山西', value: 6540}, |
| {name: '辽宁', value: 8760}, |
| {name: '吉林', value: 5430}, |
| {name: '黑龙江', value: 4980}, |
| {name: '江苏', value: 10320}, |
| {name: '浙江', value: 9870}, |
| {name: '安徽', value: 7650}, |
| {name: '福建', value: 8320}, |
| {name: '江西', value: 6540}, |
| {name: '山东', value: 11560}, |
| {name: '河南', value: 9870}, |
| {name: '湖北', value: 8760}, |
| {name: '湖南', value: 7650}, |
| {name: '广东', value: 12840}, |
| {name: '海南', value: 4320}, |
| {name: '四川', value: 9870}, |
| {name: '贵州', value: 5430}, |
| {name: '云南', value: 6540}, |
| {name: '陕西', value: 8760}, |
| {name: '甘肃', value: 5430}, |
| {name: '青海', value: 3210}, |
| {name: '内蒙古', value: 4320}, |
| {name: '广西', value: 6540}, |
| {name: '西藏', value: 2100}, |
| {name: '宁夏', value: 3210}, |
| {name: '新疆', value: 5430} |
| ]; |
| |
| const option = { |
| title: { |
| text: '', |
| subtext: '', |
| left: 'center' |
| }, |
| tooltip: { |
| trigger: 'item', |
| formatter: '{b}<br/>预测需求量: {c} 吨' |
| }, |
| visualMap: { |
| min: 2000, |
| max: 13000, |
| text: ['高', '低'], |
| realtime: false, |
| calculable: true, |
| inRange: { |
| color: ['#f0f9e8', '#bae4bc', '#7bccc4', '#43a2ca', '#0868ac'] |
| }, |
| textStyle: { |
| color: '#666' |
| } |
| }, |
| series: [{ |
| name: '苹果需求量', |
| type: 'map', |
| map: 'china', |
| roam: true, |
| label: { |
| show: true, |
| fontSize: 10, |
| color: '#333' |
| }, |
| emphasis: { |
| label: { |
| show: true, |
| color: '#fff' |
| }, |
| itemStyle: { |
| areaColor: '#ff7f00' |
| } |
| }, |
| itemStyle: { |
| borderColor: '#fff', |
| borderWidth: 1 |
| }, |
| data: data, |
| |
| select: { |
| itemStyle: { |
| areaColor: '#ff7f00' |
| }, |
| label: { |
| color: '#fff' |
| } |
| } |
| }] |
| }; |
| |
| mapChart.setOption(option); |
| |
| |
| window.addEventListener('resize', function() { |
| mapChart.resize(); |
| trendChart.resize(); |
| }); |
| |
| |
| const trendChart = echarts.init(document.getElementById('trendChart')); |
| |
| const trendOption = { |
| tooltip: { |
| trigger: 'axis', |
| axisPointer: { |
| type: 'cross', |
| crossStyle: { |
| color: '#999' |
| } |
| } |
| }, |
| legend: { |
| data: ['全国销量预测', '红富士', '秦冠', '青香蕉', '嘎啦'], |
| textStyle: { |
| color: '#666' |
| } |
| }, |
| grid: { |
| left: '3%', |
| right: '4%', |
| bottom: '3%', |
| containLabel: true |
| }, |
| xAxis: [ |
| { |
| type: 'category', |
| data: ['第1周', '第2周', '第3周', '第4周'], |
| axisPointer: { |
| type: 'shadow' |
| }, |
| axisLabel: { |
| color: '#666' |
| } |
| } |
| ], |
| yAxis: [ |
| { |
| type: 'value', |
| name: '销量(吨)', |
| min: 0, |
| max: 40000, |
| interval: 10000, |
| axisLabel: { |
| formatter: '{value}', |
| color: '#666' |
| }, |
| axisLine: { |
| lineStyle: { |
| color: '#666' |
| } |
| } |
| }, |
| { |
| type: 'value', |
| name: '品种占比(%)', |
| min: 0, |
| max: 100, |
| interval: 20, |
| axisLabel: { |
| formatter: '{value}%', |
| color: '#666' |
| }, |
| axisLine: { |
| lineStyle: { |
| color: '#666' |
| } |
| } |
| } |
| ], |
| series: [ |
| { |
| name: '全国销量预测', |
| type: 'line', |
| data: [28500, 31200, 34500, 32400], |
| smooth: true, |
| lineStyle: { |
| width: 3, |
| color: '#4575b4' |
| }, |
| itemStyle: { |
| color: '#4575b4' |
| }, |
| symbolSize: 8 |
| }, |
| { |
| name: '红富士', |
| type: 'bar', |
| yAxisIndex: 1, |
| data: [45, 48, 52, 50], |
| itemStyle: { |
| color: '#d73027' |
| } |
| }, |
| { |
| name: '秦冠', |
| type: 'bar', |
| yAxisIndex: 1, |
| data: [25, 22, 20, 18], |
| itemStyle: { |
| color: '#fc8d59' |
| } |
| }, |
| { |
| name: '青香蕉', |
| type: 'bar', |
| yAxisIndex: 1, |
| data: [15, 14, 13, 16], |
| itemStyle: { |
| color: '#fee08b' |
| } |
| }, |
| { |
| name: '嘎啦', |
| type: 'bar', |
| yAxisIndex: 1, |
| data: [15, 16, 15, 16], |
| itemStyle: { |
| color: '#91cf60' |
| } |
| } |
| ] |
| }; |
| |
| trendChart.setOption(trendOption); |
| </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/apple3" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
