Files
vf_react/public/htmls/天太机器人.html
2025-12-05 13:29:18 +08:00

493 lines
31 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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>天太机器人 - 概念深度研究报告</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>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', 'Noto Sans SC', sans-serif;
background-color: #0c0a09;
background-image:
radial-gradient(ellipse 40% 40% at 20% 25%, rgba(120, 113, 199, 0.15), transparent),
radial-gradient(ellipse 40% 40% at 80% 75%, rgba(99, 102, 241, 0.15), transparent);
background-attachment: fixed;
color: #e5e7eb;
}
.glass-card {
background: rgba(23, 23, 23, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.glass-card:hover {
border-color: rgba(99, 102, 241, 0.5);
box-shadow: 0 0 25px rgba(99, 102, 241, 0.2);
}
.bento-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}
.bento-grid-item {
border-radius: 1.5rem;
padding: 1.5rem;
}
.section-title {
font-size: 2.25rem;
font-weight: 700;
background: -webkit-linear-gradient(45deg, #a5b4fc, #6366f1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.subsection-title {
font-size: 1.5rem;
font-weight: 600;
color: #d1d5db;
border-left: 3px solid #6366f1;
padding-left: 1rem;
}
.tag {
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
font-size: 0.875rem;
font-weight: 500;
}
.tag-blue {
background-color: rgba(99, 102, 241, 0.2);
color: #a5b4fc;
}
.tag-green {
background-color: rgba(16, 185, 129, 0.2);
color: #6ee7b7;
}
.tag-red {
background-color: rgba(239, 68, 68, 0.2);
color: #fca5a5;
}
</style>
</head>
<body class="min-h-screen">
<div class="absolute top-0 left-0 w-full h-full z-[-10]">
<div class="absolute top-0 left-0 w-full h-full bg-grid-white/[0.05]"></div>
</div>
<div class="container mx-auto px-4 py-12 max-w-7xl">
<!-- Header -->
<header class="text-center mb-16">
<h1 class="text-5xl md:text-6xl font-extrabold tracking-tight bg-clip-text text-transparent bg-gradient-to-br from-gray-200 to-gray-500 mb-4">
天太机器人
</h1>
<p class="text-xl text-gray-400">概念深度研究报告</p>
<div class="mt-4 text-xs text-gray-500 tracking-wider">
<p>北京价值前沿科技有限公司 AI投研agent“价小前投研” 进行投研呈现</p>
<p>本报告为AI合成数据投资需谨慎。</p>
</div>
</header>
<!-- Section 1: Core View & Market Logic -->
<section class="mb-20">
<h2 class="section-title mb-8 text-center">核心观点与市场逻辑</h2>
<div class="space-y-8">
<div class="glass-card rounded-3xl p-8">
<h3 class="subsection-title mb-4">核心观点摘要</h3>
<p class="text-gray-300 leading-relaxed">
天太机器人概念正处在从技术验证迈向<strong class="text-indigo-400">商业化落地的引爆点</strong>。其核心驱动力源于<strong class="text-indigo-400">“万台订单”</strong>所代表的需求端验证与<strong class="text-indigo-400">“三位数关节模组”</strong>所承诺的成本端突破形成的共振。这不仅是一家公司的跃进更被市场视为整个人形机器人行业走出实验室、开启规模化元年的关键信号未来潜力在于其能否成功执行“TT inside”的平台化战略成为产业链的核心赋能者。
</p>
</div>
<div class="grid md:grid-cols-3 gap-6">
<div class="glass-card rounded-2xl p-6">
<h4 class="font-bold text-lg mb-2 text-white">技术可行性</h4>
<p class="text-sm text-gray-400">通过发布仿人脊椎机器人和“天工”马拉松夺冠,证明了在核心运动单元和整机设计上的技术先进性与独创性。</p>
</div>
<div class="glass-card rounded-2xl p-6">
<h4 class="font-bold text-lg mb-2 text-white">需求真实性</h4>
<p class="text-sm text-gray-400">万台订单将需求从科研采购拉升至工业级批量采购,解决了“造出来卖给谁”的核心问题,是驱动逻辑的基石。</p>
</div>
<div class="glass-card rounded-2xl p-6">
<h4 class="font-bold text-lg mb-2 text-white">成本可控性</h4>
<p class="text-sm text-gray-400">预告的“三位数”关节模组直击行业最大痛点若实现整机成本有望下探至5-10万元区间是从“能用”到“用得起”的决定性一步。</p>
</div>
</div>
<div class="glass-card rounded-3xl p-8">
<h3 class="subsection-title mb-4">预期差分析</h3>
<div class="space-y-4">
<div class="alert bg-yellow-900/50 border-yellow-500/50">
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6 text-yellow-400" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
<div>
<h3 class="font-bold">战略定位的预期差</h3>
<div class="text-xs text-yellow-200">市场可能将其简单视为整机厂但其“TT inside”平台化战略意在成为“机器人运动单元领域的宁德时代”天花板远高于单一整机厂市场对此可能尚未充分定价。</div>
</div>
</div>
<div class="alert bg-red-900/50 border-red-500/50">
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6 text-red-400" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
<div>
<h3 class="font-bold">订单质量的预期差</h3>
<div class="text-xs text-red-200">万台订单的签署方背景和履约能力不明,是具备约束力的商业合同还是高杠杆的框架协议存在巨大不确定性,是一个潜在的“雷区”。</div>
</div>
</div>
<div class="alert bg-blue-900/50 border-blue-500/50">
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6 text-blue-400" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
<div>
<h3 class="font-bold">供应链关系的预期差</h3>
<div class="text-xs text-blue-200">市场热炒的概念股中,大部分与天太机器人的关联未经证实。实际的核心供应商网络可能比市场想象的要窄,或尚未公开,炒作存在盲目性。</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Section 2: Development Timeline & Key Catalysts -->
<section class="mb-20">
<h2 class="section-title mb-8 text-center">发展脉络与关键催化剂</h2>
<div id="timeline-chart" class="w-full h-[500px] glass-card rounded-3xl p-4 mb-8"></div>
<div class="grid md:grid-cols-2 gap-8">
<div class="glass-card rounded-3xl p-8">
<h3 class="subsection-title mb-4">近期催化剂 (未来3-6个月)</h3>
<ul class="space-y-4 list-disc list-inside text-gray-300">
<li><strong class="text-indigo-300">新一代关节模组发布 (2025.08.26):</strong> 验证“击穿行业成本底线”承诺的关键事件,价格、性能参数将是市场焦点。</li>
<li><strong class="text-indigo-300">华民股份投资协议落地:</strong> 正式协议签署将是资本层面的重大利好,确认其估值并提供发展资金。</li>
<li><strong class="text-indigo-300">万台订单细节披露:</strong> 市场迫切需要关于交付时间表、单价及具体应用场景的更多信息。</li>
</ul>
</div>
<div class="glass-card rounded-3xl p-8">
<h3 class="subsection-title mb-4">长期发展路径</h3>
<ul class="timeline timeline-compact timeline-vertical">
<li>
<div class="timeline-start timeline-box bg-slate-800 border-indigo-500/50"><strong>第一阶段 (当前 - 2026):</strong> 工业场景验证与产能爬坡。关键是执行与交付。</div>
<hr class="bg-indigo-500"/>
</li>
<li>
<hr class="bg-indigo-500"/>
<div class="timeline-end timeline-box bg-slate-800 border-indigo-500/50"><strong>第二阶段 (2026 - 2028):</strong> 平台生态初步形成。依托“TT inside”战略关键是生态建设与技术标准化。</div>
<hr class="bg-indigo-500"/>
</li>
<li>
<hr class="bg-indigo-500"/>
<div class="timeline-start timeline-box bg-slate-800 border-indigo-500/50"><strong>第三阶段 (2028以后):</strong> 向服务、特种场景渗透。实现“让机器人随处可见”的愿景关键是AI融合与场景泛化。</div>
</li>
</ul>
</div>
</div>
</section>
<!-- Section 3: Industry Chain Analysis -->
<section class="mb-20">
<h2 class="section-title mb-8 text-center">产业链深度剖析</h2>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Upstream -->
<div class="glass-card rounded-3xl p-8 lg:col-span-1">
<h3 class="subsection-title mb-4">上游:核心零部件</h3>
<p class="text-gray-400 mb-4 text-sm">提供机器人制造所需的基础硬件与材料。</p>
<div class="space-y-3">
<div class="p-3 rounded-lg bg-gray-800/50">
<p class="font-semibold text-white">运动单元</p>
<p class="text-xs text-gray-400">行星滚柱丝杠、谐波减速器、无框力矩电机等。</p>
<p class="text-xs text-indigo-400 mt-1">关键供应商: 瑞迪智驱 (已确认合作测试)</p>
</div>
<div class="p-3 rounded-lg bg-gray-800/50">
<p class="font-semibold text-white">感知/通信单元</p>
<p class="text-xs text-gray-400">传感器、芯片等。</p>
<p class="text-xs text-indigo-400 mt-1">潜在方案: 裕太微 (以太网芯片)</p>
</div>
<div class="p-3 rounded-lg bg-gray-800/50">
<p class="font-semibold text-white">新材料</p>
<p class="text-xs text-gray-400">碳纳米管用于电子皮肤、高强度轻量化骨骼。</p>
<p class="text-xs text-indigo-400 mt-1">潜在供应商: 天奈科技</p>
</div>
</div>
</div>
<!-- Midstream & Downstream -->
<div class="glass-card rounded-3xl p-8 lg:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<h3 class="subsection-title mb-4">中游:核心模块与集成</h3>
<p class="text-gray-400 mb-4 text-sm">负责核心技术整合与机器人整机制造。</p>
<div class="p-4 rounded-lg bg-gray-800/50">
<p class="font-semibold text-white">天太机器人 (核心)</p>
<p class="text-xs text-gray-400">提供核心运动单元(关节模组)和完整解决方案。</p>
</div>
</div>
<div>
<h3 class="subsection-title mb-4">下游:应用场景</h3>
<p class="text-gray-400 mb-4 text-sm">将机器人部署到实际工作环境中。</p>
<div class="space-y-3">
<div class="p-3 rounded-lg bg-gray-800/50">
<p class="font-semibold text-white">工业领域</p>
<p class="text-xs text-gray-400">物流搬运、柔性制造。</p>
</div>
<div class="p-3 rounded-lg bg-gray-800/50">
<p class="font-semibold text-white">服务领域</p>
<p class="text-xs text-gray-400">餐饮、养老护理。</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Section 4: Potential Risks & Challenges -->
<section class="mb-20">
<h2 class="section-title mb-8 text-center">潜在风险与挑战</h2>
<div class="bento-grid">
<div class="glass-card bento-grid-item">
<h3 class="font-bold text-lg mb-2 text-red-400">商业化风险 (最高)</h3>
<p class="text-sm text-gray-400">万台订单的履约是当前最大风险点。签署方背景不明,真实需求存疑。若无法顺利执行,将严重打击市场信心。同时,实际场景的投资回报周期(ROI)仍是未知数。</p>
</div>
<div class="glass-card bento-grid-item">
<h3 class="font-bold text-lg mb-2 text-yellow-400">技术风险</h3>
<p class="text-sm text-gray-400">低成本关节模组的量产一致性、性能和可靠性是巨大挑战。独创的仿人脊椎等结构在长期高强度工况下的耐用性需要时间验证。</p>
</div>
<div class="glass-card bento-grid-item">
<h3 class="font-bold text-lg mb-2 text-orange-400">竞争风险</h3>
<p class="text-sm text-gray-400">率先撞线“规模商用”将刺激特斯拉、优必选等国内外竞争对手加速商业化进程,未来行业竞争将迅速白热化。</p>
</div>
<div class="glass-card bento-grid-item">
<h3 class="font-bold text-lg mb-2 text-cyan-400">信息交叉验证风险</h3>
<p class="text-sm text-gray-400">核心矛盾在于订单透明度。所有信息源均未提供订单的金额、单价、交付周期等关键商业信息,这种缺失是最大的风险信号。</p>
</div>
</div>
</section>
<!-- Section 5: Conclusion & Investment Insights -->
<section class="mb-20">
<h2 class="section-title mb-8 text-center">综合结论与投资启示</h2>
<div class="space-y-8">
<div class="glass-card rounded-3xl p-8">
<h3 class="subsection-title mb-4">最终看法</h3>
<p class="text-gray-300 leading-relaxed">
天太机器人概念已从主题炒作阶段,正式跨入<strong class="text-indigo-400">基本面驱动的早期阶段</strong>。标志是出现了可验证的商业订单和明确的成本下降路径。然而,由于核心订单信息不透明和规模化生产的挑战,目前仍处于<strong class="text-indigo-400">“高预期、高风险”</strong>的并存状态。它更像是一场激动人心的“期权”,潜在回报巨大,但兑现过程充满不确定性。
</p>
</div>
<div class="grid md:grid-cols-2 gap-8">
<div class="glass-card rounded-3xl p-8">
<h3 class="subsection-title mb-4">最具投资价值的细分环节</h3>
<ol class="space-y-3 list-decimal list-inside text-gray-300">
<li><strong class="text-white">直接股权投资:</strong> <span class="tag tag-blue">华民股份</span>是逻辑最顺畅的标的,直接反映天太机器人进展。</li>
<li><strong class="text-white">已验证的核心供应商:</strong> 寻找如<span class="tag tag-green">瑞迪智驱</span>等已证实进入其供应链体系的公司,订单增长确定性高。</li>
<li><strong class="text-white">产业链“卖水人”:</strong> 关注具备通用性的环节,如新材料(<span class="tag tag-blue">天奈科技</span>)或通信芯片(<span class="tag tag-blue">裕太微</span>),风险更分散。</li>
</ol>
</div>
<div class="glass-card rounded-3xl p-8">
<h3 class="subsection-title mb-4">需重点跟踪的关键指标</h3>
<ul class="space-y-3 list-disc list-inside text-gray-300">
<li><strong class="text-white">订单履约情况:</strong> 首批交付的时间和数量。</li>
<li><strong class="text-white">产品价格与性能:</strong> 8月26日发布关节模组的最终定价和客户反馈。</li>
<li><strong class="text-white">产能建设进度:</strong> 为满足万台订单的产能扩张计划。</li>
<li><strong class="text-white">生态合作进展:</strong> 是否有新的知名厂商采用其“TT inside”方案。</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Section 6: Related Stocks Table -->
<section>
<h2 class="section-title mb-8 text-center">相关上市公司梳理</h2>
<div class="overflow-x-auto glass-card rounded-3xl p-4">
<table class="table table-zebra w-full">
<thead class="text-base text-gray-300">
<tr>
<th>股票名称</th>
<th>股票代码</th>
<th class="w-2/5">关联原因</th>
<th>分类</th>
<th>产业链位置</th>
<th>信源</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-indigo-900/50">
<td class="font-semibold text-white">华民股份</td>
<td><a href="https://valuefrontier.cn/company?scode=300345" target="_blank" class="link link-hover text-indigo-400">300345</a></td>
<td>拟投资1亿元认购天太机器人新增注册资本若完成预计持股约8%。此外公司拟与天太机器人成立合资公司持股60%</td>
<td><span class="badge badge-primary badge-outline">参股/合作</span></td>
<td>-</td>
<td><span class="badge badge-ghost">公告</span></td>
</tr>
<tr class="hover:bg-indigo-900/50">
<td class="font-semibold text-white">瑞迪智驱</td>
<td><a href="https://valuefrontier.cn/company?scode=301596" target="_blank" class="link link-hover text-indigo-400">301596</a></td>
<td>行星减速机/谐波减速机与天太机器人合作交流/供货</td>
<td><span class="badge badge-secondary badge-outline">合作</span></td>
<td>行星/谐波减速器</td>
<td><span class="badge badge-ghost">公告</span></td>
</tr>
<tr class="hover:bg-indigo-900/50">
<td class="font-semibold text-white">诺力股份</td>
<td><a href="https://valuefrontier.cn/company?scode=603611" target="_blank" class="link link-hover text-indigo-400">603611</a></td>
<td>子公司与天太机器人有技术和业务上的接触与探讨</td>
<td><span class="badge badge-secondary badge-outline">合作</span></td>
<td>-</td>
<td><span class="badge badge-ghost">互动</span></td>
</tr>
<tr class="opacity-70 hover:bg-slate-800/50">
<td>北特科技</td>
<td><a href="https://valuefrontier.cn/company?scode=603009" target="_blank" class="link link-hover text-gray-400">603009</a></td>
<td class="text-gray-400">滚珠丝杠产业链相关个股 (未查到与天太机器人直接关联)</td>
<td><span class="badge badge-accent badge-outline">产业链</span></td>
<td>滚珠丝杠</td>
<td>-</td>
</tr>
<tr class="opacity-70 hover:bg-slate-800/50">
<td>五洲新春</td>
<td><a href="https://valuefrontier.cn/company?scode=603667" target="_blank" class="link link-hover text-gray-400">603667</a></td>
<td class="text-gray-400">滚珠丝杠产业链相关个股 (未查到与天太机器人直接关联)</td>
<td><span class="badge badge-accent badge-outline">产业链</span></td>
<td>滚珠丝杠</td>
<td>-</td>
</tr>
<tr class="opacity-70 hover:bg-slate-800/50">
<td>贝斯特</td>
<td><a href="https://valuefrontier.cn/company?scode=300580" target="_blank" class="link link-hover text-gray-400">300580</a></td>
<td class="text-gray-400">滚珠丝杠产业链相关个股 (未查到与天太机器人直接关联)</td>
<td><span class="badge badge-accent badge-outline">产业链</span></td>
<td>滚珠丝杠</td>
<td>-</td>
</tr>
<tr class="opacity-70 hover:bg-slate-800/50">
<td>绿的谐波</td>
<td><a href="https://valuefrontier.cn/company?scode=688017" target="_blank" class="link link-hover text-gray-400">688017</a></td>
<td class="text-gray-400">谐波减速器产业链相关个股 (未查到与天太机器人直接关联)</td>
<td><span class="badge badge-accent badge-outline">产业链</span></td>
<td>谐波减速器</td>
<td>-</td>
</tr>
<tr class="opacity-70 hover:bg-slate-800/50">
<td>鸣志电器</td>
<td><a href="https://valuefrontier.cn/company?scode=603728" target="_blank" class="link link-hover text-gray-400">603728</a></td>
<td class="text-gray-400">无框力矩电机产业链相关个股 (未查到与天太机器人直接关联)</td>
<td><span class="badge badge-accent badge-outline">产业链</span></td>
<td>无框力矩电机</td>
<td>-</td>
</tr>
<tr class="opacity-70 hover:bg-slate-800/50">
<td>昊志机电</td>
<td><a href="https://valuefrontier.cn/company?scode=300503" target="_blank" class="link link-hover text-gray-400">300503</a></td>
<td class="text-gray-400">谐波减速器/无框力矩电机产业链相关个股 (未查到与天太机器人直接关联)</td>
<td><span class="badge badge-accent badge-outline">产业链</span></td>
<td>谐波减速器/无框力矩电机</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
<script type="text/javascript">
var chartDom = document.getElementById('timeline-chart');
var myChart = echarts.init(chartDom, 'dark');
var option;
const data = [
{ name: '技术奠基期', value: [new Date('2014-01-01'), new Date('2024-02-20')], itemStyle: { color: '#3b82f6' } },
{ name: '资本与产业验证期', value: [new Date('2025-04-19'), new Date('2025-06-12')], itemStyle: { color: '#8b5cf6' } },
{ name: '商业化引爆期', value: [new Date('2025-08-20'), new Date('2025-08-26')], itemStyle: { color: '#ec4899' } }
];
const events = [
{ name: '成立', value: ['2014-01-01', '天太机器人成立'], itemStyle: { color: '#3b82f6' } },
{ name: '发布仿人脊椎机器人', value: ['2024-02-20', '发布仿人脊椎通用型机器人'], itemStyle: { color: '#3b82f6' } },
{ name: '“天工”马拉松夺冠', value: ['2025-04-19', '“天工Ultra”马拉松夺冠'], itemStyle: { color: '#8b5cf6' } },
{ name: '华民股份拟投资', value: ['2025-06-12', '华民股份拟投资1亿元'], itemStyle: { color: '#8b5cf6' } },
{ name: '签署万台订单', value: ['2025-08-20', '签署全球首个10000台订单'], itemStyle: { color: '#ec4899' } },
{ name: '预告新关节模组', value: ['2025-08-26', '预告发布“三位数”关节模组'], itemStyle: { color: '#ec4899' } },
];
option = {
backgroundColor: 'transparent',
tooltip: {
formatter: function (params) {
if(params.seriesName === '关键事件'){
return params.data.value[1];
}
return params.name;
}
},
title: {
text: '天太机器人发展时间轴',
left: 'center',
textStyle: {
color: '#e5e7eb'
}
},
grid: {
height: '60%'
},
xAxis: {
type: 'time',
axisLine: { lineStyle: { color: '#4b5563' } },
axisLabel: { color: '#9ca3af' }
},
yAxis: {
data: ['发展阶段', '关键事件'],
axisLine: { lineStyle: { color: '#4b5563' } },
axisLabel: { color: '#9ca3af' }
},
series: [
{
type: 'custom',
renderItem: function (params, api) {
var categoryIndex = api.value(0);
var start = api.coord([api.value(1), categoryIndex]);
var end = api.coord([api.value(2), categoryIndex]);
var height = api.size([0, 1])[1] * 0.6;
var rectShape = echarts.graphic.clipRectByRect(
{ x: start[0], y: start[1] - height / 2, width: end[0] - start[0], height: height },
{ x: params.coordSys.x, y: params.coordSys.y, width: params.coordSys.width, height: params.coordSys.height }
);
return rectShape && { type: 'rect', shape: rectShape, style: api.style() };
},
itemStyle: {
opacity: 0.8
},
encode: {
x: [1, 2],
y: 0
},
data: data.map((item, index) => ({ name: item.name, value: [0, item.value[0], item.value[1]], itemStyle: item.itemStyle }))
},
{
name: '关键事件',
type: 'scatter',
symbol: 'pin',
symbolSize: 30,
label: {
show: true,
position: 'top',
formatter: '{b}',
color: '#d1d5db',
fontSize: 10,
backgroundColor: 'rgba(0,0,0,0.3)',
padding: [3, 5],
borderRadius: 3
},
yAxisIndex: 0,
data: events.map(event => ({ name: event.name, value: [event.value[0], 1, event.value[1]], itemStyle: event.itemStyle }))
}
]
};
option && myChart.setOption(option);
window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>