Add Font Awesome v4 compatibility WOFF2 file
This commit is contained in:
杨水淼
@@ -0,0 +1,907 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>公司详情分析 - AI产业链护城河深度分析</title>
|
||||
<script src="/libai/anime.min.js"></script>
|
||||
<script src="/js/echarts.min.js"></script>
|
||||
<script src="/libai/shader-park-core.esm.js" type="module"></script>
|
||||
<link href="/libai/googlecss2.css" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--primary-bg: #1a1d29;
|
||||
--secondary-bg: #2563eb;
|
||||
--accent-color: #0891b2;
|
||||
--text-primary: #ffffff;
|
||||
--text-secondary: #cbd5e1;
|
||||
--card-bg: rgba(30, 41, 59, 0.8);
|
||||
--border-color: rgba(148, 163, 184, 0.2);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Noto Sans SC', sans-serif;
|
||||
background: linear-gradient(135deg, var(--primary-bg) 0%, #0f172a 100%);
|
||||
color: var(--text-primary);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.hero-bg {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: url('./resources/neural-network-bg.png') center/cover;
|
||||
z-index: -2;
|
||||
}
|
||||
|
||||
.hero-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: linear-gradient(135deg, rgba(26, 29, 41, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.nav-blur {
|
||||
backdrop-filter: blur(10px);
|
||||
background: rgba(30, 41, 59, 0.8);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
backdrop-filter: blur(10px);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
||||
border-color: var(--secondary-bg);
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, var(--secondary-bg), var(--accent-color));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, var(--secondary-bg), var(--accent-color));
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 12px 24px;
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 20px rgba(37, 99, 235, 0.3);
|
||||
}
|
||||
|
||||
.company-header {
|
||||
background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(8, 145, 178, 0.1));
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 16px;
|
||||
padding: 32px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.company-logo-large {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background: linear-gradient(135deg, var(--secondary-bg), var(--accent-color));
|
||||
border-radius: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 48px;
|
||||
font-weight: bold;
|
||||
margin: 0 auto 24px;
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
text-align: center;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-size: 2.5rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
height: 400px;
|
||||
margin: 24px 0;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 60px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
.fade-in.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transition: all 0.6s ease;
|
||||
}
|
||||
|
||||
.swot-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 24px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.swot-item {
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid;
|
||||
}
|
||||
|
||||
.swot-strengths {
|
||||
background: rgba(5, 150, 105, 0.1);
|
||||
border-color: #059669;
|
||||
}
|
||||
|
||||
.swot-weaknesses {
|
||||
background: rgba(220, 38, 38, 0.1);
|
||||
border-color: #dc2626;
|
||||
}
|
||||
|
||||
.swot-opportunities {
|
||||
background: rgba(37, 99, 235, 0.1);
|
||||
border-color: #2563eb;
|
||||
}
|
||||
|
||||
.swot-threats {
|
||||
background: rgba(245, 158, 11, 0.1);
|
||||
border-color: #f59e0b;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.swot-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.company-logo-large {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Hero Background -->
|
||||
<div class="hero-bg"></div>
|
||||
<div class="hero-overlay"></div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="fixed top-0 w-full z-50 nav-blur">
|
||||
<div class="container">
|
||||
<div class="flex items-center justify-between h-16">
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="w-8 h-8 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-lg flex items-center justify-center">
|
||||
<span class="text-white font-bold text-sm">AI</span>
|
||||
</div>
|
||||
<span class="text-xl font-bold">产业链分析</span>
|
||||
</div>
|
||||
<div class="hidden md:flex items-center space-x-8">
|
||||
<a href="index.html" class="text-gray-300 hover:text-white transition-colors">首页</a>
|
||||
<a href="#overview" class="text-gray-300 hover:text-white transition-colors">概览</a>
|
||||
<a href="#analysis" class="text-gray-300 hover:text-white transition-colors">深度分析</a>
|
||||
<a href="#financial" class="text-gray-300 hover:text-white transition-colors">财务数据</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Company Header Section -->
|
||||
<section class="pt-24 pb-12">
|
||||
<div class="container">
|
||||
<div class="company-header fade-in">
|
||||
<div class="company-logo-large" id="companyLogo">寒</div>
|
||||
<div class="text-center">
|
||||
<h1 class="text-4xl md:text-5xl font-bold mb-4" id="companyName">寒武纪</h1>
|
||||
<p class="text-xl text-gray-300 mb-6" id="companySlogan">国产AI芯片的技术先锋</p>
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
<span class="px-4 py-2 bg-blue-500 bg-opacity-20 text-blue-400 rounded-full text-sm" id="companyCategory">上游 - AI芯片</span>
|
||||
<span class="px-4 py-2 bg-green-500 bg-opacity-20 text-green-400 rounded-full text-sm">护城河评分: <span id="moatScore">9.2</span>/10</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Key Metrics -->
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-12">
|
||||
<div class="card metric-card fade-in">
|
||||
<div class="metric-value text-blue-400" id="marketShare">15%</div>
|
||||
<div class="metric-label">市场份额</div>
|
||||
</div>
|
||||
<div class="card metric-card fade-in">
|
||||
<div class="metric-value text-green-400" id="patents">2700+</div>
|
||||
<div class="metric-label">专利数量</div>
|
||||
</div>
|
||||
<div class="card metric-card fade-in">
|
||||
<div class="metric-value text-purple-400" id="revenue">2.3亿</div>
|
||||
<div class="metric-label">营收规模</div>
|
||||
</div>
|
||||
<div class="card metric-card fade-in">
|
||||
<div class="metric-value text-cyan-400" id="growth">+65%</div>
|
||||
<div class="metric-label">同比增长</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Overview Section -->
|
||||
<section id="overview" class="section">
|
||||
<div class="container">
|
||||
<div class="grid lg:grid-cols-3 gap-8">
|
||||
<!-- Company Overview -->
|
||||
<div class="lg:col-span-2">
|
||||
<div class="card p-8 fade-in">
|
||||
<h2 class="text-2xl font-bold mb-6">公司概览</h2>
|
||||
<div class="prose prose-invert max-w-none">
|
||||
<p class="text-gray-300 leading-relaxed mb-4">
|
||||
寒武纪作为中国AI芯片领域的领军企业，其护城河主要建立在<strong>深厚的技术积累、前瞻性的市场布局以及日益完善的生态系统</strong>之上。公司专注于人工智能芯片产品的研发与技术创新，致力于打造人工智能领域的核心处理器芯片。
|
||||
</p>
|
||||
<p class="text-gray-300 leading-relaxed mb-4">
|
||||
在技术层面，寒武纪的核心竞争力源于其自主研发的<strong>Cambricon指令集</strong>和创新的<strong>存算一体架构</strong>。这一指令集是专为人工智能计算设计的，能够高效地处理复杂的神经网络算法，从而在AI推理任务中实现卓越的性能和能效比。
|
||||
</p>
|
||||
<p class="text-gray-300 leading-relaxed">
|
||||
在市场表现方面，寒武纪凭借其技术优势，迅速在国内云端AI芯片市场占据了一席之地。根据2025年上半年的数据显示，寒武纪的AI芯片营收实现了<strong>65%的同比增长</strong>，市场份额达到了约<strong>15%</strong>，在国内厂商中仅次于华为昇腾，稳居第二。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Stats -->
|
||||
<div class="space-y-6">
|
||||
<div class="card p-6 fade-in">
|
||||
<h3 class="text-lg font-semibold mb-4">关键数据</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-gray-400">成立时间</span>
|
||||
<span>2016年</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-gray-400">员工规模</span>
|
||||
<span>800+人</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-gray-400">研发投入</span>
|
||||
<span class="text-green-400">85%+</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-gray-400">上市时间</span>
|
||||
<span>2020年</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-6 fade-in">
|
||||
<h3 class="text-lg font-semibold mb-4">产品矩阵</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-3 h-3 bg-blue-500 rounded-full"></div>
|
||||
<span class="text-sm">终端智能处理器IP</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-3 h-3 bg-green-500 rounded-full"></div>
|
||||
<span class="text-sm">云端智能芯片</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-3 h-3 bg-purple-500 rounded-full"></div>
|
||||
<span class="text-sm">边缘智能芯片</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-3 h-3 bg-cyan-500 rounded-full"></div>
|
||||
<span class="text-sm">基础系统软件</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Analysis Section -->
|
||||
<section id="analysis" class="section">
|
||||
<div class="container">
|
||||
<h2 class="text-3xl font-bold text-center mb-12 fade-in">护城河深度分析</h2>
|
||||
|
||||
<div class="grid lg:grid-cols-2 gap-8 mb-12">
|
||||
<!-- Technology Barrier -->
|
||||
<div class="card p-8 fade-in">
|
||||
<h3 class="text-xl font-bold mb-6">技术壁垒分析</h3>
|
||||
<div id="techRadarChart" class="chart-container"></div>
|
||||
</div>
|
||||
|
||||
<!-- Market Performance -->
|
||||
<div class="card p-8 fade-in">
|
||||
<h3 class="text-xl font-bold mb-6">市场表现趋势</h3>
|
||||
<div id="performanceChart" class="chart-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SWOT Analysis -->
|
||||
<div class="card p-8 fade-in">
|
||||
<h3 class="text-2xl font-bold mb-6">SWOT分析</h3>
|
||||
<div class="swot-grid">
|
||||
<div class="swot-item swot-strengths">
|
||||
<h4 class="font-semibold mb-3 text-green-400">优势 (Strengths)</h4>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li>• 自主研发的Cambricon指令集</li>
|
||||
<li>• 存算一体架构创新</li>
|
||||
<li>• 强大的研发团队（硕博80%+）</li>
|
||||
<li>• 丰富的专利组合（2700+项）</li>
|
||||
<li>• 国产替代政策支持</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="swot-item swot-weaknesses">
|
||||
<h4 class="font-semibold mb-3 text-red-400">劣势 (Weaknesses)</h4>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li>• 规模相对较小</li>
|
||||
<li>• 生态系统建设初期</li>
|
||||
<li>• 客户集中度较高</li>
|
||||
<li>• 盈利能力待提升</li>
|
||||
<li>• 国际竞争力有限</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="swot-item swot-opportunities">
|
||||
<h4 class="font-semibold mb-3 text-blue-400">机会 (Opportunities)</h4>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li>• 国产替代加速推进</li>
|
||||
<li>• AI应用场景快速扩展</li>
|
||||
<li>• 政策支持力度加大</li>
|
||||
<li>• 边缘计算市场兴起</li>
|
||||
<li>• 车规级芯片需求增长</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="swot-item swot-threats">
|
||||
<h4 class="font-semibold mb-3 text-yellow-400">威胁 (Threats)</h4>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li>• 英伟达等巨头技术领先</li>
|
||||
<li>• 华为等国内厂商竞争</li>
|
||||
<li>• 技术迭代速度加快</li>
|
||||
<li>• 地缘政治风险</li>
|
||||
<li>• 供应链安全挑战</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Financial Section -->
|
||||
<section id="financial" class="section">
|
||||
<div class="container">
|
||||
<h2 class="text-3xl font-bold text-center mb-12 fade-in">财务数据分析</h2>
|
||||
|
||||
<div class="grid lg:grid-cols-2 gap-8">
|
||||
<!-- Revenue Chart -->
|
||||
<div class="card p-8 fade-in">
|
||||
<h3 class="text-xl font-bold mb-6">营收趋势</h3>
|
||||
<div id="revenueChart" class="chart-container"></div>
|
||||
</div>
|
||||
|
||||
<!-- Profit Analysis -->
|
||||
<div class="card p-8 fade-in">
|
||||
<h3 class="text-xl font-bold mb-6">盈利能力分析</h3>
|
||||
<div id="profitChart" class="chart-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Financial Metrics -->
|
||||
<div class="grid md:grid-cols-3 gap-6 mt-8">
|
||||
<div class="card p-6 fade-in">
|
||||
<h4 class="font-semibold mb-4 text-blue-400">盈利能力</h4>
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-400">毛利率</span>
|
||||
<span class="text-green-400">65.2%</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-400">净利率</span>
|
||||
<span class="text-red-400">-15.3%</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-400">ROE</span>
|
||||
<span class="text-yellow-400">-8.7%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-6 fade-in">
|
||||
<h4 class="font-semibold mb-4 text-purple-400">运营效率</h4>
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-400">总资产周转率</span>
|
||||
<span class="text-blue-400">0.32</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-400">存货周转天数</span>
|
||||
<span class="text-cyan-400">156天</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-400">应收账款周转</span>
|
||||
<span class="text-purple-400">89天</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-6 fade-in">
|
||||
<h4 class="font-semibold mb-4 text-cyan-400">成长能力</h4>
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-400">营收增长率</span>
|
||||
<span class="text-green-400">+65%</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-400">净利润增长</span>
|
||||
<span class="text-red-400">-23%</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-400">研发投入比</span>
|
||||
<span class="text-yellow-400">85%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Future Outlook -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="card p-8 fade-in">
|
||||
<h2 class="text-2xl font-bold mb-6">未来展望</h2>
|
||||
<div class="grid md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4 text-blue-400">发展战略</h3>
|
||||
<ul class="space-y-3 text-gray-300">
|
||||
<li class="flex items-start space-x-3">
|
||||
<span class="text-green-500 mt-1">•</span>
|
||||
<span>持续推进存算一体架构技术迭代</span>
|
||||
</li>
|
||||
<li class="flex items-start space-x-3">
|
||||
<span class="text-green-500 mt-1">•</span>
|
||||
<span>扩大边缘AI和车载AI市场布局</span>
|
||||
</li>
|
||||
<li class="flex items-start space-x-3">
|
||||
<span class="text-green-500 mt-1">•</span>
|
||||
<span>加强生态系统建设和开发者支持</span>
|
||||
</li>
|
||||
<li class="flex items-start space-x-3">
|
||||
<span class="text-green-500 mt-1">•</span>
|
||||
<span>探索新的商业模式和合作机会</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4 text-purple-400">投资建议</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="p-4 bg-blue-500 bg-opacity-10 border border-blue-500 border-opacity-30 rounded-lg">
|
||||
<div class="flex items-center space-x-2 mb-2">
|
||||
<span class="text-blue-400 font-semibold">长期投资</span>
|
||||
<span class="text-green-400 text-sm">推荐</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-300">
|
||||
技术壁垒深厚，受益于国产替代趋势，长期发展前景良好
|
||||
</p>
|
||||
</div>
|
||||
<div class="p-4 bg-yellow-500 bg-opacity-10 border border-yellow-500 border-opacity-30 rounded-lg">
|
||||
<div class="flex items-center space-x-2 mb-2">
|
||||
<span class="text-yellow-400 font-semibold">风险提示</span>
|
||||
<span class="text-red-400 text-sm">谨慎</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-300">
|
||||
短期内仍面临盈利压力，需关注技术迭代和市场竞争
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="py-12 border-t border-gray-800">
|
||||
<div class="container text-center">
|
||||
<div class="flex items-center justify-center space-x-2 mb-4">
|
||||
<div class="w-8 h-8 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-lg flex items-center justify-center">
|
||||
<span class="text-white font-bold text-sm">AI</span>
|
||||
</div>
|
||||
<span class="text-xl font-bold">产业链分析平台</span>
|
||||
</div>
|
||||
<p class="text-gray-400 text-sm">
|
||||
© 2025 AI产业链护城河深度分析. 专业数据驱动的商业洞察
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// 公司详情页JavaScript
|
||||
let techRadarChart, performanceChart, revenueChart, profitChart;
|
||||
|
||||
// 页面加载完成后初始化
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
initializeAnimations();
|
||||
initializeCharts();
|
||||
loadCompanyData();
|
||||
});
|
||||
|
||||
// 初始化动画
|
||||
function initializeAnimations() {
|
||||
anime({
|
||||
targets: '.fade-in',
|
||||
opacity: [0, 1],
|
||||
translateY: [30, 0],
|
||||
delay: anime.stagger(200),
|
||||
duration: 800,
|
||||
easing: 'easeOutQuart'
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化图表
|
||||
function initializeCharts() {
|
||||
// 技术壁垒雷达图
|
||||
const techRadarDom = document.getElementById('techRadarChart');
|
||||
techRadarChart = echarts.init(techRadarDom);
|
||||
|
||||
const techRadarOption = {
|
||||
backgroundColor: 'transparent',
|
||||
title: {
|
||||
text: '技术能力评估',
|
||||
textStyle: { color: '#ffffff', fontSize: 16 },
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(30, 41, 59, 0.9)',
|
||||
borderColor: 'rgba(148, 163, 184, 0.2)',
|
||||
textStyle: { color: '#ffffff' }
|
||||
},
|
||||
radar: {
|
||||
indicator: [
|
||||
{ name: '技术创新', max: 10 },
|
||||
{ name: '专利保护', max: 10 },
|
||||
{ name: '产品性能', max: 10 },
|
||||
{ name: '生态建设', max: 10 },
|
||||
{ name: '市场地位', max: 10 },
|
||||
{ name: '成本优势', max: 10 }
|
||||
],
|
||||
axisName: { color: '#94a3b8' },
|
||||
splitLine: { lineStyle: { color: 'rgba(71, 85, 105, 0.3)' } },
|
||||
splitArea: { show: false }
|
||||
},
|
||||
series: [{
|
||||
type: 'radar',
|
||||
data: [{
|
||||
value: [9.5, 9.2, 8.8, 7.5, 8.0, 7.2],
|
||||
name: '寒武纪',
|
||||
itemStyle: { color: '#2563eb' },
|
||||
areaStyle: { color: 'rgba(37, 99, 235, 0.2)' }
|
||||
}]
|
||||
}]
|
||||
};
|
||||
|
||||
techRadarChart.setOption(techRadarOption);
|
||||
|
||||
// 市场表现趋势图
|
||||
const performanceDom = document.getElementById('performanceChart');
|
||||
performanceChart = echarts.init(performanceDom);
|
||||
|
||||
const performanceOption = {
|
||||
backgroundColor: 'transparent',
|
||||
title: {
|
||||
text: '股价与市值趋势',
|
||||
textStyle: { color: '#ffffff', fontSize: 16 },
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(30, 41, 59, 0.9)',
|
||||
borderColor: 'rgba(148, 163, 184, 0.2)',
|
||||
textStyle: { color: '#ffffff' }
|
||||
},
|
||||
legend: {
|
||||
data: ['股价', '市值'],
|
||||
textStyle: { color: '#94a3b8' },
|
||||
bottom: 10
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['2020', '2021', '2022', '2023', '2024', '2025'],
|
||||
axisLine: { lineStyle: { color: '#475569' } },
|
||||
axisLabel: { color: '#94a3b8' }
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '股价(元)',
|
||||
axisLine: { lineStyle: { color: '#475569' } },
|
||||
axisLabel: { color: '#94a3b8' },
|
||||
splitLine: { lineStyle: { color: 'rgba(71, 85, 105, 0.3)' } }
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '市值(亿元)',
|
||||
axisLine: { lineStyle: { color: '#475569' } },
|
||||
axisLabel: { color: '#94a3b8' }
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '股价',
|
||||
type: 'line',
|
||||
data: [68, 95, 45, 78, 125, 98],
|
||||
lineStyle: { color: '#2563eb', width: 3 },
|
||||
itemStyle: { color: '#2563eb' }
|
||||
},
|
||||
{
|
||||
name: '市值',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: [270, 380, 180, 310, 500, 390],
|
||||
lineStyle: { color: '#059669', width: 3 },
|
||||
itemStyle: { color: '#059669' }
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
performanceChart.setOption(performanceOption);
|
||||
|
||||
// 营收趋势图
|
||||
const revenueDom = document.getElementById('revenueChart');
|
||||
revenueChart = echarts.init(revenueDom);
|
||||
|
||||
const revenueOption = {
|
||||
backgroundColor: 'transparent',
|
||||
title: {
|
||||
text: '营收增长趋势',
|
||||
textStyle: { color: '#ffffff', fontSize: 16 },
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(30, 41, 59, 0.9)',
|
||||
borderColor: 'rgba(148, 163, 184, 0.2)',
|
||||
textStyle: { color: '#ffffff' }
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['2018', '2019', '2020', '2021', '2022', '2023', '2024', '2025H1'],
|
||||
axisLine: { lineStyle: { color: '#475569' } },
|
||||
axisLabel: { color: '#94a3b8' }
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '营收(亿元)',
|
||||
axisLine: { lineStyle: { color: '#475569' } },
|
||||
axisLabel: { color: '#94a3b8' },
|
||||
splitLine: { lineStyle: { color: 'rgba(71, 85, 105, 0.3)' } }
|
||||
},
|
||||
series: [{
|
||||
type: 'bar',
|
||||
data: [1.0, 4.4, 4.6, 5.3, 7.2, 9.1, 11.8, 7.1],
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0, y: 0, x2: 0, y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: '#2563eb' },
|
||||
{ offset: 1, color: '#0891b2' }
|
||||
]
|
||||
},
|
||||
borderRadius: [4, 4, 0, 0]
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
||||
revenueChart.setOption(revenueOption);
|
||||
|
||||
// 盈利能力分析图
|
||||
const profitDom = document.getElementById('profitChart');
|
||||
profitChart = echarts.init(profitDom);
|
||||
|
||||
const profitOption = {
|
||||
backgroundColor: 'transparent',
|
||||
title: {
|
||||
text: '盈利能力指标',
|
||||
textStyle: { color: '#ffffff', fontSize: 16 },
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(30, 41, 59, 0.9)',
|
||||
borderColor: 'rgba(148, 163, 184, 0.2)',
|
||||
textStyle: { color: '#ffffff' }
|
||||
},
|
||||
legend: {
|
||||
data: ['毛利率', '净利率', 'ROE'],
|
||||
textStyle: { color: '#94a3b8' },
|
||||
bottom: 10
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['2018', '2019', '2020', '2021', '2022', '2023', '2024'],
|
||||
axisLine: { lineStyle: { color: '#475569' } },
|
||||
axisLabel: { color: '#94a3b8' }
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '百分比(%)',
|
||||
axisLine: { lineStyle: { color: '#475569' } },
|
||||
axisLabel: { color: '#94a3b8' },
|
||||
splitLine: { lineStyle: { color: 'rgba(71, 85, 105, 0.3)' } }
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '毛利率',
|
||||
type: 'line',
|
||||
data: [78.5, 82.3, 79.8, 75.2, 71.6, 68.9, 65.2],
|
||||
lineStyle: { color: '#2563eb', width: 3 },
|
||||
itemStyle: { color: '#2563eb' }
|
||||
},
|
||||
{
|
||||
name: '净利率',
|
||||
type: 'line',
|
||||
data: [-45.2, -38.7, -28.9, -22.1, -18.5, -16.8, -15.3],
|
||||
lineStyle: { color: '#dc2626', width: 3 },
|
||||
itemStyle: { color: '#dc2626' }
|
||||
},
|
||||
{
|
||||
name: 'ROE',
|
||||
type: 'line',
|
||||
data: [-12.8, -9.5, -6.2, -4.8, -6.1, -7.3, -8.7],
|
||||
lineStyle: { color: '#f59e0b', width: 3 },
|
||||
itemStyle: { color: '#f59e0b' }
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
profitChart.setOption(profitOption);
|
||||
|
||||
// 响应式处理
|
||||
window.addEventListener('resize', function() {
|
||||
techRadarChart.resize();
|
||||
performanceChart.resize();
|
||||
revenueChart.resize();
|
||||
profitChart.resize();
|
||||
});
|
||||
}
|
||||
|
||||
// 加载公司数据
|
||||
function loadCompanyData() {
|
||||
// 从URL参数获取公司ID
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const companyId = urlParams.get('company') || 'cambricon';
|
||||
|
||||
// 根据不同公司加载不同数据
|
||||
const companyData = {
|
||||
cambricon: {
|
||||
name: '寒武纪',
|
||||
logo: '寒',
|
||||
slogan: '国产AI芯片的技术先锋',
|
||||
category: '上游 - AI芯片',
|
||||
moatScore: 9.2,
|
||||
marketShare: '15%',
|
||||
patents: '2700+',
|
||||
revenue: '2.3亿',
|
||||
growth: '+65%'
|
||||
},
|
||||
huawei: {
|
||||
name: '华为昇腾',
|
||||
logo: '华',
|
||||
slogan: '自主可控的AI算力基石',
|
||||
category: '上游 - AI芯片',
|
||||
moatScore: 9.5,
|
||||
marketShare: '25%',
|
||||
patents: '5000+',
|
||||
revenue: '8.5亿',
|
||||
growth: '+45%'
|
||||
},
|
||||
nvidia: {
|
||||
name: '英伟达',
|
||||
logo: '英',
|
||||
slogan: '全球AI芯片的领导者',
|
||||
category: '上游 - AI芯片',
|
||||
moatScore: 9.9,
|
||||
marketShare: '90%',
|
||||
patents: '8000+',
|
||||
revenue: '60.9亿',
|
||||
growth: '+122%'
|
||||
}
|
||||
};
|
||||
|
||||
const data = companyData[companyId] || companyData.cambricon;
|
||||
|
||||
// 更新页面内容
|
||||
document.getElementById('companyName').textContent = data.name;
|
||||
document.getElementById('companyLogo').textContent = data.logo;
|
||||
document.getElementById('companySlogan').textContent = data.slogan;
|
||||
document.getElementById('companyCategory').textContent = data.category;
|
||||
document.getElementById('moatScore').textContent = data.moatScore;
|
||||
document.getElementById('marketShare').textContent = data.marketShare;
|
||||
document.getElementById('patents').textContent = data.patents;
|
||||
document.getElementById('revenue').textContent = data.revenue;
|
||||
document.getElementById('growth').textContent = data.growth;
|
||||
}
|
||||
|
||||
// 平滑滚动导航
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const targetId = this.getAttribute('href').substring(1);
|
||||
const target = document.getElementById(targetId);
|
||||
if (target) {
|
||||
target.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user