|
|
```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___ |
