simonandClaude Opus 4.7
eedead0d41
- 升级 ECharts 到 5.4.2，重构 lib/ 目录结构 - 新增 DataTables 2.x 和 FixedColumns 插件 - 新增 quant/ 宏观研究报告模块 - 重构图表页面：stock_trend、hkholdbycode 等采用 JS fetch API.doorcome.cn 模式 - 新增 CLAUDE.md 补充页面文档和新数据流说明 - 更新 inc/config.php TuShare API 配置 - 更新新闻联播分析模块 news/ 和相关研究报告 research/ - 新增 api_document/ 参考文档 - 清理 .gitignore，排除 uploads/xls/.mcp.json/ source maps 等非代码文件 - 所有 PHP 文件通过 php -l 语法检查 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
1049 lines
43 KiB
HTML
1049 lines
43 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="/lib/js/anime-3.2.min.js"></script>
|
|
<script src="/lib/js/echarts-5.4.2.js"></script>
|
|
<script src="/lib/js/shader-park-core-0.1.esm.js" type="module"></script>
|
|
<link href="/lib/css/google-fonts.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);
|
|
}
|
|
|
|
.dashboard-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 24px;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.dashboard-card {
|
|
padding: 24px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.metric-value {
|
|
font-size: 2.5rem;
|
|
font-weight: bold;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.metric-label {
|
|
color: var(--text-secondary);
|
|
font-size: 0.9rem;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.metric-change {
|
|
font-size: 0.8rem;
|
|
padding: 4px 8px;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.metric-up {
|
|
background: rgba(5, 150, 105, 0.2);
|
|
color: #059669;
|
|
}
|
|
|
|
.metric-down {
|
|
background: rgba(220, 38, 38, 0.2);
|
|
color: #dc2626;
|
|
}
|
|
|
|
.chart-container {
|
|
height: 400px;
|
|
margin: 24px 0;
|
|
}
|
|
|
|
.large-chart {
|
|
height: 500px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.filter-panel {
|
|
background: var(--card-bg);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.filter-group {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
align-items: center;
|
|
}
|
|
|
|
.filter-label {
|
|
font-weight: 500;
|
|
color: var(--text-secondary);
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.filter-select {
|
|
background: rgba(30, 41, 59, 0.8);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
padding: 8px 12px;
|
|
color: var(--text-primary);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.comparison-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.comparison-table th,
|
|
.comparison-table td {
|
|
padding: 12px;
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.comparison-table th {
|
|
background: rgba(37, 99, 235, 0.1);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.comparison-table tr:hover {
|
|
background: rgba(30, 41, 59, 0.5);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.dashboard-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.container {
|
|
padding: 0 16px;
|
|
}
|
|
|
|
.filter-group {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.filter-select {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</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="analysis.html" class="text-gray-300 hover:text-white transition-colors">产业链分析</a>
|
|
<a href="#metrics" class="text-gray-300 hover:text-white transition-colors">关键指标</a>
|
|
<a href="#comparison" 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>
|
|
|
|
<!-- Key Metrics Dashboard -->
|
|
<section id="metrics" class="section">
|
|
<div class="container">
|
|
<h2 class="text-3xl font-bold text-center mb-12 fade-in">关键指标监控</h2>
|
|
|
|
<!-- Filter Panel -->
|
|
<div class="filter-panel fade-in">
|
|
<div class="filter-group">
|
|
<div>
|
|
<span class="filter-label">时间范围:</span>
|
|
<select class="filter-select" id="timeRange">
|
|
<option value="1month">近1个月</option>
|
|
<option value="3months" selected>近3个月</option>
|
|
<option value="6months">近6个月</option>
|
|
<option value="1year">近1年</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<span class="filter-label">产业链层级:</span>
|
|
<select class="filter-select" id="chainLevel">
|
|
<option value="all" selected>全部</option>
|
|
<option value="upstream">上游</option>
|
|
<option value="midstream">中游</option>
|
|
<option value="downstream">下游</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<span class="filter-label">指标类型:</span>
|
|
<select class="filter-select" id="metricType">
|
|
<option value="all" selected>全部指标</option>
|
|
<option value="financial">财务指标</option>
|
|
<option value="technical">技术指标</option>
|
|
<option value="market">市场指标</option>
|
|
</select>
|
|
</div>
|
|
<button class="btn-primary" onclick="updateDashboard()">更新数据</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Key Metrics Grid -->
|
|
<div class="dashboard-grid">
|
|
<div class="dashboard-card card fade-in">
|
|
<div class="metric-value text-blue-400" id="totalMarketSize">8,500</div>
|
|
<div class="metric-label">AI产业总规模(亿元)</div>
|
|
<div class="metric-change metric-up">+23.5% 环比</div>
|
|
</div>
|
|
|
|
<div class="dashboard-card card fade-in">
|
|
<div class="metric-value text-green-400" id="companyCount">156</div>
|
|
<div class="metric-label">上市公司数量</div>
|
|
<div class="metric-change metric-up">+12 新增</div>
|
|
</div>
|
|
|
|
<div class="dashboard-card card fade-in">
|
|
<div class="metric-value text-purple-400" id="avgMoatScore">8.2</div>
|
|
<div class="metric-label">平均护城河评分</div>
|
|
<div class="metric-change metric-up">+0.3 提升</div>
|
|
</div>
|
|
|
|
<div class="dashboard-card card fade-in">
|
|
<div class="metric-value text-cyan-400" id="investmentAmount">1,250</div>
|
|
<div class="metric-label">月度投资额(亿元)</div>
|
|
<div class="metric-change metric-down">-8.2% 环比</div>
|
|
</div>
|
|
|
|
<div class="dashboard-card card fade-in">
|
|
<div class="metric-value text-yellow-400" id="patentCount">45,680</div>
|
|
<div class="metric-label">累计专利数量</div>
|
|
<div class="metric-change metric-up">+1,245 新增</div>
|
|
</div>
|
|
|
|
<div class="dashboard-card card fade-in">
|
|
<div class="metric-value text-red-400" id="employmentCount">2,850,000</div>
|
|
<div class="metric-label">从业人员数量</div>
|
|
<div class="metric-change metric-up">+15.6% 同比</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Trend Analysis Chart -->
|
|
<div class="card p-8 fade-in">
|
|
<h3 class="text-2xl font-bold mb-6">产业趋势分析</h3>
|
|
<div id="trendAnalysisChart" class="chart-container large-chart"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Comparison Analysis -->
|
|
<section id="comparison" class="section">
|
|
<div class="container">
|
|
<h2 class="text-3xl font-bold text-center mb-12 fade-in">对比分析工具</h2>
|
|
|
|
<!-- Company Selector -->
|
|
<div class="filter-panel fade-in">
|
|
<div class="filter-group">
|
|
<div>
|
|
<span class="filter-label">选择公司:</span>
|
|
<select class="filter-select" id="company1">
|
|
<option value="cambricon">寒武纪</option>
|
|
<option value="huawei">华为昇腾</option>
|
|
<option value="nvidia">英伟达</option>
|
|
<option value="iflytek">科大讯飞</option>
|
|
<option value="baidu">百度</option>
|
|
<option value="hikvision">海康威视</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<span class="filter-label">vs</span>
|
|
<select class="filter-select" id="company2">
|
|
<option value="huawei">华为昇腾</option>
|
|
<option value="cambricon">寒武纪</option>
|
|
<option value="nvidia">英伟达</option>
|
|
<option value="iflytek">科大讯飞</option>
|
|
<option value="baidu">百度</option>
|
|
<option value="hikvision">海康威视</option>
|
|
</select>
|
|
</div>
|
|
<button class="btn-primary" onclick="updateComparison()">开始对比</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Comparison Results -->
|
|
<div class="grid lg:grid-cols-2 gap-8 mb-12">
|
|
<!-- Radar Chart Comparison -->
|
|
<div class="card p-8 fade-in">
|
|
<h3 class="text-xl font-bold mb-6">综合竞争力对比</h3>
|
|
<div id="comparisonRadarChart" class="chart-container"></div>
|
|
</div>
|
|
|
|
<!-- Financial Comparison -->
|
|
<div class="card p-8 fade-in">
|
|
<h3 class="text-xl font-bold mb-6">财务表现对比</h3>
|
|
<div id="financialComparisonChart" class="chart-container"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Detailed Comparison Table -->
|
|
<div class="card p-8 fade-in">
|
|
<h3 class="text-2xl font-bold mb-6">详细对比数据</h3>
|
|
<div class="overflow-x-auto">
|
|
<table class="comparison-table" id="comparisonTable">
|
|
<thead>
|
|
<tr>
|
|
<th>指标</th>
|
|
<th id="company1Name">寒武纪</th>
|
|
<th id="company2Name">华为昇腾</th>
|
|
<th>差异分析</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>护城河评分</td>
|
|
<td class="text-blue-400">9.2/10</td>
|
|
<td class="text-green-400">9.5/10</td>
|
|
<td class="text-yellow-400">华为略胜一筹</td>
|
|
</tr>
|
|
<tr>
|
|
<td>市场份额</td>
|
|
<td class="text-blue-400">15%</td>
|
|
<td class="text-green-400">25%</td>
|
|
<td class="text-red-400">华为领先10%</td>
|
|
</tr>
|
|
<tr>
|
|
<td>技术壁垒</td>
|
|
<td class="text-blue-400">9.2/10</td>
|
|
<td class="text-green-400">9.5/10</td>
|
|
<td class="text-green-400">两者都很强</td>
|
|
</tr>
|
|
<tr>
|
|
<td>专利数量</td>
|
|
<td class="text-blue-400">2700+</td>
|
|
<td class="text-green-400">5000+</td>
|
|
<td class="text-red-400">华为专利更多</td>
|
|
</tr>
|
|
<tr>
|
|
<td>营收规模</td>
|
|
<td class="text-blue-400">2.3亿</td>
|
|
<td class="text-green-400">8.5亿</td>
|
|
<td class="text-red-400">华为规模更大</td>
|
|
</tr>
|
|
<tr>
|
|
<td>同比增长</td>
|
|
<td class="text-blue-400">+65%</td>
|
|
<td class="text-green-400">+45%</td>
|
|
<td class="text-blue-400">寒武纪增长更快</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Market Intelligence -->
|
|
<section class="section">
|
|
<div class="container">
|
|
<h2 class="text-3xl font-bold text-center mb-12 fade-in">市场情报</h2>
|
|
|
|
<div class="grid lg:grid-cols-3 gap-8">
|
|
<!-- Hot Topics -->
|
|
<div class="card p-8 fade-in">
|
|
<h3 class="text-xl font-bold mb-6">热点追踪</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">
|
|
<h4 class="font-semibold text-blue-400 mb-2">大模型竞赛</h4>
|
|
<p class="text-sm text-gray-300">
|
|
各大厂商加速大模型研发，算力需求激增，AI芯片供不应求
|
|
</p>
|
|
<div class="mt-2 text-xs text-gray-400">热度指数: 🔥🔥🔥🔥🔥</div>
|
|
</div>
|
|
<div class="p-4 bg-green-500 bg-opacity-10 border border-green-500 border-opacity-30 rounded-lg">
|
|
<h4 class="font-semibold text-green-400 mb-2">国产替代</h4>
|
|
<p class="text-sm text-gray-300">
|
|
政策支持力度加大，国产AI芯片迎来发展黄金期
|
|
</p>
|
|
<div class="mt-2 text-xs text-gray-400">热度指数: 🔥🔥🔥🔥</div>
|
|
</div>
|
|
<div class="p-4 bg-purple-500 bg-opacity-10 border border-purple-500 border-opacity-30 rounded-lg">
|
|
<h4 class="font-semibold text-purple-400 mb-2">边缘AI</h4>
|
|
<p class="text-sm text-gray-300">
|
|
边缘计算与AI结合，低延迟、高隐私的本地化智能处理兴起
|
|
</p>
|
|
<div class="mt-2 text-xs text-gray-400">热度指数: 🔥🔥🔥</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Investment Trends -->
|
|
<div class="card p-8 fade-in">
|
|
<h3 class="text-xl font-bold mb-6">投资趋势</h3>
|
|
<div id="investmentChart" class="chart-container"></div>
|
|
<div class="mt-4 space-y-2 text-sm">
|
|
<div class="flex justify-between">
|
|
<span class="text-gray-400">本月投资总额</span>
|
|
<span class="text-green-400">1,250亿元</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-gray-400">投资案例数</span>
|
|
<span class="text-blue-400">342起</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-gray-400">平均投资额</span>
|
|
<span class="text-purple-400">3.65亿元</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Policy Updates -->
|
|
<div class="card p-8 fade-in">
|
|
<h3 class="text-xl font-bold mb-6">政策动态</h3>
|
|
<div class="space-y-4">
|
|
<div class="border-l-4 border-blue-500 pl-4">
|
|
<h4 class="font-semibold text-blue-400 mb-1">AI产业发展规划</h4>
|
|
<p class="text-sm text-gray-300 mb-2">
|
|
国家发布新一轮AI产业发展规划，目标到2027年产业规模突破万亿
|
|
</p>
|
|
<div class="text-xs text-gray-400">2025-10-15</div>
|
|
</div>
|
|
<div class="border-l-4 border-green-500 pl-4">
|
|
<h4 class="font-semibold text-green-400 mb-1">芯片产业支持政策</h4>
|
|
<p class="text-sm text-gray-300 mb-2">
|
|
出台税收优惠政策，支持AI芯片研发和产业化
|
|
</p>
|
|
<div class="text-xs text-gray-400">2025-10-10</div>
|
|
</div>
|
|
<div class="border-l-4 border-purple-500 pl-4">
|
|
<h4 class="font-semibold text-purple-400 mb-1">数据安全法规</h4>
|
|
<p class="text-sm text-gray-300 mb-2">
|
|
完善AI数据安全法规，推动产业健康发展
|
|
</p>
|
|
<div class="text-xs text-gray-400">2025-10-05</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 trendAnalysisChart, comparisonRadarChart, financialComparisonChart, investmentChart;
|
|
|
|
// 页面加载完成后初始化
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
initializeAnimations();
|
|
initializeCharts();
|
|
});
|
|
|
|
// 初始化动画
|
|
function initializeAnimations() {
|
|
anime({
|
|
targets: '.fade-in',
|
|
opacity: [0, 1],
|
|
translateY: [30, 0],
|
|
delay: anime.stagger(100),
|
|
duration: 600,
|
|
easing: 'easeOutQuart'
|
|
});
|
|
}
|
|
|
|
// 初始化图表
|
|
function initializeCharts() {
|
|
// 产业趋势分析图
|
|
const trendDom = document.getElementById('trendAnalysisChart');
|
|
trendAnalysisChart = echarts.init(trendDom);
|
|
|
|
const trendOption = {
|
|
backgroundColor: 'transparent',
|
|
title: {
|
|
text: 'AI产业链发展趋势',
|
|
textStyle: { color: '#ffffff', fontSize: 18 },
|
|
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: ['2023Q1', '2023Q2', '2023Q3', '2023Q4', '2024Q1', '2024Q2', '2024Q3', '2024Q4', '2025Q1', '2025Q2', '2025Q3'],
|
|
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',
|
|
smooth: true,
|
|
data: [1200, 1350, 1480, 1620, 1780, 1950, 2120, 2300, 2480, 2670, 2850],
|
|
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.2)' },
|
|
{ offset: 1, color: 'rgba(37, 99, 235, 0.05)' }
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: '中游规模',
|
|
type: 'line',
|
|
smooth: true,
|
|
data: [800, 920, 1050, 1180, 1320, 1470, 1630, 1800, 1980, 2170, 2380],
|
|
lineStyle: { color: '#059669', width: 3 },
|
|
areaStyle: {
|
|
color: {
|
|
type: 'linear',
|
|
x: 0, y: 0, x2: 0, y2: 1,
|
|
colorStops: [
|
|
{ offset: 0, color: 'rgba(5, 150, 105, 0.2)' },
|
|
{ offset: 1, color: 'rgba(5, 150, 105, 0.05)' }
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: '下游规模',
|
|
type: 'line',
|
|
smooth: true,
|
|
data: [1800, 2100, 2450, 2850, 3300, 3820, 4420, 5100, 5880, 6780, 7820],
|
|
lineStyle: { color: '#7c3aed', width: 3 },
|
|
areaStyle: {
|
|
color: {
|
|
type: 'linear',
|
|
x: 0, y: 0, x2: 0, y2: 1,
|
|
colorStops: [
|
|
{ offset: 0, color: 'rgba(124, 58, 237, 0.2)' },
|
|
{ offset: 1, color: 'rgba(124, 58, 237, 0.05)' }
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: '总投资额',
|
|
type: 'line',
|
|
yAxisIndex: 1,
|
|
smooth: true,
|
|
data: [280, 320, 380, 450, 520, 610, 720, 850, 980, 1150, 1250],
|
|
lineStyle: { color: '#dc2626', width: 3 }
|
|
}
|
|
]
|
|
};
|
|
|
|
trendAnalysisChart.setOption(trendOption);
|
|
|
|
// 对比雷达图
|
|
const radarDom = document.getElementById('comparisonRadarChart');
|
|
comparisonRadarChart = echarts.init(radarDom);
|
|
|
|
const radarOption = {
|
|
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' }
|
|
},
|
|
legend: {
|
|
data: ['寒武纪', '华为昇腾'],
|
|
textStyle: { color: '#94a3b8' },
|
|
bottom: 10
|
|
},
|
|
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, 6.0, 9.2, 7.5, 6.8, 8.2],
|
|
name: '寒武纪',
|
|
itemStyle: { color: '#2563eb' },
|
|
areaStyle: { color: 'rgba(37, 99, 235, 0.2)' }
|
|
},
|
|
{
|
|
value: [9.0, 8.5, 9.5, 9.2, 9.0, 9.5],
|
|
name: '华为昇腾',
|
|
itemStyle: { color: '#059669' },
|
|
areaStyle: { color: 'rgba(5, 150, 105, 0.2)' }
|
|
}
|
|
]
|
|
}]
|
|
};
|
|
|
|
comparisonRadarChart.setOption(radarOption);
|
|
|
|
// 财务对比图
|
|
const financialDom = document.getElementById('financialComparisonChart');
|
|
financialComparisonChart = echarts.init(financialDom);
|
|
|
|
const financialOption = {
|
|
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: ['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)' } }
|
|
},
|
|
{
|
|
type: 'value',
|
|
name: '增长率(%)',
|
|
axisLine: { lineStyle: { color: '#475569' } },
|
|
axisLabel: { color: '#94a3b8' }
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '寒武纪营收',
|
|
type: 'bar',
|
|
data: [5.3, 7.2, 9.1, 11.8, 7.1],
|
|
itemStyle: { color: '#2563eb' }
|
|
},
|
|
{
|
|
name: '华为昇腾营收',
|
|
type: 'bar',
|
|
data: [6.8, 9.5, 12.3, 15.6, 8.5],
|
|
itemStyle: { color: '#059669' }
|
|
},
|
|
{
|
|
name: '寒武纪增长率',
|
|
type: 'line',
|
|
yAxisIndex: 1,
|
|
data: [35, 36, 26, 30, 65],
|
|
lineStyle: { color: '#7c3aed', width: 3 }
|
|
},
|
|
{
|
|
name: '华为昇腾增长率',
|
|
type: 'line',
|
|
yAxisIndex: 1,
|
|
data: [42, 40, 29, 27, 45],
|
|
lineStyle: { color: '#dc2626', width: 3 }
|
|
}
|
|
]
|
|
};
|
|
|
|
financialComparisonChart.setOption(financialOption);
|
|
|
|
// 投资趋势图
|
|
const investmentDom = document.getElementById('investmentChart');
|
|
investmentChart = echarts.init(investmentDom);
|
|
|
|
const investmentOption = {
|
|
backgroundColor: 'transparent',
|
|
title: {
|
|
text: '月度投资趋势',
|
|
textStyle: { color: '#ffffff', fontSize: 14 },
|
|
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: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月'],
|
|
axisLine: { lineStyle: { color: '#475569' } },
|
|
axisLabel: { color: '#94a3b8', fontSize: 10 }
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name: '投资额(亿元)',
|
|
axisLine: { lineStyle: { color: '#475569' } },
|
|
axisLabel: { color: '#94a3b8', fontSize: 10 },
|
|
splitLine: { lineStyle: { color: 'rgba(71, 85, 105, 0.3)' } }
|
|
},
|
|
series: [{
|
|
type: 'line',
|
|
smooth: true,
|
|
data: [980, 1050, 1180, 1320, 1280, 1450, 1380, 1520, 1680, 1250],
|
|
lineStyle: { color: '#059669', width: 2 },
|
|
itemStyle: { color: '#059669' },
|
|
areaStyle: {
|
|
color: {
|
|
type: 'linear',
|
|
x: 0, y: 0, x2: 0, y2: 1,
|
|
colorStops: [
|
|
{ offset: 0, color: 'rgba(5, 150, 105, 0.3)' },
|
|
{ offset: 1, color: 'rgba(5, 150, 105, 0.05)' }
|
|
]
|
|
}
|
|
}
|
|
}]
|
|
};
|
|
|
|
investmentChart.setOption(investmentOption);
|
|
|
|
// 响应式处理
|
|
window.addEventListener('resize', function() {
|
|
trendAnalysisChart.resize();
|
|
comparisonRadarChart.resize();
|
|
financialComparisonChart.resize();
|
|
investmentChart.resize();
|
|
});
|
|
}
|
|
|
|
// 更新看板数据
|
|
function updateDashboard() {
|
|
const timeRange = document.getElementById('timeRange').value;
|
|
const chainLevel = document.getElementById('chainLevel').value;
|
|
const metricType = document.getElementById('metricType').value;
|
|
|
|
// 模拟数据更新
|
|
const metrics = {
|
|
'1month': {
|
|
totalMarketSize: '8,500',
|
|
companyCount: '156',
|
|
avgMoatScore: '8.2',
|
|
investmentAmount: '1,250',
|
|
patentCount: '45,680',
|
|
employmentCount: '2,850,000'
|
|
},
|
|
'3months': {
|
|
totalMarketSize: '8,200',
|
|
companyCount: '148',
|
|
avgMoatScore: '8.0',
|
|
investmentAmount: '1,180',
|
|
patentCount: '44,200',
|
|
employmentCount: '2,750,000'
|
|
},
|
|
'6months': {
|
|
totalMarketSize: '7,800',
|
|
companyCount: '139',
|
|
avgMoatScore: '7.8',
|
|
investmentAmount: '1,050',
|
|
patentCount: '42,100',
|
|
employmentCount: '2,600,000'
|
|
},
|
|
'1year': {
|
|
totalMarketSize: '7,200',
|
|
companyCount: '128',
|
|
avgMoatScore: '7.5',
|
|
investmentAmount: '920',
|
|
patentCount: '39,800',
|
|
employmentCount: '2,450,000'
|
|
}
|
|
};
|
|
|
|
const data = metrics[timeRange] || metrics['1month'];
|
|
|
|
// 更新指标显示
|
|
document.getElementById('totalMarketSize').textContent = data.totalMarketSize;
|
|
document.getElementById('companyCount').textContent = data.companyCount;
|
|
document.getElementById('avgMoatScore').textContent = data.avgMoatScore;
|
|
document.getElementById('investmentAmount').textContent = data.investmentAmount;
|
|
document.getElementById('patentCount').textContent = data.patentCount;
|
|
document.getElementById('employmentCount').textContent = data.employmentCount;
|
|
|
|
// 添加更新动画
|
|
anime({
|
|
targets: '.metric-value',
|
|
scale: [1, 1.1, 1],
|
|
duration: 600,
|
|
easing: 'easeInOutQuad'
|
|
});
|
|
}
|
|
|
|
// 更新对比分析
|
|
function updateComparison() {
|
|
const company1 = document.getElementById('company1').value;
|
|
const company2 = document.getElementById('company2').value;
|
|
|
|
// 更新表格标题
|
|
const companyNames = {
|
|
'cambricon': '寒武纪',
|
|
'huawei': '华为昇腾',
|
|
'nvidia': '英伟达',
|
|
'iflytek': '科大讯飞',
|
|
'baidu': '百度',
|
|
'hikvision': '海康威视'
|
|
};
|
|
|
|
document.getElementById('company1Name').textContent = companyNames[company1];
|
|
document.getElementById('company2Name').textContent = companyNames[company2];
|
|
|
|
// 更新雷达图数据
|
|
const companyData = {
|
|
'cambricon': [9.5, 6.0, 9.2, 7.5, 6.8, 8.2],
|
|
'huawei': [9.0, 8.5, 9.5, 9.2, 9.0, 9.5],
|
|
'nvidia': [9.8, 9.5, 9.9, 9.8, 9.7, 9.6],
|
|
'iflytek': [8.8, 7.2, 8.5, 8.0, 7.5, 8.0],
|
|
'baidu': [8.5, 7.8, 8.2, 8.5, 8.0, 8.3],
|
|
'hikvision': [8.2, 8.0, 7.8, 7.5, 8.5, 7.6]
|
|
};
|
|
|
|
const radarOption = {
|
|
series: [{
|
|
data: [
|
|
{
|
|
value: companyData[company1],
|
|
name: companyNames[company1],
|
|
itemStyle: { color: '#2563eb' },
|
|
areaStyle: { color: 'rgba(37, 99, 235, 0.2)' }
|
|
},
|
|
{
|
|
value: companyData[company2],
|
|
name: companyNames[company2],
|
|
itemStyle: { color: '#059669' },
|
|
areaStyle: { color: 'rgba(5, 150, 105, 0.2)' }
|
|
}
|
|
]
|
|
}]
|
|
};
|
|
|
|
comparisonRadarChart.setOption(radarOption);
|
|
|
|
// 添加更新动画
|
|
anime({
|
|
targets: '#comparisonRadarChart',
|
|
scale: [0.95, 1],
|
|
duration: 400,
|
|
easing: 'easeOutQuad'
|
|
});
|
|
}
|
|
|
|
// 定时更新数据（模拟实时数据）
|
|
setInterval(function() {
|
|
// 随机更新一些指标
|
|
const elements = document.querySelectorAll('.metric-value');
|
|
elements.forEach(el => {
|
|
if (Math.random() > 0.7) { // 30%概率更新
|
|
anime({
|
|
targets: el,
|
|
scale: [1, 1.05, 1],
|
|
duration: 300,
|
|
easing: 'easeInOutQuad'
|
|
});
|
|
}
|
|
});
|
|
}, 5000);
|
|
</script>
|
|
</body>
|
|
</html> |