|
|
<!DOCTYPE html> |
|
|
<html lang="zh-CN"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>销售数据分析 - 汽车数据分析看板</title> |
|
|
<link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🚗</text></svg>"> |
|
|
<link rel="stylesheet" href="style.css"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
|
</head> |
|
|
<body> |
|
|
<custom-navbar></custom-navbar> |
|
|
|
|
|
<main class="main-content"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> |
|
|
|
|
|
<section class="mb-8"> |
|
|
<h1 class="text-3xl font-bold mb-2">销售数据分析</h1> |
|
|
<p class="text-gray-600">全面分析汽车市场的销售数据，掌握市场动态</p> |
|
|
</section> |
|
|
|
|
|
|
|
|
<div class="flex flex-wrap gap-4 mb-8"> |
|
|
<button class="btn btn-primary">年度</button> |
|
|
<button class="btn btn-secondary">季度</button> |
|
|
<button class="btn btn-secondary">月度</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<section class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> |
|
|
<div class="stat-card"> |
|
|
<div class="stat-label">本月销量</div> |
|
|
<div class="stat-value">275万辆</div> |
|
|
<div class="stat-change positive">↑ 15.2%</div> |
|
|
</div> |
|
|
<div class="stat-card"> |
|
|
<div class="stat-label">环比增长</div> |
|
|
<div class="stat-value">8.7%</div> |
|
|
<div class="stat-change positive">↑ 2.1%</div> |
|
|
</div> |
|
|
<div class="stat-card"> |
|
|
<div class="stat-label">同比增长</div> |
|
|
<div class="stat-value">12.3%</div> |
|
|
<div class="stat-change positive">↑ 3.5%</div> |
|
|
</div> |
|
|
<div class="stat-card"> |
|
|
<div class="stat-label">销售总额</div> |
|
|
<div class="stat-value">¥8,650亿</div> |
|
|
<div class="stat-change positive">↑ 9.8%</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<div class="card mb-8"> |
|
|
<div class="card-title"> |
|
|
<i class="fas fa-chart-line"></i> |
|
|
年度销售趋势 |
|
|
</div> |
|
|
<div class="h-96"> |
|
|
<canvas id="annualSalesChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8"> |
|
|
<div class="card"> |
|
|
<div class="card-title"> |
|
|
<i class="fas fa-car"></i> |
|
|
车型销量对比 |
|
|
</div> |
|
|
<div class="h-80"> |
|
|
<canvas id="vehicleTypeChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="card"> |
|
|
<div class="card-title"> |
|
|
<i class="fas fa-building"></i> |
|
|
销量排行榜 TOP 10 |
|
|
</div> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="data-table"> |
|
|
<thead> |
|
|
<tr> |
|
|
<th>排名</th> |
|
|
<th>品牌</th> |
|
|
<th>销量（万辆）</th> |
|
|
<th>增长</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody> |
|
|
<tr> |
|
|
<td>1</td> |
|
|
<td>比亚迪</td> |
|
|
<td>302.4</td> |
|
|
<td class="positive">↑ 52.3%</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td>2</td> |
|
|
<td>一汽大众</td> |
|
|
<td>185.6</td> |
|
|
<td class="negative">↓ 3.2%</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td>3</td> |
|
|
<td>吉利汽车</td> |
|
|
<td>168.3</td> |
|
|
<td class="positive">↑ 8.7%</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td>4</td> |
|
|
<td>长安汽车</td> |
|
|
<td>155.8</td> |
|
|
<td class="positive">↑ 12.5%</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td>5</td> |
|
|
<td>上汽大众</td> |
|
|
<td>142.5</td> |
|
|
<td class="negative">↓ 5.8%</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card"> |
|
|
<div class="card-title"> |
|
|
<i class="fas fa-map-marker-alt"></i> |
|
|
区域销售分布 |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
|
<div class="h-64"> |
|
|
<canvas id="regionChart"></canvas> |
|
|
</div> |
|
|
<div class="md:col-span-2"> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span>华东地区</span> |
|
|
<span class="font-semibold">35%</span> |
|
|
</div> |
|
|
<div class="progress-bar"> |
|
|
<div class="progress-fill" style="width: 35%; background: #405DF9;"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span>华南地区</span> |
|
|
<span class="font-semibold">25%</span> |
|
|
</div> |
|
|
<div class="progress-bar"> |
|
|
<div class="progress-fill" style="width: 25%; background: #6C63F0;"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span>华北地区</span> |
|
|
<span class="font-semibold">20%</span> |
|
|
</div> |
|
|
<div class="progress-bar"> |
|
|
<div class="progress-fill" style="width: 20%; background: #7342CC;"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span>西南地区</span> |
|
|
<span class="font-semibold">12%</span> |
|
|
</div> |
|
|
<div class="progress-bar"> |
|
|
<div class="progress-fill" style="width: 12%; background: #B750BE;"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span>其他地区</span> |
|
|
<span class="font-semibold">8%</span> |
|
|
</div> |
|
|
<div class="progress-bar"> |
|
|
<div class="progress-fill" style="width: 8%; background: #ED589K;"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
<custom-footer></custom-footer> |
|
|
|
|
|
<script src="components/navbar.js"></script> |
|
|
<script src="components/footer.js"></script> |
|
|
<script src="script.js"></script> |
|
|
|
|
|
<script> |
|
|
|
|
|
const annualSalesCtx = document.getElementById('annualSalesChart').getContext('2d'); |
|
|
new Chart(annualSalesCtx, { |
|
|
type: 'line', |
|
|
data: { |
|
|
labels: ['2019', '2020', '2021', '2022', '2023', '2024'], |
|
|
datasets: [{ |
|
|
label: '销量（万辆）', |
|
|
data: [2100, 1950, 2200, 2180, 2458, 2750], |
|
|
borderColor: '#405DF9', |
|
|
backgroundColor: 'rgba(64, 93, 249, 0.1)', |
|
|
fill: true, |
|
|
tension: 0.4, |
|
|
borderWidth: 3 |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
plugins: { |
|
|
legend: { display: false } |
|
|
}, |
|
|
scales: { |
|
|
y: { |
|
|
beginAtZero: false, |
|
|
grid: { color: 'rgba(0,0,0,0.05)' } |
|
|
}, |
|
|
x: { |
|
|
grid: { display: false } |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const vehicleTypeCtx = document.getElementById('vehicleTypeChart').getContext('2d'); |
|
|
new Chart(vehicleTypeCtx, { |
|
|
type: 'bar', |
|
|
data: { |
|
|
labels: ['轿车', 'SUV', 'MPV', '皮卡', '新能源'], |
|
|
datasets: [{ |
|
|
label: '销量（万辆）', |
|
|
data: [820, 980, 180, 120, 358], |
|
|
backgroundColor: ['#405DF9', '#6C63F0', '#7342CC', '#B750BE', '#ED589D'], |
|
|
borderRadius: 8 |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
plugins: { |
|
|
legend: { display: false } |
|
|
}, |
|
|
scales: { |
|
|
y: { |
|
|
beginAtZero: true, |
|
|
grid: { color: 'rgba(0,0,0,0.05)' } |
|
|
}, |
|
|
x: { |
|
|
grid: { display: false } |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const regionCtx = document.getElementById('regionChart').getContext('2d'); |
|
|
new Chart(regionCtx, { |
|
|
type: 'polarArea', |
|
|
data: { |
|
|
labels: ['华东', '华南', '华北', '西南', '其他'], |
|
|
datasets: [{ |
|
|
data: [35, 25, 20, 12, 8], |
|
|
backgroundColor: [ |
|
|
'rgba(64, 93, 249, 0.8)', |
|
|
'rgba(108, 99, 240, 0.8)', |
|
|
'rgba(115, 66, 204, 0.8)', |
|
|
'rgba(183, 80, 190, 0.8)', |
|
|
'rgba(237, 88, 157, 0.8)' |
|
|
] |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
plugins: { |
|
|
legend: { display: false } |
|
|
} |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
