| ```html |
| <!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-crosshairs"></i> |
| 主要品牌竞争力对比 |
| </div> |
| <div class="h-96"> |
| <canvas id="brandRadarChart"></canvas> |
| </div> |
| </div> |
| |
| <div class="card"> |
| <div class="card-title"> |
| <i class="fas fa-chart-bar"></i> |
| 品牌综合得分 |
| </div> |
| <div class="h-96"> |
| <canvas id="brandScoreChart"></canvas> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="card mb-8"> |
| <div class="card-title"> |
| <i class="fas fa-balance-scale"></i> |
| 品牌详细对比 |
| </div> |
| <div class="overflow-x-auto"> |
| <table class="data-table"> |
| <thead> |
| <tr> |
| <th>品牌</th> |
| <th>产品力</th> |
| <th>品牌力</th> |
| <th>服务力</th> |
| <th>创新力</th> |
| <th>性价比</th> |
| <th>综合得分</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td><strong>比亚迪</strong></td> |
| <td>92</td> |
| <td>85</td> |
| <td>78</td> |
| <td>95</td> |
| <td>90</td> |
| <td><span class="badge badge-success">88.0</span></td> |
| </tr> |
| <tr> |
| <td><strong>一汽大众</strong></td> |
| <td>88</td> |
| <td>90</td> |
| <td>85</td> |
| <td>72</td> |
| <td>75</td> |
| <td><span class="badge badge-info">82.0</span></td> |
| </tr> |
| <tr> |
| <td><strong>吉利汽车</strong></td> |
| <td>85</td> |
| <td>80</td> |
| <td>82</td> |
| <td>80</td> |
| <td>88</td> |
| <td><span class="badge badge-info">83.0</span></td> |
| </tr> |
| <tr> |
| <td><strong>特斯拉中国</strong></td> |
| <td>90</td> |
| <td>88</td> |
| <td>70</td> |
| <td>98</td> |
| <td>72</td> |
| <td><span class="badge badge-info">83.6</span></td> |
| </tr> |
| <tr> |
| <td><strong>广汽丰田</strong></td> |
| <td>86</td> |
| <td>88</td> |
| <td>90</td> |
| <td>65</td> |
| <td>80</td> |
| <td><span class="badge">81.8</span></td> |
| </tr> |
| <tr> |
| <td><strong>蔚来汽车</strong></td> |
| <td>88</td> |
| <td>82</td> |
| <td>92</td> |
| <td>90</td> |
| <td>70</td> |
| <td><span class="badge">84.4</span></td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
| <div class="card"> |
| <div class="flex items-center gap-3 mb-4"> |
| <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white"> |
| <i class="fas fa-lightbulb"></i> |
| </div> |
| <h3 class="font-semibold text-lg">创新优势品牌</h3> |
| </div> |
| <div class="space-y-3"> |
| <div class="flex justify-between items-center"> |
| <span>特斯拉</span> |
| <span class="badge badge-success">98分</span> |
| </div> |
| <div class="flex justify-between items-center"> |
| <span>比亚迪</span> |
| <span class="badge badge-success">95分</span> |
| </div> |
| <div class="flex justify-between items-center"> |
| <span>蔚来</span> |
| <span class="badge badge-info">90分</span> |
| </div> |
| </div> |
| </div> |
| |
| <div class="card"> |
| <div class="flex items-center gap-3 mb-4"> |
| <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-purple-500 to-purple-600 flex items-center justify-center text-white"> |
| <i class="fas fa-star"></i> |
| </div> |
| <h3 class="font-semibold text-lg">品牌力领先品牌</h3> |
| </div> |
| <div class="space-y-3"> |
| <div class="flex justify-between items-center"> |
| <span>一汽大众</span> |
| <span class="badge badge-success">90分</span> |
| </div> |
| <div class="flex justify-between items-center"> |
| <span>广汽丰田</span> |
| <span class="badge badge-success">88分</span> |
| </div> |
| <div class="flex justify-between items-center"> |
| <span>特斯拉</span> |
| <span class="badge badge-info">88分</span> |
| </div> |
| </div> |
| </div> |
| |
| <div class="card"> |
| <div class="flex items-center gap-3 mb-4"> |
| <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-green-500 to-green-600 flex items-center justify-center text-white"> |
| <i class="fas fa-tags"></i> |
| </div> |
| <h3 class="font-semibold text-lg">性价比优势品牌</h3> |
| </div> |
| <div class="space-y-3"> |
| <div class="flex justify-between items-center"> |
| <span>比亚迪</span> |
| <span class="badge badge-success">90分</span> |
| </div> |
| <div class="flex justify-between items-center"> |
| <span>吉利</span> |
| <span class="badge badge-success">88分</span> |
| </div> |
| <div class="flex justify-between items-center"> |
| <span>长安</span> |
| <span class="badge badge-info">86分</span> |
| </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 radarCtx = document.getElementById('brandRadarChart').getContext('2d'); |
| new Chart(radarCtx, { |
| type: 'radar', |
| data: { |
| labels: ['产品力', '品牌力', '服务力', '创新力', '性价比'], |
| datasets: [{ |
| label: '比亚迪', |
| data: [92, 85, 78, 95, 90], |
| borderColor: '#405DF9', |
| backgroundColor: 'rgba(64, 93, 249, 0.2)', |
| borderWidth: 2 |
| }, { |
| label: '一汽大众', |
| data: [88, 90, 85, 72, 75], |
| borderColor: '#6C63F0', |
| backgroundColor: 'rgba(108, 99, 240, 0.2)', |
| borderWidth: 2 |
| }, { |
| label: '特斯拉', |
| data: [90, 88, 70, 98, 72], |
| borderColor: '#ED589D', |
| backgroundColor: 'rgba(237, 88, 157, 0.2)', |
| borderWidth: 2 |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| plugins: { |
| legend: { |
| position: 'bottom', |
| labels: { padding: 15 } |
| } |
| }, |
| scales: { |
| r: { |
| beginAtZero: true, |
| max: 100, |
| ticks: { stepSize: 20 } |
| } |
| } |
| } |
| }); |
| |
| |
| const scoreCtx = document.getElementById('brandScoreChart').getContext('2d'); |
| new Chart(scoreCtx, { |
| type: 'bar', |
| data: { |
| labels: ['比亚迪', '一汽大众', '吉利', '特斯拉', '广汽丰田', '蔚来'], |
| datasets: [{ |
| label: '综合得分', |
| data: [88.0, 82.0, 83.0, 83.6, 81.8, 84.4], |
| backgroundColor: ['#405DF9', '#6C63F0', '#7342CC', '#B750BE', '#ED589D', '#FFC159'], |
| borderRadius: 8 |
| }] |
| }, |
| options: { |
| indexAxis: 'y', |
| responsive: true, |
| maintainAspectRatio: false, |
| plugins: { |
| legend: { display: false } |
| }, |
| scales: { |
| |
| ___METADATA_START___ |
| {"repoId":"Peter0225/deepsite","isNew":false,"userName":"Peter0225"} |
| ___METADATA_END___ |
