| <!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> |
