| <!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="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8"> |
| <div class="card"> |
| <div class="card-title"> |
| <i class="fas fa-chart-pie"></i> |
| 整体市场份额分布 |
| </div> |
| <div class="h-80"> |
| <canvas id="overallShareChart"></canvas> |
| </div> |
| </div> |
| |
| <div class="card"> |
| <div class="card-title"> |
| <i class="fas fa-exchange-alt"></i> |
| 市场份额变化趋势 |
| </div> |
| <div class="h-80"> |
| <canvas id="shareTrendChart"></canvas> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="card mb-8"> |
| <div class="card-title"> |
| <i class="fas fa-trophy"></i> |
| 品牌市场份额排行 TOP 15 |
| </div> |
| <div class="overflow-x-auto"> |
| <table class="data-table"> |
| <thead> |
| <tr> |
| <th>排名</th> |
| <th>品牌</th> |
| <th>市场份额</th> |
| <th>同比变化</th> |
| <th>销量（万辆）</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td><span class="badge badge-success">1</span></td> |
| <td>比亚迪</td> |
| <td>12.3%</td> |
| <td class="positive">↑ 3.2%</td> |
| <td>302.4</td> |
| </tr> |
| <tr> |
| <td><span class="badge badge-info">2</span></td> |
| <td>一汽大众</td> |
| <td>7.6%</td> |
| <td class="negative">↓ 0.8%</td> |
| <td>185.6</td> |
| </tr> |
| <tr> |
| <td><span class="badge badge-info">3</span></td> |
| <td>吉利汽车</td> |
| <td>6.8%</td> |
| <td class="positive">↑ 0.5%</td> |
| <td>168.3</td> |
| </tr> |
| <tr> |
| <td><span class="badge badge-info">4</span></td> |
| <td>长安汽车</td> |
| <td>6.3%</td> |
| <td class="positive">↑ 0.7%</td> |
| <td>155.8</td> |
| </tr> |
| <tr> |
| <td><span class="badge badge-warning">5</span></td> |
| <td>上汽大众</td> |
| <td>5.8%</td> |
| <td class="negative">↓ 0.5%</td> |
| <td>142.5</td> |
| </tr> |
| <tr> |
| <td><span class="badge">6</span></td> |
| <td>广汽丰田</td> |
| <td>4.9%</td> |
| <td class="negative">↓ 0.3%</td> |
| <td>120.3</td> |
| </tr> |
| <tr> |
| <td><span class="badge">7</span></td> |
| <td>东风日产</td> |
| <td>4.5%</td> |
| <td class="negative">↓ 0.6%</td> |
| <td>110.5</td> |
| </tr> |
| <tr> |
| <td><span class="badge">8</span></td> |
| <td>特斯拉中国</td> |
| <td>3.8%</td> |
| <td class="positive">↑ 1.2%</td> |
| <td>93.2</td> |
| </tr> |
| <tr> |
| <td><span class="badge">9</span></td> |
| <td>奇瑞汽车</td> |
| <td>3.5%</td> |
| <td class="positive">↑ 0.4%</td> |
| <td>85.8</td> |
| </tr> |
| <tr> |
| <td><span class="badge">10</span></td> |
| <td>长城汽车</td> |
| <td>3.2%</td> |
| <td class="negative">↓ 0.2%</td> |
| <td>78.5</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| |
| |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
| <div class="card"> |
| <div class="card-title"> |
| <i class="fas fa-car-side"></i> |
| 轿车市场 |
| </div> |
| <div class="h-64"> |
| <canvas id="sedanMarketChart"></canvas> |
| </div> |
| </div> |
| |
| <div class="card"> |
| <div class="card-title"> |
| <i class="fas fa-truck-pickup"></i> |
| SUV市场 |
| </div> |
| <div class="h-64"> |
| <canvas id="suvMarketChart"></canvas> |
| </div> |
| </div> |
| |
| <div class="card"> |
| <div class="card-title"> |
| <i class="fas fa-bolt"></i> |
| 新能源市场 |
| </div> |
| <div class="h-64"> |
| <canvas id="evMarketChart"></canvas> |
| </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 overallShareCtx = document.getElementById('overallShareChart').getContext('2d'); |
| new Chart(overallShareCtx, { |
| type: 'doughnut', |
| data: { |
| labels: ['比亚迪', '一汽大众', '吉利汽车', '长安汽车', '上汽大众', '其他'], |
| datasets: [{ |
| data: [12.3, 7.6, 6.8, 6.3, 5.8, 61.2], |
| backgroundColor: ['#405DF9', '#6C63F0', '#7342CC', '#B750BE', '#ED589D', '#e5e7eb'], |
| borderWidth: 0 |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| plugins: { |
| legend: { |
| position: 'right', |
| labels: { padding: 15 } |
| } |
| }, |
| cutout: '60%' |
| } |
| }); |
| |
| |
| const shareTrendCtx = document.getElementById('shareTrendChart').getContext('2d'); |
| new Chart(shareTrendCtx, { |
| type: 'line', |
| data: { |
| labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], |
| datasets: [{ |
| label: '比亚迪', |
| data: [10.5, 10.8, 11.2, 11.5, 11.8, 12.0, 12.1, 12.2, 12.3, 12.3, 12.3, 12.3], |
| borderColor: '#405DF9', |
| tension: 0.4, |
| borderWidth: 2 |
| }, { |
| label: '一汽大众', |
| data: [8.5, 8.3, 8.1, 7.9, 7.8, 7.7, 7.6, 7.6, 7.6, 7.6, 7.6, 7.6], |
| borderColor: '#6C63F0', |
| tension: 0.4, |
| borderWidth: 2 |
| }, { |
| label: '吉利汽车', |
| data: [6.2, 6.3, 6.4, 6.5, 6.6, 6.7, 6.7, 6.8, 6.8, 6.8, 6.8, 6.8], |
| borderColor: '#7342CC', |
| tension: 0.4, |
| borderWidth: 2 |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| plugins: { |
| legend: { |
| position: 'bottom', |
| labels: { padding: 10 } |
| } |
| }, |
| scales: { |
| y: { |
| beginAtZero: false, |
| grid: { color: 'rgba(0,0,0,0.05)' }, |
| ticks: { |
| callback: function(value) { return value + '%'; } |
| } |
| }, |
| x: { |
| grid: { display: false } |
| } |
| } |
| } |
| }); |
| |
| |
| const sedanCtx = document.getElementById('sedanMarketChart').getContext('2d'); |
| new Chart(sedanCtx, { |
| type: 'pie', |
| data: { |
| labels: ['合资', '自主', '进口'], |
| datasets: [{ |
| data: [55, 38, 7], |
| backgroundColor: ['#405DF9', '#6C63F0', '#B750BE'] |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| plugins: { legend: { position: 'bottom' } } |
| } |
| }); |
| |
| |
| const suvCtx = document.getElementById('suvMarketChart').getContext('2d'); |
| new Chart(suvCtx, { |
| type: 'pie', |
| data: { |
| labels: ['合资', '自主', '进口'], |
| datasets: [{ |
| data: [42, 50, 8], |
| backgroundColor: ['#405DF9', '#6C63F0', '#B750BE'] |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| plugins: { legend: { position: 'bottom' } } |
| } |
| }); |
| |
| |
| const evCtx = document.getElementById('evMarketChart').getContext('2d'); |
| new Chart(evCtx, { |
| type: 'pie', |
| data: { |
| labels: ['纯电', '插混', '增程'], |
| datasets: [{ |
| data: [65, 25, 10], |
| backgroundColor: ['#405DF9', '#6C63F0', '#FFC159'] |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| plugins: { legend: { position: 'bottom' } } |
| } |
| }); |
| </script> |
| </body> |
| </html> |
