402 lines
25 KiB
HTML
402 lines
25 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN" data-theme="night">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>深度投研报告：阿里夸克AI眼镜</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.10.2/dist/full.min.css" rel="stylesheet" type="text/css" />
|
||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
|
||
<style>
|
||
body {
|
||
background-color: #02040a;
|
||
background-image:
|
||
radial-gradient(circle at 25% 30%, hsl(215, 60%, 15%) 0%, transparent 40%),
|
||
radial-gradient(circle at 75% 70%, hsl(280, 40%, 12%) 0%, transparent 40%);
|
||
color: #e0e0e0;
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||
}
|
||
|
||
.glass-card {
|
||
background: rgba(15, 23, 42, 0.4);
|
||
-webkit-backdrop-filter: blur(20px);
|
||
backdrop-filter: blur(20px);
|
||
border: 1px solid rgba(56, 189, 248, 0.2);
|
||
border-radius: 1.5rem; /* 24px */
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.glass-card:hover {
|
||
background: rgba(15, 23, 42, 0.6);
|
||
border: 1px solid rgba(56, 189, 248, 0.4);
|
||
box-shadow: 0 0 30px rgba(56, 189, 248, 0.2);
|
||
}
|
||
|
||
.bento-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
grid-auto-rows: auto;
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
@media (max-width: 1024px) {
|
||
.bento-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
}
|
||
@media (max-width: 768px) {
|
||
.bento-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
.bento-item-large {
|
||
grid-column: span 2;
|
||
grid-row: span 2;
|
||
}
|
||
|
||
h1, h2, h3, h4 {
|
||
color: #f0f8ff; /* AliceBlue for headers */
|
||
}
|
||
h2 {
|
||
border-left: 3px solid #0ea5e9; /* sky-500 */
|
||
padding-left: 0.75rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
.text-highlight {
|
||
color: #22d3ee; /* cyan-400 */
|
||
}
|
||
|
||
.daisy-collapse-title, .daisy-collapse > input[type=checkbox] {
|
||
padding: 1rem 1.5rem;
|
||
}
|
||
.daisy-collapse-content {
|
||
padding: 0 1.5rem 1rem 1.5rem;
|
||
}
|
||
.daisy-collapse {
|
||
border-radius: 1.5rem;
|
||
border: 1px solid rgba(56, 189, 248, 0.2);
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body class="min-h-screen p-4 sm:p-6 lg:p-8">
|
||
<div class="max-w-screen-2xl mx-auto">
|
||
<!-- Header -->
|
||
<header class="text-center mb-8 lg:mb-12">
|
||
<div class="inline-block glass-card px-6 py-4">
|
||
<h1 class="text-3xl lg:text-5xl font-bold tracking-wider text-transparent bg-clip-text bg-gradient-to-r from-sky-400 to-cyan-300">
|
||
阿里夸克AI眼镜
|
||
</h1>
|
||
<p class="text-slate-400 mt-2 text-sm lg:text-base">深度投研报告</p>
|
||
<p class="text-xs text-slate-500 mt-1">Presented by: 价小前投研 (AI投研Agent)</p>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Main Content Grid -->
|
||
<main class="bento-grid">
|
||
<!-- Insight Section (Large) -->
|
||
<section class="glass-card bento-item-large p-6 lg:p-8">
|
||
<h2 class="text-2xl font-bold mb-4">概念Insight深度剖析</h2>
|
||
|
||
<div class="space-y-6 text-slate-300 text-base leading-relaxed prose prose-invert max-w-none">
|
||
<div class="p-4 bg-sky-900/20 border border-sky-500/30 rounded-2xl">
|
||
<h3 class="font-semibold text-lg text-sky-300 mb-2">核心观点摘要</h3>
|
||
<p>阿里夸克AI眼镜并非一次简单的硬件试水，而是阿里巴巴将其<strong class="text-highlight">全栈AI能力（大模型+应用生态）</strong>与硬件终端深度绑定的关键战略举措。当前，该概念正从<strong class="text-highlight">事件驱动的主题炒作阶段，过渡到由早期销量和供应链订单驱动的基本面验证初期</strong>，其长期潜力取决于能否将庞大的阿里生态优势转化为不可替代的硬件用户体验，从而在即将到来的AI硬件“百镜大战”中建立护城河。</p>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="font-semibold text-lg text-slate-100 mt-6 mb-3">核心逻辑：软件-硬件-生态三位一体闭环</h3>
|
||
<ul class="list-decimal pl-5 space-y-2">
|
||
<li><strong>软件先行 (Quark App)</strong>: 拥有超2亿用户和3430万日活，为AI眼镜提供了成熟的“大脑”、现成的用户池和数据飞轮基础。</li>
|
||
<li><strong>硬件赋能 (AI Glasses)</strong>: 作为“第一视角”的交互设备，将夸克的AI能力从手机屏幕中释放，实现从“人机交互”到“人与环境交互”的跃迁。</li>
|
||
<li><strong>生态决胜 (Alipay, Gaode, Taobao)</strong>: 核心差异化优势。深度融合支付宝（支付）、高德（导航）、淘宝（比价）等国民级应用，提供直击痛点的“杀手级应用”潜力，是短期难以复制的护城河。</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="font-semibold text-lg text-slate-100 mt-6 mb-3">预期差分析：短期热度 vs. 长期挑战</h3>
|
||
<ul class="list-disc pl-5 space-y-2">
|
||
<li><strong>销量预期差</strong>: 新闻稿“火爆售罄”的营销热度，与路演披露的年度目标（S1保守<strong class="text-highlight">20万台</strong>，G1 <strong class="text-highlight">≥50万台</strong>）存在显著温差。市场需关注长期经营目标而非短期营销战报。</li>
|
||
<li><strong>体验预期差</strong>: 近视镜片方案“出厂一体化贴合，不可后配”，技术领先但增加了用户决策成本和售后难度，是市场易忽略的“最后一公里”问题。</li>
|
||
<li><strong>硬件成熟度预期差</strong>: 7.5mm超细镜腿等前卫设计，其长期耐用性待市场检验，可能成为影响长期口碑的关键因素。</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="font-semibold text-lg text-slate-100 mt-6 mb-3">产业链与核心公司剖析</h3>
|
||
<p>产业链价值集中于上游核心元器件。逻辑最纯粹、确定性最高的标的集中于此，尤其是具备<strong class="text-highlight">独家供应</strong>地位的公司。</p>
|
||
<ul class="list-disc pl-5 space-y-2">
|
||
<li><strong>核心光学元器件</strong>: 技术壁垒最高、价值量最大。代表：<strong class="text-highlight">康耐特光学</strong> (独家近视镜片)。</li>
|
||
<li><strong>低功耗AIoT芯片</strong>: 实现实时语音交互和长续航的关键。代表：<strong class="text-highlight">恒玄科技</strong> (已确认搭载)。</li>
|
||
<li><strong>专业化服务渠道</strong>: 随着渗透率提升，线下验配、维修等服务需求将成为新增长点。代表：<strong class="text-highlight">博士眼镜</strong> (潜在合作方)。</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="font-semibold text-lg text-slate-100 mt-6 mb-3">潜在风险与挑战</h3>
|
||
<ul class="list-disc pl-5 space-y-2">
|
||
<li><strong>技术风险</strong>: 续航焦虑依然存在；核心器件（如光机、光波导）单一供应商可能导致交付和议价问题。</li>
|
||
<li><strong>商业化风险</strong>: 3999元起步价对市场接受度是巨大考验；尚未证明其相较于手机的“必要性”。</li>
|
||
<li><strong>渠道与服务复杂性</strong>: 定制化流程远比普通消费电子产品复杂，对销售和售后服务体系构成巨大挑战。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Timeline Chart -->
|
||
<section class="glass-card p-6">
|
||
<h2 class="text-xl font-bold">关键事件时间轴</h2>
|
||
<div id="timeline-chart" class="w-full h-64 md:h-full min-h-[300px]"></div>
|
||
</section>
|
||
|
||
<!-- Hardware Specs -->
|
||
<section class="glass-card p-6">
|
||
<h2 class="text-xl font-bold">核心硬件规格 (S1)</h2>
|
||
<ul class="space-y-3 mt-4 text-slate-300">
|
||
<li class="flex justify-between items-center"><span>主芯片:</span> <span class="font-mono text-cyan-400 text-right">高通AR1 + 恒玄BES2800</span></li>
|
||
<li class="flex justify-between items-center"><span>显示方案:</span> <span class="font-mono text-cyan-400 text-right">双目MicroLED+光波导</span></li>
|
||
<li class="flex justify-between items-center"><span>入眼亮度:</span> <span class="font-mono text-cyan-400 text-right">4000 nits (峰值)</span></li>
|
||
<li class="flex justify-between items-center"><span>整机重量:</span> <span class="font-mono text-cyan-400 text-right">~50 g</span></li>
|
||
<li class="flex justify-between items-center"><span>续航方案:</span> <span class="font-mono text-cyan-400 text-right">热插拔双电池</span></li>
|
||
<li class="flex justify-between items-center"><span>存储:</span> <span class="font-mono text-cyan-400 text-right">3GB + 32GB</span></li>
|
||
<li class="flex justify-between items-center"><span>摄像头:</span> <span class="font-mono text-cyan-400 text-right">12Mp IMX681 (3K录像)</span></li>
|
||
</ul>
|
||
</section>
|
||
|
||
<!-- Ecosystem Integration -->
|
||
<section class="glass-card p-6">
|
||
<h2 class="text-xl font-bold">阿里生态深度融合</h2>
|
||
<div class="grid grid-cols-2 gap-4 mt-4">
|
||
<div class="p-4 bg-slate-800/50 rounded-xl text-center">
|
||
<p class="text-lg font-semibold text-sky-400">支付宝</p>
|
||
<p class="text-sm text-slate-400">扫码支付 / 看一下支付</p>
|
||
</div>
|
||
<div class="p-4 bg-slate-800/50 rounded-xl text-center">
|
||
<p class="text-lg font-semibold text-green-400">高德地图</p>
|
||
<p class="text-sm text-slate-400">近眼显示导航</p>
|
||
</div>
|
||
<div class="p-4 bg-slate-800/50 rounded-xl text-center">
|
||
<p class="text-lg font-semibold text-orange-400">淘宝</p>
|
||
<p class="text-sm text-slate-400">搜同款 / 识价比价</p>
|
||
</div>
|
||
<div class="p-4 bg-slate-800/50 rounded-xl text-center">
|
||
<p class="text-lg font-semibold text-blue-400">飞猪</p>
|
||
<p class="text-sm text-slate-400">商旅 / 行程提醒</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Supply Chain -->
|
||
<section class="glass-card p-6">
|
||
<h2 class="text-xl font-bold">产业链核心玩家</h2>
|
||
<ul class="space-y-2 mt-4 text-slate-300">
|
||
<li><strong class="text-sky-400 w-24 inline-block">整机代工:</strong> 立讯精密 (主), 歌尔股份</li>
|
||
<li><strong class="text-sky-400 w-24 inline-block">协处理器:</strong> 恒玄科技 (BES2800)</li>
|
||
<li><strong class="text-sky-400 w-24 inline-block">电源管理:</strong> 南芯科技</li>
|
||
<li><strong class="text-sky-400 w-24 inline-block">存 储:</strong> 佰维存储 (ePOP)</li>
|
||
<li><strong class="text-sky-400 w-24 inline-block">MicroLED:</strong> JBD (独供)</li>
|
||
<li><strong class="text-sky-400 w-24 inline-block">光 波 导:</strong> 至格科技</li>
|
||
<li><strong class="text-sky-400 w-24 inline-block">视觉算法:</strong> 虹软科技</li>
|
||
<li><strong class="text-sky-400 w-24 inline-block">近视镜片:</strong> 康耐特光学 (独供)</li>
|
||
</ul>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- Collapsible Data Summaries -->
|
||
<section class="mt-8 lg:mt-12">
|
||
<h2 class="text-2xl font-bold text-center mb-6">原始数据摘要</h2>
|
||
<div class="space-y-4 max-w-7xl mx-auto">
|
||
<div class="daisy-collapse glass-card">
|
||
<input type="checkbox" />
|
||
<div class="daisy-collapse-title text-xl font-medium text-slate-100">新闻数据摘要</div>
|
||
<div class="daisy-collapse-content text-slate-300 space-y-3">
|
||
<p><strong>核心摘要:</strong> 阿里巴巴首款自研AI眼镜，定位“随身超级助理”，融合通义千问大模型及阿里生态，提供S1（带显示）和G1（无显示）两大系列。2025年7月WAIC亮相，11月27日正式发布。</p>
|
||
<p><strong>战略定位:</strong> AI to C战略从软件延伸至硬件，由天猫精灵与夸克团队融合打造。S1定位全天候智能终端，G1主打时尚便携AI拍摄。</p>
|
||
<p><strong>销售表现:</strong> 预售期间登顶天猫智能眼镜销售额Top1，销售额超其他品牌近三天累计。S1起售价3999元，G1起售价1999元。</p>
|
||
<p><strong>功能与生态:</strong> 搭载“夸克同学”助手，依托阿里千问，支持语音/拍照双模态问答。深度融合高德导航、支付宝支付、淘宝比价、飞猪商旅等。</p>
|
||
</div>
|
||
</div>
|
||
<div class="daisy-collapse glass-card">
|
||
<input type="checkbox" />
|
||
<div class="daisy-collapse-title text-xl font-medium text-slate-100">路演数据摘要</div>
|
||
<div class="daisy-collapse-content text-slate-300 space-y-3">
|
||
<p><strong>核心参数(S1):</strong> 零售价3999元，整机重约50g。双目显示，入眼亮度4000nit，支持合像。热插拔双电池方案，缓解续航焦虑。</p>
|
||
<p><strong>近视方案:</strong> 康耐特独供1.74折射率镜片，出厂一体化贴合，技术壁垒高。</p>
|
||
<p><strong>内部销量目标(2025-26):</strong> S1保守20万台/年（产能充足可达50万台），G1 ≥50万台/年。</p>
|
||
<p><strong>竞争优势:</strong> 在佩戴、显示路线、镜片工艺、续航、生态整合方面均有优势。被视为行业新节点。</p>
|
||
<p><strong>BOM成本:</strong> 高通主芯片65美元，光波导1000-1200元，双光机400元，整机成本占零售价50-60%。</p>
|
||
</div>
|
||
</div>
|
||
<div class="daisy-collapse glass-card">
|
||
<input type="checkbox" />
|
||
<div class="daisy-collapse-title text-xl font-medium text-slate-100">研报数据摘要</div>
|
||
<div class="daisy-collapse-content text-slate-300 space-y-3">
|
||
<p><strong>战略意义:</strong> 标志消费级AI硬件从“尝鲜”走向“功能实用化”，AI正重新定义个人计算设备形态。</p>
|
||
<p><strong>产品亮点:</strong> “突破了AI眼镜当前面临的生态困境”，通过深度融合阿里生态构建起覆盖搜索、导航、支付、商旅的完整使用场景。</p>
|
||
<p><strong>技术底座 (新夸克):</strong> AI眼镜的“大脑”是2025年3月发布的AI旗舰应用“新夸克”，其定位为“AI超级框”，从搜索引擎转型为AI Agent，为硬件提供核心能力。</p>
|
||
<p><strong>用户基础:</strong> 夸克App拥有庞大用户基础（DAU 3430万），是AI眼镜潜在的转化用户池，其中00后用户占比超50%。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Stock Table -->
|
||
<section class="mt-8 lg:mt-12">
|
||
<h2 class="text-2xl font-bold text-center mb-6">相关产业链标的</h2>
|
||
<div class="overflow-x-auto glass-card p-4 sm:p-6">
|
||
<table class="table w-full">
|
||
<thead>
|
||
<tr class="border-b border-sky-500/30">
|
||
<th class="p-4 bg-transparent text-slate-100">股票名称</th>
|
||
<th class="p-4 bg-transparent text-slate-100">关联原因</th>
|
||
<th class="p-4 bg-transparent text-slate-100 hidden md:table-cell">其他标签</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr class="border-b border-white/10 hover:bg-white/5 transition-colors">
|
||
<td class="p-4 font-semibold"><a href="https://valuefrontier.cn/company?scode=688608" target="_blank" class="text-sky-400 hover:text-sky-300">恒玄科技 (688608)</a></td>
|
||
<td class="p-4 text-slate-300">BES2800芯片已确认搭载于阿里眼镜，主打语音待机功耗降至毫瓦级，能实现16小时持续工作。</td>
|
||
<td class="p-4 text-slate-400 hidden md:table-cell">消息来源: 互动/网传纪要</td>
|
||
</tr>
|
||
<tr class="border-b border-white/10 hover:bg-white/5 transition-colors">
|
||
<td class="p-4 font-semibold"><a href="https://valuefrontier.cn/company?scode=688525" target="_blank" class="text-sky-400 hover:text-sky-300">佰维存储 (688525)</a></td>
|
||
<td class="p-4 text-slate-300">ePOP系列产品目前已应用于阿里夸克AI眼镜中；为AI眼镜提供高性能ePOP存储器，适配小型化存储需求。</td>
|
||
<td class="p-4 text-slate-400 hidden md:table-cell">消息来源: 互动/网传纪要</td>
|
||
</tr>
|
||
<tr class="border-b border-white/10 hover:bg-white/5 transition-colors">
|
||
<td class="p-4 font-semibold"><a href="https://valuefrontier.cn/company?scode=688088" target="_blank" class="text-sky-400 hover:text-sky-300">虹软科技 (688088)</a></td>
|
||
<td class="p-4 text-slate-300">核心视觉算法提供方；为多品牌智能眼镜提供AI视觉解决方案，如物体识别、实时翻译等，有望为阿里AI眼镜提供相关算法支持。</td>
|
||
<td class="p-4 text-slate-400 hidden md:table-cell">消息来源: 互动/网传纪要</td>
|
||
</tr>
|
||
<tr class="border-b border-white/10 hover:bg-white/5 transition-colors">
|
||
<td class="p-4 font-semibold"><a href="https://valuefrontier.cn/company?scode=002426" target="_blank" class="text-sky-400 hover:text-sky-300">胜利精密 (002426)</a></td>
|
||
<td class="p-4 text-slate-300">为AR镜腿提供镁铝合金骨架，采用纳米压铸工艺减重30%，良率达95%。</td>
|
||
<td class="p-4 text-slate-400 hidden md:table-cell">消息来源: 互动/网传纪要</td>
|
||
</tr>
|
||
<tr class="border-b border-white/10 hover:bg-white/5 transition-colors">
|
||
<td class="p-4 font-semibold"><a href="https://valuefrontier.cn/company?scode=301383" target="_blank" class="text-sky-400 hover:text-sky-300">天键股份 (301383)</a></td>
|
||
<td class="p-4 text-slate-300">声学腔体供应商，新型复合振膜材料使音质失真率<0.5%，适配空间音频需求。</td>
|
||
<td class="p-4 text-slate-400 hidden md:table-cell">消息来源: 互动/网传纪要</td>
|
||
</tr>
|
||
<tr class="border-b border-white/10 hover:bg-white/5 transition-colors">
|
||
<td class="p-4 font-semibold"><a href="https://valuefrontier.cn/company?scode=300622" target="_blank" class="text-sky-400 hover:text-sky-300">博士眼镜 (300622)</a></td>
|
||
<td class="p-4 text-slate-300">智能眼镜验配龙头，覆盖70%主流品牌(如雷鸟、Rokid)，可能提供夸克AI眼镜的线下验配服务。</td>
|
||
<td class="p-4 text-slate-400 hidden md:table-cell">消息来源: 互动/网传纪要</td>
|
||
</tr>
|
||
<tr class="border-b border-white/10 hover:bg-white/5 transition-colors">
|
||
<td class="p-4 font-semibold"><a href="https://valuefrontier.cn/company?scode=002241" target="_blank" class="text-sky-400 hover:text-sky-300">歌尔股份 (002241)</a></td>
|
||
<td class="p-4 text-slate-300">可为全球行业领先客户提供AI智能眼镜等智能硬件设备的垂直整合的产品解决方案；光栅波导片叠合技术有望成为阿里进阶版合作方。</td>
|
||
<td class="p-4 text-slate-400 hidden md:table-cell">消息来源: 互动/网传纪要</td>
|
||
</tr>
|
||
<tr class="border-b border-white/10 hover:bg-white/5 transition-colors">
|
||
<td class="p-4 font-semibold"><a href="https://valuefrontier.cn/company?scode=300793" target="_blank" class="text-sky-400 hover:text-sky-300">佳禾智能 (300793)</a></td>
|
||
<td class="p-4 text-slate-300">为影目、仙瞬等品牌商生产消费级AR产品；2024年8月互动平台表示公司有生产制造天猫精灵骨传导智能眼镜。</td>
|
||
<td class="p-4 text-slate-400 hidden md:table-cell">消息来源: 互动</td>
|
||
</tr>
|
||
<tr class="border-b border-white/10 hover:bg-white/5 transition-colors">
|
||
<td class="p-4 font-semibold"><a href="https://valuefrontier.cn/company?scode=002273" target="_blank" class="text-sky-400 hover:text-sky-300">水晶光电 (002273)</a></td>
|
||
<td class="p-4 text-slate-300">为Meta、雷鸟等提供光学组件，可能供应夸克AI眼镜的AR显示方案。</td>
|
||
<td class="p-4 text-slate-400 hidden md:table-cell">消息来源: 互动/网传纪要</td>
|
||
</tr>
|
||
<tr class="hover:bg-white/5 transition-colors">
|
||
<td class="p-4 font-semibold"><a href="https://valuefrontier.cn/company?scode=300433" target="_blank" class="text-sky-400 hover:text-sky-300">蓝思科技 (300433)</a></td>
|
||
<td class="p-4 text-slate-300">Rokid全系AI眼镜的整机组装合作伙伴，覆盖从光学镜片、功能模组到整机的全流程生产；可能参与夸克AI眼镜的镜片制造。</td>
|
||
<td class="p-4 text-slate-400 hidden md:table-cell">消息来源: 互动/网传纪要</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Disclaimer -->
|
||
<footer class="text-center mt-12 text-xs text-slate-500">
|
||
<p>由北京价值前沿科技有限公司 AI投研agent：“价小前投研”进行投研呈现。</p>
|
||
<p>本报告为AI合成数据，所有信息仅供参考，不构成任何投资建议。市场有风险，投资需谨慎。</p>
|
||
</footer>
|
||
</div>
|
||
|
||
<script>
|
||
var chartDom = document.getElementById('timeline-chart');
|
||
var myChart = echarts.init(chartDom, 'dark');
|
||
var option;
|
||
|
||
option = {
|
||
backgroundColor: 'transparent',
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
},
|
||
formatter: function (params) {
|
||
return params[0].name + '<br/>' + params[0].marker + params[0].seriesName + ': ' + params[0].value;
|
||
}
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
top: '15%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: ['2025.03', '2025.07', '2025.10', '2025.11', '2025.12'],
|
||
axisLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.3)' } },
|
||
axisLabel: { color: '#a0aec0' }
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
name: '事件节点',
|
||
nameTextStyle: {
|
||
color: '#a0aec0'
|
||
},
|
||
axisLine: { show: true, lineStyle: { color: 'rgba(255, 255, 255, 0.3)' } },
|
||
axisLabel: { color: '#a0aec0', formatter: '' },
|
||
splitLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.1)' } }
|
||
},
|
||
series: [{
|
||
name: '事件',
|
||
type: 'line',
|
||
step: 'start',
|
||
symbol: 'circle',
|
||
symbolSize: 10,
|
||
data: [
|
||
{ value: 1, name: '战略铺垫: 发布"新夸克"AI超级框' },
|
||
{ value: 2, name: '首次亮相: WAIC大会展示' },
|
||
{ value: 3, name: '市场预热: 天猫开启预售' },
|
||
{ value: 4, name: '正式发布: S1/G1系列登场' },
|
||
{ value: 5, name: '交付验证: 首批用户交付' }
|
||
],
|
||
lineStyle: { color: '#0ea5e9' },
|
||
itemStyle: { color: '#0ea5e9' },
|
||
areaStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: 'rgba(14, 165, 233, 0.5)'
|
||
}, {
|
||
offset: 1,
|
||
color: 'rgba(14, 165, 233, 0)'
|
||
}])
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
formatter: function(params) {
|
||
return params.name.split(':')[1];
|
||
},
|
||
color: '#e0e0e0',
|
||
fontSize: 10,
|
||
}
|
||
}]
|
||
};
|
||
|
||
option && myChart.setOption(option);
|
||
window.addEventListener('resize', myChart.resize);
|
||
</script>
|
||
|
||
</body>
|
||
|
||
</html> |