simonandClaude Code
7e57cae242
安全性: - 所有SQL查询改用参数化查询(db_query)，防止SQL注入 - TUSHARE_API_TOKEN集中到config.php常量，移除硬编码和多份拷贝 - getBasic.inc.php中$_REQUEST输出到JS时添加htmlspecialchars转义 代码组织: - 21个页面文件移至charts/子目录，根目录仅保留入口文件 - ajax.inc.php拆分：esfTradeDaily/esfListDaily迁至getEstate.inc.php - getBasic.inc.php拆分：HTML组件函数迁至新建的widgets.inc.php - 前端依赖去重：移除lib/echarts.min.js、libai/3.4.16.js、research/js/3.4.16.js 规范化: - AJAX响应格式统一为jsonResponse()标准封装 - 前端全局变量统一为window.chartConfig对象模式 - 修复PHP 8.4 Deprecated警告(getEstateData、getStockHistoryDataByTS参数顺序) - html/head.php中jQuery/CSS路径改为绝对路径，修复charts/子目录加载问题 Co-Authored-By: Claude Code <noreply@anthropic.com>
1051 lines
46 KiB
HTML
1051 lines
46 KiB
HTML
<!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="/js/tailwindcss_3.4.17.js"></script>
|
|
<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/tech-office.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);
|
|
}
|
|
|
|
.chain-level {
|
|
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;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.chain-level::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, var(--secondary-bg), var(--accent-color));
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.competitive-landscape {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 20px;
|
|
margin-top: 24px;
|
|
}
|
|
|
|
.competitor-card {
|
|
padding: 20px;
|
|
border-radius: 12px;
|
|
border: 1px solid var(--border-color);
|
|
background: var(--card-bg);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.competitor-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.trend-indicator {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 4px 12px;
|
|
border-radius: 20px;
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.trend-up {
|
|
background: rgba(5, 150, 105, 0.2);
|
|
color: #059669;
|
|
}
|
|
|
|
.trend-down {
|
|
background: rgba(220, 38, 38, 0.2);
|
|
color: #dc2626;
|
|
}
|
|
|
|
.trend-stable {
|
|
background: rgba(245, 158, 11, 0.2);
|
|
color: #f59e0b;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.competitive-landscape {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.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="#upstream" class="text-gray-300 hover:text-white transition-colors">上游分析</a>
|
|
<a href="#midstream" class="text-gray-300 hover:text-white transition-colors">中游分析</a>
|
|
<a href="#downstream" class="text-gray-300 hover:text-white transition-colors">下游分析</a>
|
|
<a href="#trends" class="text-gray-300 hover:text-white transition-colors">发展趋势</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="pt-24 pb-12">
|
|
<div class="container text-center">
|
|
<h1 class="text-4xl md:text-6xl font-bold mb-6 fade-in">
|
|
<span class="gradient-text">产业链</span><br>
|
|
<span class="text-white">全景分析</span>
|
|
</h1>
|
|
<p class="text-xl text-gray-300 mb-8 max-w-3xl mx-auto fade-in">
|
|
深度解析AI产业上中下游的技术壁垒、市场格局与发展趋势
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Upstream Analysis -->
|
|
<section id="upstream" class="section">
|
|
<div class="container">
|
|
<div class="chain-level fade-in">
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-3xl font-bold mb-4">上游：基础层分析</h2>
|
|
<p class="text-xl text-gray-300">AI芯片、算力、数据、算法 - 产业基石</p>
|
|
</div>
|
|
|
|
<div class="grid lg:grid-cols-2 gap-8 mb-12">
|
|
<!-- Market Structure -->
|
|
<div class="card p-8">
|
|
<h3 class="text-xl font-bold mb-6">市场结构分析</h3>
|
|
<div id="upstreamMarketChart" class="chart-container"></div>
|
|
</div>
|
|
|
|
<!-- Technology Barrier -->
|
|
<div class="card p-8">
|
|
<h3 class="text-xl font-bold mb-6">技术壁垒对比</h3>
|
|
<div id="techBarrierChart" class="chart-container"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Competitive Landscape -->
|
|
<div class="card p-8 fade-in">
|
|
<h3 class="text-2xl font-bold mb-6">竞争格局</h3>
|
|
<div class="competitive-landscape">
|
|
<div class="competitor-card">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h4 class="font-semibold text-lg">英伟达</h4>
|
|
<span class="trend-indicator trend-up">领导者</span>
|
|
</div>
|
|
<div class="space-y-2 text-sm text-gray-300">
|
|
<div class="flex justify-between">
|
|
<span>市场份额</span>
|
|
<span class="text-blue-400">90%+</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span>技术壁垒</span>
|
|
<span class="text-green-400">9.9/10</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span>生态成熟度</span>
|
|
<span class="text-purple-400">极高</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="competitor-card">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h4 class="font-semibold text-lg">华为昇腾</h4>
|
|
<span class="trend-indicator trend-up">挑战者</span>
|
|
</div>
|
|
<div class="space-y-2 text-sm text-gray-300">
|
|
<div class="flex justify-between">
|
|
<span>市场份额</span>
|
|
<span class="text-blue-400">25%</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span>技术壁垒</span>
|
|
<span class="text-green-400">9.5/10</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span>自主可控</span>
|
|
<span class="text-cyan-400">极高</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="competitor-card">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h4 class="font-semibold text-lg">寒武纪</h4>
|
|
<span class="trend-indicator trend-stable">专业者</span>
|
|
</div>
|
|
<div class="space-y-2 text-sm text-gray-300">
|
|
<div class="flex justify-between">
|
|
<span>市场份额</span>
|
|
<span class="text-blue-400">15%</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span>技术壁垒</span>
|
|
<span class="text-green-400">9.2/10</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span>创新能力</span>
|
|
<span class="text-purple-400">强</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="competitor-card">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h4 class="font-semibold text-lg">百度昆仑芯</h4>
|
|
<span class="trend-indicator trend-up">追赶者</span>
|
|
</div>
|
|
<div class="space-y-2 text-sm text-gray-300">
|
|
<div class="flex justify-between">
|
|
<span>生态绑定</span>
|
|
<span class="text-blue-400">百度生态</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span>场景优化</span>
|
|
<span class="text-green-400">8.5/10</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span>成本控制</span>
|
|
<span class="text-purple-400">良好</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Key Insights -->
|
|
<div class="card p-8 fade-in">
|
|
<h3 class="text-2xl font-bold mb-6">核心洞察</h3>
|
|
<div class="grid md:grid-cols-2 gap-8">
|
|
<div>
|
|
<h4 class="text-lg font-semibold mb-4 text-blue-400">技术特征</h4>
|
|
<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><strong>架构创新：</strong>存算一体、异构计算成为主流</span>
|
|
</li>
|
|
<li class="flex items-start space-x-3">
|
|
<span class="text-green-500 mt-1">•</span>
|
|
<span><strong>工艺演进：</strong>7nm以下先进工艺竞争加剧</span>
|
|
</li>
|
|
<li class="flex items-start space-x-3">
|
|
<span class="text-green-500 mt-1">•</span>
|
|
<span><strong>生态构建：</strong>软硬件协同优化重要性凸显</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-lg font-semibold mb-4 text-purple-400">市场趋势</h4>
|
|
<ul class="space-y-3 text-gray-300">
|
|
<li class="flex items-start space-x-3">
|
|
<span class="text-cyan-500 mt-1">•</span>
|
|
<span><strong>国产替代：</strong>政策驱动下的历史性机遇</span>
|
|
</li>
|
|
<li class="flex items-start space-x-3">
|
|
<span class="text-cyan-500 mt-1">•</span>
|
|
<span><strong>垂直优化：</strong>专用芯片需求快速增长</span>
|
|
</li>
|
|
<li class="flex items-start space-x-3">
|
|
<span class="text-cyan-500 mt-1">•</span>
|
|
<span><strong>成本压力：</strong>规模化生产和成本控制关键</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Midstream Analysis -->
|
|
<section id="midstream" class="section">
|
|
<div class="container">
|
|
<div class="chain-level fade-in">
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-3xl font-bold mb-4">中游：技术层分析</h2>
|
|
<p class="text-xl text-gray-300">AI开发框架、模型、平台 - 技术核心</p>
|
|
</div>
|
|
|
|
<div class="grid lg:grid-cols-2 gap-8 mb-12">
|
|
<!-- Framework Comparison -->
|
|
<div class="card p-8">
|
|
<h3 class="text-xl font-bold mb-6">框架生态对比</h3>
|
|
<div id="frameworkChart" class="chart-container"></div>
|
|
</div>
|
|
|
|
<!-- Platform Market -->
|
|
<div class="card p-8">
|
|
<h3 class="text-xl font-bold mb-6">平台市场份额</h3>
|
|
<div id="platformChart" class="chart-container"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Platform Analysis -->
|
|
<div class="card p-8 fade-in">
|
|
<h3 class="text-2xl font-bold mb-6">平台化竞争格局</h3>
|
|
<div class="space-y-8">
|
|
<div class="border-l-4 border-blue-500 pl-6">
|
|
<h4 class="text-lg font-semibold mb-2 text-blue-400">百度飞桨 - 本土化领导者</h4>
|
|
<p class="text-gray-300 mb-3">
|
|
作为中国首个开源产业级深度学习平台，飞桨已经构建了庞大的开发者生态。截至2025年9月，平台开发者数量达到2333万，服务企业超过76万家。
|
|
</p>
|
|
<div class="flex flex-wrap gap-4 text-sm">
|
|
<span class="px-3 py-1 bg-blue-500 bg-opacity-20 text-blue-400 rounded-full">2333万开发者</span>
|
|
<span class="px-3 py-1 bg-green-500 bg-opacity-20 text-green-400 rounded-full">76万企业</span>
|
|
<span class="px-3 py-1 bg-purple-500 bg-opacity-20 text-purple-400 rounded-full">110万模型</span>
|
|
<span class="px-3 py-1 bg-cyan-500 bg-opacity-20 text-cyan-400 rounded-full">40+芯片适配</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border-l-4 border-green-500 pl-6">
|
|
<h4 class="text-lg font-semibold mb-2 text-green-400">华为MindSpore - 自主可控先锋</h4>
|
|
<p class="text-gray-300 mb-3">
|
|
与昇腾AI处理器深度协同，提供全场景AI计算框架。在自主可控的大背景下，MindSpore在关键信息基础设施领域具有重要战略价值。
|
|
</p>
|
|
<div class="flex flex-wrap gap-4 text-sm">
|
|
<span class="px-3 py-1 bg-green-500 bg-opacity-20 text-green-400 rounded-full">自主可控</span>
|
|
<span class="px-3 py-1 bg-blue-500 bg-opacity-20 text-blue-400 rounded-full">全场景支持</span>
|
|
<span class="px-3 py-1 bg-purple-500 bg-opacity-20 text-purple-400 rounded-full">软硬协同</span>
|
|
<span class="px-3 py-1 bg-cyan-500 bg-opacity-20 text-cyan-400 rounded-full">企业级</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border-l-4 border-purple-500 pl-6">
|
|
<h4 class="text-lg font-semibold mb-2 text-purple-400">腾讯优图 - 应用驱动</h4>
|
|
<p class="text-gray-300 mb-3">
|
|
依托腾讯在社交、游戏等领域积累的海量数据和应用场景，优图实验室在计算机视觉、语音识别等技术领域保持领先。
|
|
</p>
|
|
<div class="flex flex-wrap gap-4 text-sm">
|
|
<span class="px-3 py-1 bg-purple-500 bg-opacity-20 text-purple-400 rounded-full">海量数据</span>
|
|
<span class="px-3 py-1 bg-blue-500 bg-opacity-20 text-blue-400 rounded-full">场景丰富</span>
|
|
<span class="px-3 py-1 bg-green-500 bg-opacity-20 text-green-400 rounded-full">技术领先</span>
|
|
<span class="px-3 py-1 bg-cyan-500 bg-opacity-20 text-cyan-400 rounded-full">云原生</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Downstream Analysis -->
|
|
<section id="downstream" class="section">
|
|
<div class="container">
|
|
<div class="chain-level fade-in">
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-3xl font-bold mb-4">下游：应用层分析</h2>
|
|
<p class="text-xl text-gray-300">行业解决方案、产品服务 - 价值实现</p>
|
|
</div>
|
|
|
|
<div class="grid lg:grid-cols-2 gap-8 mb-12">
|
|
<!-- Application Distribution -->
|
|
<div class="card p-8">
|
|
<h3 class="text-xl font-bold mb-6">应用场景分布</h3>
|
|
<div id="applicationChart" class="chart-container"></div>
|
|
</div>
|
|
|
|
<!-- Market Size -->
|
|
<div class="card p-8">
|
|
<h3 class="text-xl font-bold mb-6">市场规模预测</h3>
|
|
<div id="marketSizeChart" class="chart-container"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Industry Leaders -->
|
|
<div class="card p-8 fade-in">
|
|
<h3 class="text-2xl font-bold mb-6">行业领导者分析</h3>
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<div class="competitor-card">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h4 class="font-semibold text-lg">海康威视</h4>
|
|
<span class="trend-indicator trend-up">安防龙头</span>
|
|
</div>
|
|
<p class="text-gray-300 text-sm mb-3">
|
|
全球安防市场领导者，"物联感知+AI"深度融合，准确率稳定在99%以上
|
|
</p>
|
|
<div class="space-y-2 text-sm">
|
|
<div class="flex justify-between">
|
|
<span>全球份额</span>
|
|
<span class="text-blue-400">28%</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span>AI准确率</span>
|
|
<span class="text-green-400">99%+</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="competitor-card">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h4 class="font-semibold text-lg">科大讯飞</h4>
|
|
<span class="trend-indicator trend-up">AI+教育</span>
|
|
</div>
|
|
<p class="text-gray-300 text-sm mb-3">
|
|
垂直行业数据壁垒深厚，教育、医疗AI应用的先行者
|
|
</p>
|
|
<div class="space-y-2 text-sm">
|
|
<div class="flex justify-between">
|
|
<span>开发者生态</span>
|
|
<span class="text-blue-400">870万+</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span>应用场景</span>
|
|
<span class="text-green-400">教育/医疗</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="competitor-card">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h4 class="font-semibold text-lg">大华股份</h4>
|
|
<span class="trend-indicator trend-stable">智慧物联</span>
|
|
</div>
|
|
<p class="text-gray-300 text-sm mb-3">
|
|
安防AI领域重要参与者，向智慧物联领域转型
|
|
</p>
|
|
<div class="space-y-2 text-sm">
|
|
<div class="flex justify-between">
|
|
<span>国内份额</span>
|
|
<span class="text-blue-400">12%+</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span>转型方向</span>
|
|
<span class="text-green-400">AIoT</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Trends Analysis -->
|
|
<section id="trends" 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 Trends -->
|
|
<div class="card p-8 fade-in">
|
|
<h3 class="text-xl font-bold mb-6">技术发展趋势</h3>
|
|
<div class="space-y-6">
|
|
<div class="border-l-4 border-blue-500 pl-6">
|
|
<h4 class="font-semibold mb-2 text-blue-400">大模型与小模型并存</h4>
|
|
<p class="text-gray-300 text-sm">
|
|
超大规模模型追求通用能力，轻量级模型专注特定场景，形成互补发展格局
|
|
</p>
|
|
</div>
|
|
<div class="border-l-4 border-green-500 pl-6">
|
|
<h4 class="font-semibold mb-2 text-green-400">多模态融合</h4>
|
|
<p class="text-gray-300 text-sm">
|
|
文本、图像、语音、视频等多模态技术深度融合，提升AI系统的感知和理解能力
|
|
</p>
|
|
</div>
|
|
<div class="border-l-4 border-purple-500 pl-6">
|
|
<h4 class="font-semibold mb-2 text-purple-400">边缘AI兴起</h4>
|
|
<p class="text-gray-300 text-sm">
|
|
边缘计算与AI结合，实现低延迟、高隐私的本地化智能处理
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Market Trends -->
|
|
<div class="card p-8 fade-in">
|
|
<h3 class="text-xl font-bold mb-6">市场发展趋势</h3>
|
|
<div id="trendChart" class="chart-container"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Future Outlook -->
|
|
<div class="card p-8 fade-in">
|
|
<h3 class="text-2xl font-bold mb-6">未来展望</h3>
|
|
<div class="grid md:grid-cols-3 gap-8">
|
|
<div class="text-center">
|
|
<div class="w-16 h-16 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<span class="text-2xl">🚀</span>
|
|
</div>
|
|
<h4 class="font-semibold mb-3 text-blue-400">技术突破</h4>
|
|
<p class="text-gray-300 text-sm">
|
|
算法、算力、数据三重驱动，AI技术将迎来新的突破周期
|
|
</p>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="w-16 h-16 bg-gradient-to-r from-green-500 to-blue-500 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<span class="text-2xl">🌐</span>
|
|
</div>
|
|
<h4 class="font-semibold mb-3 text-green-400">生态繁荣</h4>
|
|
<p class="text-gray-300 text-sm">
|
|
开源社区、产业联盟、标准组织共同推动AI生态繁荣发展
|
|
</p>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="w-16 h-16 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<span class="text-2xl">💡</span>
|
|
</div>
|
|
<h4 class="font-semibold mb-3 text-purple-400">应用普及</h4>
|
|
<p class="text-gray-300 text-sm">
|
|
AI将深度融入各行各业，成为推动社会进步的重要力量
|
|
</p>
|
|
</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 upstreamMarketChart, techBarrierChart, frameworkChart, platformChart, applicationChart, marketSizeChart, trendChart;
|
|
|
|
// 页面加载完成后初始化
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
initializeAnimations();
|
|
initializeCharts();
|
|
});
|
|
|
|
// 初始化动画
|
|
function initializeAnimations() {
|
|
anime({
|
|
targets: '.fade-in',
|
|
opacity: [0, 1],
|
|
translateY: [30, 0],
|
|
delay: anime.stagger(200),
|
|
duration: 800,
|
|
easing: 'easeOutQuart'
|
|
});
|
|
}
|
|
|
|
// 初始化图表
|
|
function initializeCharts() {
|
|
// 上游市场结构图
|
|
const upstreamDom = document.getElementById('upstreamMarketChart');
|
|
upstreamMarketChart = echarts.init(upstreamDom);
|
|
|
|
const upstreamOption = {
|
|
backgroundColor: 'transparent',
|
|
title: {
|
|
text: 'AI芯片市场结构',
|
|
textStyle: { color: '#ffffff', fontSize: 16 },
|
|
left: 'center'
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
backgroundColor: 'rgba(30, 41, 59, 0.9)',
|
|
borderColor: 'rgba(148, 163, 184, 0.2)',
|
|
textStyle: { color: '#ffffff' }
|
|
},
|
|
legend: {
|
|
orient: 'horizontal',
|
|
bottom: '0%',
|
|
textStyle: { color: '#94a3b8' }
|
|
},
|
|
series: [{
|
|
type: 'pie',
|
|
radius: ['40%', '70%'],
|
|
center: ['50%', '45%'],
|
|
data: [
|
|
{ value: 45, name: '云端训练芯片', itemStyle: { color: '#2563eb' } },
|
|
{ value: 30, name: '云端推理芯片', itemStyle: { color: '#0891b2' } },
|
|
{ value: 15, name: '边缘AI芯片', itemStyle: { color: '#059669' } },
|
|
{ value: 10, name: '终端AI芯片', itemStyle: { color: '#7c3aed' } }
|
|
]
|
|
}]
|
|
};
|
|
|
|
upstreamMarketChart.setOption(upstreamOption);
|
|
|
|
// 技术壁垒对比图
|
|
const techDom = document.getElementById('techBarrierChart');
|
|
techBarrierChart = echarts.init(techDom);
|
|
|
|
const techOption = {
|
|
backgroundColor: 'transparent',
|
|
title: {
|
|
text: '技术壁垒评分',
|
|
textStyle: { color: '#ffffff', fontSize: 16 },
|
|
left: 'center'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { type: 'shadow' },
|
|
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: ['英伟达', '华为昇腾', '寒武纪', '百度昆仑芯'],
|
|
axisLine: { lineStyle: { color: '#475569' } },
|
|
axisLabel: { color: '#94a3b8', rotate: 45 }
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
max: 10,
|
|
axisLine: { lineStyle: { color: '#475569' } },
|
|
axisLabel: { color: '#94a3b8' },
|
|
splitLine: { lineStyle: { color: 'rgba(71, 85, 105, 0.3)' } }
|
|
},
|
|
series: [{
|
|
type: 'bar',
|
|
data: [9.9, 9.5, 9.2, 8.5],
|
|
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]
|
|
}
|
|
}]
|
|
};
|
|
|
|
techBarrierChart.setOption(techOption);
|
|
|
|
// 框架生态对比图
|
|
const frameworkDom = document.getElementById('frameworkChart');
|
|
frameworkChart = echarts.init(frameworkDom);
|
|
|
|
const frameworkOption = {
|
|
backgroundColor: 'transparent',
|
|
title: {
|
|
text: '开发者生态规模',
|
|
textStyle: { color: '#ffffff', fontSize: 16 },
|
|
left: 'center'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { type: 'shadow' },
|
|
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: ['TensorFlow', 'PyTorch', '百度飞桨', '华为MindSpore'],
|
|
axisLine: { lineStyle: { color: '#475569' } },
|
|
axisLabel: { color: '#94a3b8', rotate: 45 }
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name: '开发者数量(万)',
|
|
axisLine: { lineStyle: { color: '#475569' } },
|
|
axisLabel: { color: '#94a3b8' },
|
|
splitLine: { lineStyle: { color: 'rgba(71, 85, 105, 0.3)' } }
|
|
},
|
|
series: [{
|
|
type: 'bar',
|
|
data: [800, 650, 2333, 180],
|
|
itemStyle: {
|
|
color: {
|
|
type: 'linear',
|
|
x: 0, y: 0, x2: 0, y2: 1,
|
|
colorStops: [
|
|
{ offset: 0, color: '#059669' },
|
|
{ offset: 1, color: '#0891b2' }
|
|
]
|
|
},
|
|
borderRadius: [4, 4, 0, 0]
|
|
}
|
|
}]
|
|
};
|
|
|
|
frameworkChart.setOption(frameworkOption);
|
|
|
|
// 平台市场份额图
|
|
const platformDom = document.getElementById('platformChart');
|
|
platformChart = echarts.init(platformDom);
|
|
|
|
const platformOption = {
|
|
backgroundColor: 'transparent',
|
|
title: {
|
|
text: 'AI平台市场份额',
|
|
textStyle: { color: '#ffffff', fontSize: 16 },
|
|
left: 'center'
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
backgroundColor: 'rgba(30, 41, 59, 0.9)',
|
|
borderColor: 'rgba(148, 163, 184, 0.2)',
|
|
textStyle: { color: '#ffffff' }
|
|
},
|
|
legend: {
|
|
orient: 'horizontal',
|
|
bottom: '0%',
|
|
textStyle: { color: '#94a3b8' }
|
|
},
|
|
series: [{
|
|
type: 'pie',
|
|
radius: ['40%', '70%'],
|
|
center: ['50%', '45%'],
|
|
data: [
|
|
{ value: 35, name: '百度智能云', itemStyle: { color: '#2563eb' } },
|
|
{ value: 28, name: '阿里云', itemStyle: { color: '#ff6b35' } },
|
|
{ value: 18, name: '腾讯云', itemStyle: { color: '#059669' } },
|
|
{ value: 12, name: '华为云', itemStyle: { color: '#7c3aed' } },
|
|
{ value: 7, name: '其他', itemStyle: { color: '#6b7280' } }
|
|
]
|
|
}]
|
|
};
|
|
|
|
platformChart.setOption(platformOption);
|
|
|
|
// 应用场景分布图
|
|
const applicationDom = document.getElementById('applicationChart');
|
|
applicationChart = echarts.init(applicationDom);
|
|
|
|
const applicationOption = {
|
|
backgroundColor: 'transparent',
|
|
title: {
|
|
text: 'AI应用场景分布',
|
|
textStyle: { color: '#ffffff', fontSize: 16 },
|
|
left: 'center'
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
backgroundColor: 'rgba(30, 41, 59, 0.9)',
|
|
borderColor: 'rgba(148, 163, 184, 0.2)',
|
|
textStyle: { color: '#ffffff' }
|
|
},
|
|
legend: {
|
|
orient: 'horizontal',
|
|
bottom: '0%',
|
|
textStyle: { color: '#94a3b8' }
|
|
},
|
|
series: [{
|
|
type: 'pie',
|
|
radius: '70%',
|
|
center: ['50%', '45%'],
|
|
data: [
|
|
{ value: 25, name: '智能安防', itemStyle: { color: '#2563eb' } },
|
|
{ value: 20, name: '智慧教育', itemStyle: { color: '#059669' } },
|
|
{ value: 18, name: '智能医疗', itemStyle: { color: '#7c3aed' } },
|
|
{ value: 15, name: '自动驾驶', itemStyle: { color: '#0891b2' } },
|
|
{ value: 12, name: '金融科技', itemStyle: { color: '#dc2626' } },
|
|
{ value: 10, name: '其他', itemStyle: { color: '#6b7280' } }
|
|
]
|
|
}]
|
|
};
|
|
|
|
applicationChart.setOption(applicationOption);
|
|
|
|
// 市场规模预测图
|
|
const marketSizeDom = document.getElementById('marketSizeChart');
|
|
marketSizeChart = echarts.init(marketSizeDom);
|
|
|
|
const marketSizeOption = {
|
|
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: ['2020', '2021', '2022', '2023', '2024', '2025', '2026', '2027'],
|
|
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: 'line',
|
|
smooth: true,
|
|
data: [450, 680, 950, 1320, 1850, 2580, 3600, 5000],
|
|
lineStyle: { color: '#2563eb', width: 3 },
|
|
areaStyle: {
|
|
color: {
|
|
type: 'linear',
|
|
x: 0, y: 0, x2: 0, y2: 1,
|
|
colorStops: [
|
|
{ offset: 0, color: 'rgba(37, 99, 235, 0.3)' },
|
|
{ offset: 1, color: 'rgba(37, 99, 235, 0.05)' }
|
|
]
|
|
}
|
|
}
|
|
}]
|
|
};
|
|
|
|
marketSizeChart.setOption(marketSizeOption);
|
|
|
|
// 发展趋势图
|
|
const trendDom = document.getElementById('trendChart');
|
|
trendChart = echarts.init(trendDom);
|
|
|
|
const trendOption = {
|
|
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', '2026'],
|
|
axisLine: { lineStyle: { color: '#475569' } },
|
|
axisLabel: { color: '#94a3b8' }
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
max: 10,
|
|
axisLine: { lineStyle: { color: '#475569' } },
|
|
axisLabel: { color: '#94a3b8' },
|
|
splitLine: { lineStyle: { color: 'rgba(71, 85, 105, 0.3)' } }
|
|
},
|
|
series: [
|
|
{
|
|
name: '技术成熟度',
|
|
type: 'line',
|
|
smooth: true,
|
|
data: [4.2, 5.1, 6.3, 7.2, 8.1, 8.8, 9.3],
|
|
lineStyle: { color: '#2563eb', width: 3 }
|
|
},
|
|
{
|
|
name: '市场规模',
|
|
type: 'line',
|
|
smooth: true,
|
|
data: [3.8, 4.5, 5.8, 7.1, 8.4, 9.2, 9.7],
|
|
lineStyle: { color: '#059669', width: 3 }
|
|
},
|
|
{
|
|
name: '投资热度',
|
|
type: 'line',
|
|
smooth: true,
|
|
data: [5.5, 7.2, 8.1, 7.8, 7.5, 8.2, 8.8],
|
|
lineStyle: { color: '#7c3aed', width: 3 }
|
|
}
|
|
]
|
|
};
|
|
|
|
trendChart.setOption(trendOption);
|
|
|
|
// 响应式处理
|
|
window.addEventListener('resize', function() {
|
|
upstreamMarketChart.resize();
|
|
techBarrierChart.resize();
|
|
frameworkChart.resize();
|
|
platformChart.resize();
|
|
applicationChart.resize();
|
|
marketSizeChart.resize();
|
|
trendChart.resize();
|
|
});
|
|
}
|
|
|
|
// 平滑滚动导航
|
|
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> |