| <!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> |
| .map-container { |
| width: 100%; |
| height: 500px; |
| background-color: #f5f7fa; |
| border-radius: 8px; |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
| } |
| .analysis-card { |
| transition: all 0.3s ease; |
| } |
| .analysis-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); |
| } |
| .ai-suggestion { |
| background: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%); |
| border-left: 4px solid #3b82f6; |
| } |
| .heatmap-legend { |
| background: rgba(255, 255, 255, 0.8); |
| border-radius: 4px; |
| padding: 5px 10px; |
| } |
| .flow-legend { |
| background: rgba(255, 255, 255, 0.8); |
| border-radius: 4px; |
| padding: 5px 10px; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50"> |
| <div class="container mx-auto px-4 py-6"> |
| |
| <div class="flex justify-between items-center mb-6"> |
| <div> |
| <h1 class="text-3xl font-bold text-gray-800">苹果产销流向图谱分析</h1> |
| <p class="text-gray-600">全国苹果产业链物流与价格动态监测平台</p> |
| </div> |
| <div class="flex space-x-4"> |
| <div class="bg-blue-100 text-blue-800 px-4 py-2 rounded-lg flex items-center"> |
| <i class="fas fa-calendar-alt mr-2"></i> |
| <span>2023年11月数据</span> |
| </div> |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center"> |
| <i class="fas fa-download mr-2"></i> |
| <span>导出报告</span> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-6"> |
| |
| <div class="lg:col-span-1 bg-white rounded-lg shadow p-4"> |
| <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center"> |
| <i class="fas fa-map-marker-alt text-blue-500 mr-2"></i> |
| 主产区选择 |
| </h2> |
| <div class="space-y-3"> |
| <div class="p-3 rounded-lg bg-blue-50 border border-blue-200 cursor-pointer hover:bg-blue-100 transition"> |
| <div class="flex justify-between items-center"> |
| <span class="font-medium text-blue-800">烟台产区</span> |
| <span class="text-sm text-blue-600">山东</span> |
| </div> |
| <div class="mt-1 text-sm text-gray-600">月均出货量: 12.5万吨</div> |
| </div> |
| <div class="p-3 rounded-lg border border-gray-200 cursor-pointer hover:bg-gray-50 transition"> |
| <div class="flex justify-between items-center"> |
| <span class="font-medium text-gray-800">渭南产区</span> |
| <span class="text-sm text-gray-600">陕西</span> |
| </div> |
| <div class="mt-1 text-sm text-gray-600">月均出货量: 8.2万吨</div> |
| </div> |
| <div class="p-3 rounded-lg border border-gray-200 cursor-pointer hover:bg-gray-50 transition"> |
| <div class="flex justify-between items-center"> |
| <span class="font-medium text-gray-800">洛川产区</span> |
| <span class="text-sm text-gray-600">陕西</span> |
| </div> |
| <div class="mt-1 text-sm text-gray-600">月均出货量: 6.7万吨</div> |
| </div> |
| <div class="p-3 rounded-lg border border-gray-200 cursor-pointer hover:bg-gray-50 transition"> |
| <div class="flex justify-between items-center"> |
| <span class="font-medium text-gray-800">静宁产区</span> |
| <span class="text-sm text-gray-600">甘肃</span> |
| </div> |
| <div class="mt-1 text-sm text-gray-600">月均出货量: 5.3万吨</div> |
| </div> |
| <div class="p-3 rounded-lg border border-gray-200 cursor-pointer hover:bg-gray-50 transition"> |
| <div class="flex justify-between items-center"> |
| <span class="font-medium text-gray-800">昭通产区</span> |
| <span class="text-sm text-gray-600">云南</span> |
| </div> |
| <div class="mt-1 text-sm text-gray-600">月均出货量: 3.1万吨</div> |
| </div> |
| </div> |
|
|
| <div class="mt-6"> |
| <h3 class="font-medium text-gray-700 mb-2 flex items-center"> |
| <i class="fas fa-filter text-blue-500 mr-2"></i> |
| 筛选条件 |
| </h3> |
| <div class="space-y-3"> |
| <div> |
| <label class="block text-sm text-gray-600 mb-1">时间范围</label> |
| <select class="w-full p-2 border border-gray-300 rounded-md"> |
| <option>近1个月</option> |
| <option>近3个月</option> |
| <option>近6个月</option> |
| <option selected>2023年全年</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-sm text-gray-600 mb-1">苹果品种</label> |
| <select class="w-full p-2 border border-gray-300 rounded-md"> |
| <option selected>全部品种</option> |
| <option>红富士</option> |
| <option>嘎啦</option> |
| <option>黄元帅</option> |
| <option>国光</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-sm text-gray-600 mb-1">物流方式</label> |
| <select class="w-full p-2 border border-gray-300 rounded-md"> |
| <option selected>全部方式</option> |
| <option>冷链运输</option> |
| <option>普通货运</option> |
| <option>铁路运输</option> |
| </select> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="lg:col-span-3"> |
| <div class="bg-white rounded-lg shadow p-4"> |
| <div class="flex justify-between items-center mb-4"> |
| <h2 class="text-xl font-semibold text-gray-800 flex items-center"> |
| <i class="fas fa-map text-blue-500 mr-2"></i> |
| 全国苹果物流流向图谱 |
| </h2> |
| <div class="flex space-x-2"> |
| <button class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-md text-sm flex items-center"> |
| <i class="fas fa-layer-group mr-1"></i> |
| <span>图层控制</span> |
| </button> |
| <button class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-md text-sm flex items-center"> |
| <i class="fas fa-search mr-1"></i> |
| <span>搜索城市</span> |
| </button> |
| </div> |
| </div> |
| <div class="map-container" id="mainMap"></div> |
| <div class="flex justify-between mt-3 text-sm text-gray-600"> |
| <div class="flow-legend"> |
| <div class="flex items-center mb-1"> |
| <span class="w-4 h-1 bg-green-500 mr-2"></span> |
| <span>价格差 < 0.5元/kg</span> |
| </div> |
| <div class="flex items-center mb-1"> |
| <span class="w-6 h-1 bg-yellow-500 mr-2"></span> |
| <span>价格差 0.5-1元/kg</span> |
| </div> |
| <div class="flex items-center"> |
| <span class="w-8 h-1 bg-red-500 mr-2"></span> |
| <span>价格差 > 1元/kg</span> |
| </div> |
| </div> |
| <div class="heatmap-legend"> |
| <div class="flex items-center"> |
| <span class="text-xs mr-1">低</span> |
| <span class="w-4 h-4 bg-blue-100 mr-1"></span> |
| <span class="w-4 h-4 bg-blue-300 mr-1"></span> |
| <span class="w-4 h-4 bg-blue-500 mr-1"></span> |
| <span class="w-4 h-4 bg-blue-700 mr-1"></span> |
| <span class="w-4 h-4 bg-blue-900 mr-1"></span> |
| <span class="text-xs">高</span> |
| </div> |
| <div class="text-center mt-1">销售热度</div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6"> |
| <div class="analysis-card bg-white rounded-lg shadow p-4"> |
| <div class="flex items-center mb-3"> |
| <div class="bg-blue-100 text-blue-600 p-2 rounded-full mr-3"> |
| <i class="fas fa-exchange-alt"></i> |
| </div> |
| </div> |
| <h3 class="font-semibold text-gray-800 mb-2">枢纽市场识别</h3> |
| <ul class="text-sm text-gray-600 space-y-1"> |
| <li class="flex items-center"> |
| <span class="w-2 h-2 bg-blue-500 rounded-full mr-2"></span> |
| <span>北京新发地市场 (中转率82%)</span> |
| </li> |
| <li class="flex items-center"> |
| <span class="w-2 h-2 bg-blue-500 rounded-full mr-2"></span> |
| <span>广州江南市场 (中转率76%)</span> |
| </li> |
| <li class="flex items-center"> |
| <span class="w-2 h-2 bg-blue-500 rounded-full mr-2"></span> |
| <span>郑州万邦市场 (中转率68%)</span> |
| </li> |
| </ul> |
| </div> |
| <div class="analysis-card bg-white rounded-lg shadow p-4"> |
| <div class="flex items-center mb-3"> |
| <div class="bg-green-100 text-green-600 p-2 rounded-full mr-3"> |
| <i class="fas fa-map-marked-alt"></i> |
| </div> |
| </div> |
| <h3 class="font-semibold text-gray-800 mb-2">潜在空白市场</h3> |
| <ul class="text-sm text-gray-600 space-y-1"> |
| <li class="flex items-center"> |
| <span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span> |
| <span>南宁市 (需求缺口3.2万吨)</span> |
| </li> |
| <li class="flex items-center"> |
| <span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span> |
| <span>海口市 (价格溢价15%)</span> |
| </li> |
| <li class="flex items-center"> |
| <span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span> |
| <span>拉萨市 (运输成本高)</span> |
| </li> |
| </ul> |
| </div> |
| <div class="analysis-card bg-white rounded-lg shadow p-4"> |
| <div class="flex items-center mb-3"> |
| <div class="bg-red-100 text-red-600 p-2 rounded-full mr-3"> |
| <i class="fas fa-temperature-low"></i> |
| </div> |
| </div> |
| <h3 class="font-semibold text-gray-800 mb-2">冷链瓶颈路径</h3> |
| <ul class="text-sm text-gray-600 space-y-1"> |
| <li class="flex items-center"> |
| <span class="w-2 h-2 bg-red-500 rounded-full mr-2"></span> |
| <span>烟台-广州 (损耗率8.5%)</span> |
| </li> |
| <li class="flex items-center"> |
| <span class="w-2 h-2 bg-red-500 rounded-full mr-2"></span> |
| <span>洛川-上海 (冷链覆盖率60%)</span> |
| </li> |
| <li class="flex items-center"> |
| <span class="w-2 h-2 bg-red-500 rounded-full mr-2"></span> |
| <span>静宁-成都 (温度波动大)</span> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="mt-6 grid grid-cols-1 lg:grid-cols-4 gap-6"> |
| <div class="lg:col-span-1"></div> |
| <div class="lg:col-span-3 ai-suggestion rounded-lg shadow p-4"> |
| <div class="flex items-center mb-3"> |
| <div class="bg-purple-100 text-purple-600 p-2 rounded-full mr-3"> |
| <i class="fas fa-robot"></i> |
| </div> |
| <h3 class="font-semibold text-gray-800">AI供应链优化建议</h3> |
| </div> |
| <div class="text-sm text-gray-700"> |
| <p class="mb-2">基于当前数据分析，系统建议：</p> |
| <ol class="list-decimal pl-5 space-y-1"> |
| <li>增加烟台至南宁的直达冷链线路，预计可降低运输成本12%</li> |
| <li>在广州江南市场增设临时仓储，缓解11-12月旺季拥堵</li> |
| <li>针对拉萨市场，建议采用铁路+公路联运模式，平衡成本与时效</li> |
| <li>静宁产区可考虑与成都本地经销商建立长期合作，减少中间环节</li> |
| </ol> |
| <div class="mt-3 flex justify-end"> |
| <button class="px-3 py-1 bg-purple-600 hover:bg-purple-700 text-white rounded-md text-sm"> |
| 生成详细优化方案 |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| const chartDom = document.getElementById('mainMap'); |
| const myChart = echarts.init(chartDom); |
| |
| |
| const geoCoordMap = { |
| '烟台': [121.39, 37.52], |
| '渭南': [109.49, 34.50], |
| '洛川': [109.42, 35.76], |
| '北京': [116.40, 39.90], |
| '上海': [121.47, 31.23], |
| '广州': [113.26, 23.12], |
| '成都': [104.06, 30.67], |
| '郑州': [113.62, 34.75], |
| '武汉': [114.30, 30.60], |
| '南京': [118.78, 32.04], |
| '杭州': [120.15, 30.28], |
| '西安': [108.93, 34.27], |
| '长沙': [112.93, 28.23], |
| '南宁': [108.32, 22.82], |
| '海口': [110.20, 20.05], |
| '拉萨': [91.11, 29.97] |
| }; |
| |
| const heatData = [ |
| {name: '北京', value: 95}, |
| {name: '上海', value: 90}, |
| {name: '广州', value: 88}, |
| {name: '成都', value: 75}, |
| {name: '郑州', value: 70}, |
| {name: '武汉', value: 68}, |
| {name: '南京', value: 65}, |
| {name: '杭州', value: 63}, |
| {name: '西安', value: 60}, |
| {name: '长沙', value: 58}, |
| {name: '南宁', value: 45}, |
| {name: '海口', value: 40}, |
| {name: '拉萨', value: 30} |
| ]; |
| |
| const convertData = function (data) { |
| const res = []; |
| for (let i = 0; i < data.length; i++) { |
| const geoCoord = geoCoordMap[data[i].name]; |
| if (geoCoord) { |
| res.push({ |
| name: data[i].name, |
| value: geoCoord.concat(data[i].value) |
| }); |
| } |
| } |
| return res; |
| }; |
| |
| const series = [{ |
| name: '销售热度', |
| type: 'scatter', |
| coordinateSystem: 'geo', |
| data: convertData(heatData), |
| symbolSize: function (val) { |
| return val[2] / 5; |
| }, |
| label: { |
| formatter: '{b}', |
| position: 'right', |
| show: false |
| }, |
| itemStyle: { |
| color: '#1e90ff' |
| }, |
| emphasis: { |
| label: { |
| show: true |
| } |
| } |
| }, { |
| name: '热力图', |
| type: 'heatmap', |
| coordinateSystem: 'geo', |
| data: convertData(heatData), |
| pointSize: 10, |
| blurSize: 15 |
| }]; |
| |
| |
| const flowData = [ |
| {from: '烟台', to: '北京', value: 5, priceDiff: 0.3}, |
| {from: '烟台', to: '上海', value: 4, priceDiff: 0.8}, |
| {from: '烟台', to: '广州', value: 6, priceDiff: 1.2}, |
| {from: '渭南', to: '北京', value: 3, priceDiff: 0.4}, |
| {from: '渭南', to: '成都', value: 4, priceDiff: 0.6}, |
| {from: '渭南', to: '郑州', value: 2, priceDiff: 0.2}, |
| {from: '洛川', to: '上海', value: 3, priceDiff: 0.7}, |
| {from: '洛川', to: '广州', value: 2, priceDiff: 1.1}, |
| {from: '洛川', to: '武汉', value: 2, priceDiff: 0.5}, |
| {from: '北京', to: '南京', value: 2, priceDiff: 0.4}, |
| {from: '北京', to: '杭州', value: 2, priceDiff: 0.5}, |
| {from: '广州', to: '南宁', value: 1, priceDiff: 0.8}, |
| {from: '广州', to: '海口', value: 1, priceDiff: 1.3}, |
| {from: '郑州', to: '长沙', value: 1, priceDiff: 0.6}, |
| {from: '郑州', to: '西安', value: 1, priceDiff: 0.3} |
| ]; |
| |
| flowData.forEach(item => { |
| series.push({ |
| name: `${item.from} → ${item.to}`, |
| type: 'lines', |
| zlevel: 1, |
| effect: { |
| show: true, |
| period: 6, |
| trailLength: 0.7, |
| color: '#fff', |
| symbolSize: 3 |
| }, |
| lineStyle: { |
| normal: { |
| width: item.value, |
| curveness: 0.2, |
| color: getLineColor(item.priceDiff) |
| } |
| }, |
| data: [{ |
| coords: [geoCoordMap[item.from], geoCoordMap[item.to]], |
| value: item.value |
| }] |
| }); |
| }); |
| |
| function getLineColor(priceDiff) { |
| if (priceDiff < 0.5) return '#10B981'; |
| if (priceDiff < 1) return '#F59E0B'; |
| return '#EF4444'; |
| } |
| |
| |
| const option = { |
| tooltip: { |
| trigger: 'item', |
| formatter: params => { |
| if (params.seriesType === 'scatter') { |
| return `${params.name}<br/>销售热度: ${params.value[2]}`; |
| } else if (params.seriesType === 'lines') { |
| const data = params.data; |
| return `${params.seriesName}<br/>流量: ${data.value}万吨<br/>价格差: ${flowData.find(f => f.from === params.seriesName.split(' → ')[0] && f.to === params.seriesName.split(' → ')[1]).priceDiff}元/kg`; |
| } |
| } |
| }, |
| geo: { |
| map: 'china', |
| roam: true, |
| label: { |
| emphasis: { |
| show: true |
| } |
| }, |
| itemStyle: { |
| normal: { |
| areaColor: '#f5f7fa', |
| borderColor: '#d1d5db' |
| }, |
| emphasis: { |
| areaColor: '#e5e7eb' |
| } |
| } |
| }, |
| series: series |
| }; |
| |
| myChart.setOption(option); |
| |
| |
| window.addEventListener('resize', function() { |
| myChart.resize(); |
| }); |
| |
| |
| document.querySelectorAll('.p-3.rounded-lg').forEach(item => { |
| item.addEventListener('click', function() { |
| |
| document.querySelectorAll('.p-3.rounded-lg').forEach(el => { |
| el.classList.remove('bg-blue-50', 'border-blue-200'); |
| el.classList.add('border-gray-200'); |
| }); |
| |
| |
| this.classList.remove('border-gray-200'); |
| this.classList.add('bg-blue-50', 'border-blue-200'); |
| |
| |
| const region = this.querySelector('.font-medium').textContent.replace('产区', ''); |
| highlightRegion(region); |
| }); |
| }); |
| |
| function highlightRegion(region) { |
| |
| console.log(`高亮显示 ${region} 的流向`); |
| |
| |
| |
| } |
| </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/pingguo1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
