454 lines
30 KiB
HTML
454 lines
30 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>深度行研 | 概念解析：诡秘之主</title>
|
||
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.11.1/dist/full.min.css" rel="stylesheet" type="text/css" />
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<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>
|
||
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
|
||
|
||
body {
|
||
font-family: 'Noto Sans SC', sans-serif;
|
||
background-color: #0c0a15;
|
||
color: #e0e0e0;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
.glass-card {
|
||
background: rgba(22, 22, 34, 0.4);
|
||
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(129, 140, 248, 0.5);
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.bento-grid {
|
||
display: grid;
|
||
gap: 1.5rem;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
}
|
||
|
||
.glow-heading {
|
||
text-shadow: 0 0 8px rgba(167, 139, 250, 0.6), 0 0 20px rgba(167, 139, 250, 0.4);
|
||
}
|
||
|
||
.bg-gradient-space {
|
||
background-image: linear-gradient(135deg, #0c0a15 0%, #1a1036 50%, #0c0a15 100%);
|
||
}
|
||
|
||
.bg-orb {
|
||
position: fixed;
|
||
border-radius: 9999px;
|
||
filter: blur(150px);
|
||
opacity: 0.15;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.table thead th, .table tbody td {
|
||
border-bottom-color: rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.table-zebra tbody tr:nth-child(even) {
|
||
background-color: rgba(255, 255, 255, 0.02);
|
||
}
|
||
|
||
.tab-active {
|
||
background-color: rgba(129, 140, 248, 0.2);
|
||
border-color: rgba(129, 140, 248, 0.5);
|
||
color: #e0e0e0;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body class="bg-gradient-space min-h-screen">
|
||
<!-- Background Orbs -->
|
||
<div class="bg-orb bg-violet-500" style="width: 800px; height: 800px; top: -20%; left: -20%;"></div>
|
||
<div class="bg-orb bg-cyan-400" style="width: 700px; height: 700px; bottom: -30%; right: -15%;"></div>
|
||
<div class="bg-orb bg-pink-500" style="width: 600px; height: 600px; top: 10%; right: 5%;"></div>
|
||
|
||
<div class="container mx-auto p-4 md:p-8 relative z-10">
|
||
|
||
<header class="text-center mb-12">
|
||
<h1 class="text-4xl md:text-6xl font-bold glow-heading mb-4 bg-clip-text text-transparent bg-gradient-to-r from-purple-400 via-pink-400 to-cyan-300">
|
||
深度行研 · 概念解析：诡秘之主
|
||
</h1>
|
||
<p class="text-sm text-gray-400 max-w-4xl mx-auto">
|
||
北京价值前沿科技有限公司 AI投研agent：“价小前投研”进行投研呈现。本报告基于多源公开信息进行智能分析与合成，旨在提供研究参考，不构成任何投资建议，投资需谨慎。
|
||
</p>
|
||
</header>
|
||
|
||
<main class="space-y-8">
|
||
<!-- Insight Section -->
|
||
<section id="insight" class="glass-card rounded-3xl p-6 md:p-8">
|
||
<h2 class="text-3xl font-bold mb-6 border-l-4 border-violet-400 pl-4 glow-heading">核心 Insight 分析</h2>
|
||
|
||
<div class="space-y-8">
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-3 text-cyan-300">0. 概念事件总览</h3>
|
||
<p class="text-gray-300 leading-relaxed">
|
||
`诡秘之主`概念的核心是围绕阅文集团旗下顶级网络文学IP《诡秘之主》的全产业链商业化开发。该IP拥有庞大且忠实的全球粉丝基础，构成了其商业价值的基石。此轮概念的发酵，标志着该IP已从单一的文学作品，正式进入以<strong class="text-yellow-300">动画为核心催化剂，联动游戏、衍生品等多业态协同变现</strong>的价值释放加速期。
|
||
</p>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-4 text-cyan-300">核心催化事件时间轴</h3>
|
||
<div id="timeline-chart" class="w-full h-96"></div>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-3 text-cyan-300">1. 核心观点摘要</h3>
|
||
<p class="text-gray-300 leading-relaxed border-l-2 border-cyan-400 pl-4 italic">
|
||
`诡秘之主`概念正处在一个从<strong class="text-yellow-300">“价值预期”向“业绩兑现”</strong>过渡的关键阶段。其核心驱动力源于IP版权方阅文集团所推行的<strong class="text-yellow-300">“以高品质动画为放大器”的全产业链协同开发战略</strong>。随着2025年动画全球上线和与《王者荣耀》的联动，该IP已成功完成初期热度引爆和用户破圈，未来潜力将取决于游戏改编的成功与否以及衍生品业务的持续放量。
|
||
</p>
|
||
</div>
|
||
|
||
<div x-data="{ open: false }">
|
||
<h3 class="text-xl font-semibold mb-3 text-cyan-300 cursor-pointer" @click="open = !open">
|
||
2. 核心逻辑与市场认知分析 <span x-text="open ? '[-]' : '[+]'">[+]</span>
|
||
</h3>
|
||
<div x-show="open" x-collapse.duration.500ms class="space-y-4 text-gray-300 pl-4 border-l-2 border-gray-700">
|
||
<p><strong>核心驱动力:</strong> 概念的根本逻辑是顶级IP的工业化、全方位价值变现。由三大支柱支撑：</p>
|
||
<ul class="list-disc list-inside space-y-2 pl-4">
|
||
<li><strong>IP基石:</strong> 《诡秘之主》本身拥有巨大的粉丝存量和全球影响力，是所有商业化的前提。</li>
|
||
<li><strong>战略引擎 (阅文集团):</strong> 明确了“IP全链条开发（文学→动画→游戏→衍生品）”的成熟商业模式。动画是放大IP影响力、承接后续变现的战略中枢。</li>
|
||
<li><strong>技术赋能 (AI):</strong> 提及利用AI技术（如文生视频）辅助动画制作，有望缩短开发周期、降低成本，高效转化IP储备。</li>
|
||
</ul>
|
||
<p><strong>市场热度与情绪:</strong> 市场关注度自2025年6月动画上线后急剧升温，情绪高度乐观。动画上线导致B站服务器一度崩溃，《王者荣耀》联动推出“史上最丰富”周边，均为热度直接证据。</p>
|
||
<p><strong>预期差分析:</strong></p>
|
||
<ul class="list-disc list-inside space-y-2 pl-4">
|
||
<li><strong>对协同效应的低估:</strong> 市场可能未充分预期到动画、游戏、衍生品精准节奏共振带来的“乘数效应”，25H1衍生品GMV的爆发式增长（接近去年全年）是其体现。</li>
|
||
<li><strong>对游戏化进程的忽视:</strong> 市场焦点在即期业绩，可能尚未充分定价远期的游戏爆款潜力。三七互娱已明确将其作为核心IP储备。</li>
|
||
<li><strong>对信息源可靠性的甄别不足:</strong> 部分关联个股信息来源为网络传闻，可靠性存疑，市场情绪高涨时可能混淆信息的确定性。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div x-data="{ open: false }">
|
||
<h3 class="text-xl font-semibold mb-3 text-cyan-300 cursor-pointer" @click="open = !open">
|
||
3. 关键催化剂与未来发展路径 <span x-text="open ? '[-]' : '[+]'">[+]</span>
|
||
</h3>
|
||
<div x-show="open" x-collapse.duration.500ms class="space-y-4 text-gray-300 pl-4 border-l-2 border-gray-700">
|
||
<p><strong>近期催化剂 (未来3-6个月):</strong></p>
|
||
<ul class="list-disc list-inside space-y-2 pl-4">
|
||
<li>《王者荣耀》联动第二期上线。</li>
|
||
<li>动画第一季收官数据公布与第二季定档。</li>
|
||
<li>三七互娱游戏开发进度披露（首曝、测试、版号信息）。</li>
|
||
<li>阅文集团Q3或年报中IP衍生品GMV数据验证。</li>
|
||
</ul>
|
||
<p><strong>长期发展路径:</strong></p>
|
||
<ol class="list-decimal list-inside space-y-2 pl-4">
|
||
<li><strong>(已完成) IP积累与战略规划</strong>。</li>
|
||
<li><strong>(当前) 动画引爆与多点变现</strong>：以动画为中心，实现第一波商业价值兑现。</li>
|
||
<li><strong>(未来1-3年) 游戏上线与价值巅峰</strong>：精品游戏上线，若成爆款将把IP价值推向顶峰。</li>
|
||
<li><strong>(长期) IP宇宙构建与长线运营</strong>：开发续作、真人影视剧，打造持久商业帝国。</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-4 text-cyan-300">4. 产业链与核心公司深度剖析</h3>
|
||
<div class="bento-grid">
|
||
<div class="glass-card rounded-2xl p-4 col-span-1 md:col-span-2">
|
||
<h4 class="font-bold text-lg text-violet-300 mb-2">上游 (IP版权方)</h4>
|
||
<p><strong class="text-white">阅文集团 (00772.HK):</strong> 绝对核心，拥有IP所有权和开发主导权，是领导者与最纯粹标的。</p>
|
||
</div>
|
||
<div class="glass-card rounded-2xl p-4 col-span-1 md:col-span-3">
|
||
<h4 class="font-bold text-lg text-violet-300 mb-2">中游 (IP开发与授权)</h4>
|
||
<ul class="list-disc list-inside space-y-1 text-sm">
|
||
<li><strong>动画开发:</strong> 上海电影 (旗下上影元，需验证)</li>
|
||
<li><strong>游戏开发:</strong> 三七互娱 (已获授权，高潜力)</li>
|
||
<li><strong>衍生品开发:</strong> 广博股份 (已获授权，稳健执行者)、姚记科技/奥飞娱乐 (预期)</li>
|
||
<li><strong>数字阅读:</strong> 掌阅科技 (电子版发行权，需验证)</li>
|
||
</ul>
|
||
</div>
|
||
<div class="glass-card rounded-2xl p-4 col-span-1 md:col-span-2">
|
||
<h4 class="font-bold text-lg text-violet-300 mb-2">下游 (发行与渠道)</h4>
|
||
<ul class="list-disc list-inside space-y-1 text-sm">
|
||
<li><strong>视频平台:</strong> Bilibili ( implied )</li>
|
||
<li><strong>游戏平台:</strong> 腾讯《王者荣耀》</li>
|
||
<li><strong>零售渠道:</strong> 日本茑屋书店、阅文好物等</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div x-data="{ open: false }">
|
||
<h3 class="text-xl font-semibold mb-3 text-red-400 cursor-pointer" @click="open = !open">
|
||
5. 潜在风险与挑战 <span x-text="open ? '[-]' : '[+]'">[+]</span>
|
||
</h3>
|
||
<div x-show="open" x-collapse.duration.500ms class="space-y-4 text-gray-300 pl-4 border-l-2 border-red-500">
|
||
<ul class="list-disc list-inside space-y-2">
|
||
<li><strong>技术风险 (改编风险):</strong> 世界观宏大，改编难度极高，若质量不达预期可能引发口碑反噬。</li>
|
||
<li><strong>商业化风险:</strong> 高热度能否有效转化为持续付费意愿未知；各环节推出节奏失调可能影响变现效果。</li>
|
||
<li><strong>政策与竞争风险:</strong> 游戏版号获取存在不确定性；阅文内部多头部IP存在资源竞争。</li>
|
||
<li><strong>信息交叉验证风险:</strong> 部分关联方信息源于网络传闻，缺乏官方证实，存在炒作风险。同时，需警惕原始数据中的噪音（如将概念与无关行业错误关联）。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-3 text-cyan-300">6. 综合结论与投资启示</h3>
|
||
<div class="space-y-4">
|
||
<p class="text-gray-300 leading-relaxed">
|
||
`诡秘之主`概念已成功从主题炒作阶段，过渡到由动画热播驱动的基本面兑现初期阶段。2025年是其商业价值的集中爆发年，但真正的“主升浪”取决于游戏改编能否成功。
|
||
</p>
|
||
<div>
|
||
<h4 class="font-semibold text-violet-300">投资价值排序:</h4>
|
||
<ol class="list-decimal list-inside space-y-1 text-gray-300 pl-4">
|
||
<li><strong>阅文集团 (IP版权方):</strong> 确定性最高，分享全产业链收益，是长期跟踪的核心。</li>
|
||
<li><strong>三七互娱 (游戏开发方):</strong> 潜在弹性最大，但风险和不确定性也最高，属高风险高回报的观察对象。</li>
|
||
<li><strong>广博股份 (衍生品开发方):</strong> 短期受益最直接，业绩兑现最快，逻辑清晰，适合事件驱动型投资。</li>
|
||
</ol>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-semibold text-violet-300">需重点跟踪的关键指标:</h4>
|
||
<ul class="list-disc list-inside space-y-1 text-gray-300 pl-4 text-sm">
|
||
<li><strong>内容热度指标:</strong> 动画播放量、社交平台评分及讨论热度。</li>
|
||
<li><strong>商业化业绩指标:</strong> 阅文集团IP运营业务收入及毛利率，特别是衍生品GMV的季度环比增长。</li>
|
||
<li><strong>游戏开发进度指标:</strong> 三七互娱关于游戏的版号获取、测试时间表、预约量等。</li>
|
||
<li><strong>衍生品销售指标:</strong> 广博股份相关产品销售额和利润贡献。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Data Sources Section -->
|
||
<section id="data-sources" class="glass-card rounded-3xl p-6 md:p-8" x-data="{ tab: 'news' }">
|
||
<h2 class="text-3xl font-bold mb-6 border-l-4 border-violet-400 pl-4 glow-heading">核心信息源摘要</h2>
|
||
|
||
<div class="tabs tabs-boxed bg-black/20 mb-6">
|
||
<a class="tab" :class="{ 'tab-active': tab === 'news' }" @click.prevent="tab = 'news'">新闻数据</a>
|
||
<a class="tab" :class="{ 'tab-active': tab === 'roadshows' }" @click.prevent="tab = 'roadshows'">路演纪要</a>
|
||
<a class="tab" :class="{ 'tab-active': tab === 'reports' }" @click.prevent="tab = 'reports'">研报勘误</a>
|
||
</div>
|
||
|
||
<div x-show="tab === 'news'" class="space-y-4 text-gray-300 text-sm">
|
||
<div class="p-4 border border-gray-700 rounded-xl bg-black/20">
|
||
<p class="font-bold text-base text-cyan-300 mb-2">核心动态 (2025年)</p>
|
||
<ul class="list-disc list-inside space-y-2">
|
||
<li><strong>动画全球上线 (6月28日):</strong> 改编动画以7国语言在全球190个国家同步播出，被誉为“海外受众群体最多的中国小说”改编作品。</li>
|
||
<li><strong>IP衍生品开发:</strong> 广博股份已获授权并展出毛绒玩具、文具、谷子等产品。阅文集团将其列为衍生品业务的“主力IP”，并在多个展会重点陈列。</li>
|
||
<li><strong>国际市场拓展:</strong> 阅文集团携手日本茑屋书店开设快闪店，推动IP进入日本市场。</li>
|
||
<li><strong>顶级游戏联动 (8月18日):</strong> 与《王者荣耀》进行IP联动，上线联动皮肤及史上最丰富的同步周边，并计划推出第二期。</li>
|
||
<li><strong>业绩初步验证 (9月7日):</strong> 25H1阅文集团IP衍生品GMV达4.8亿元，接近2024年全年水平，《诡秘之主》为核心贡献IP之一。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div x-show="tab === 'roadshows'" class="space-y-4 text-gray-300 text-sm">
|
||
<div class="p-4 border border-gray-700 rounded-xl bg-black/20">
|
||
<p class="font-bold text-base text-cyan-300 mb-2">关键公司路演信息</p>
|
||
<ul class="list-disc list-inside space-y-3">
|
||
<li><strong>广博股份 (2025-01-06):</strong> 明确表示“2025上半年将推出《诡秘之主》等IP产品”，证实衍生品开发落地。</li>
|
||
<li><strong>三七互娱 (2025-09-26):</strong> 将《诡秘之主》列为公司“自有/授权 IP”储备，用于“保障内容差异化与长线运营”，证实游戏化路径。</li>
|
||
<li><strong>阅文集团 (中国文学) (2024):</strong> 多次路演中确认《诡秘之主》是其游戏领域的“储备项目”，并阐述其“IP全链条开发 (文学→影视→游戏→衍生品)”的战略，强调塑造“人物IP”的重要性，以及利用AI技术加速动画制作。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div x-show="tab === 'reports'" class="space-y-4 text-gray-300 text-sm">
|
||
<div role="alert" class="alert bg-yellow-900/50 border-yellow-500">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" 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">多份输入研报（涉及TWS耳机、紫金矿业、钛白粉、碳酸锂行业）中使用了“诡秘之主”或相似词汇，但均为对行业复杂竞争态势的<strong class="text-white">文学化比喻</strong>，与本报告所分析的《诡秘之主》IP概念<strong class="text-white">无直接关联</strong>。为确保分析的准确性和聚焦性，这些无关信息已被剔除。</div>
|
||
</div>
|
||
</div>
|
||
<div role="alert" class="alert bg-red-900/50 border-red-500 mt-4">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" 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">原始数据中存在一条将“诡秘之主”与“日本水产进口概念(核辐射检测)”并列的记录，经判定为<strong class="text-white">数据整理或录入错误</strong>，属无效噪音，已予以剔除。</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<!-- Stock Table Section -->
|
||
<section id="stock-list" class="glass-card rounded-3xl p-6 md:p-8">
|
||
<h2 class="text-3xl font-bold mb-6 border-l-4 border-violet-400 pl-4 glow-heading">核心标的与产业链图谱</h2>
|
||
<div class="overflow-x-auto">
|
||
<table class="table table-zebra w-full">
|
||
<thead>
|
||
<tr>
|
||
<th class="text-base text-white">公司名称 (代码)</th>
|
||
<th class="text-base text-white">核心关联逻辑</th>
|
||
<th class="text-base text-white">消息来源 / 分类</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="font-bold">广博股份 (<a href="https://valuefrontier.cn/company?scode=002103" target="_blank" class="link link-hover text-cyan-400">002103</a>)</td>
|
||
<td>明确获得《诡秘之主》IP正版授权，并将其纳入公司的IP衍生品开发体系中。</td>
|
||
<td><span class="badge badge-success badge-outline">公司公告/路演</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="font-bold">三七互娱 (<a href="https://valuefrontier.cn/company?scode=002555" target="_blank" class="link link-hover text-cyan-400">002555</a>)</td>
|
||
<td>获得了《诡秘之主》等知识产权的游戏改编权，作为核心IP储备。</td>
|
||
<td><span class="badge badge-success badge-outline">公司公告/路演</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="font-bold">上海电影 (<a href="https://valuefrontier.cn/company?scode=601595" target="_blank" class="link link-hover text-cyan-400">601595</a>)</td>
|
||
<td>旗下上影元收购阅文部分IP授权，参与《诡秘之主》动画及周边开发。</td>
|
||
<td><span class="badge badge-warning badge-outline">网络资料 (需验证)</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="font-bold">掌阅科技 (<a href="https://valuefrontier.cn/company?scode=603533" target="_blank" class="link link-hover text-cyan-400">603533</a>)</td>
|
||
<td>通过阅文集团授权，拥有《诡秘之主》电子版的制作与发行权。</td>
|
||
<td><span class="badge badge-warning badge-outline">网络传闻 (需验证)</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="font-bold">奥飞娱乐 (<a href="https://valuefrontier.cn/company?scode=002292" target="_blank" class="link link-hover text-cyan-400">002292</a>)</td>
|
||
<td>潮玩手办授权预期。</td>
|
||
<td><span class="badge badge-info badge-outline">潜在受益</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="font-bold">姚记科技 (<a href="https://valuefrontier.cn/company?scode=002605" target="_blank" class="link link-hover text-cyan-400">002605</a>)</td>
|
||
<td>卡牌IP销售预期。</td>
|
||
<td><span class="badge badge-info badge-outline">潜在受益</span></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
var chartDom = document.getElementById('timeline-chart');
|
||
var myChart = echarts.init(chartDom, 'dark'); // Use dark theme
|
||
var option;
|
||
|
||
const timelineData = [
|
||
{ date: '2024-03-18', event: '阅文路演: 阐述IP全链条开发模式' },
|
||
{ date: '2025-01-06', event: '广博股份路演: 宣布推出IP产品' },
|
||
{ date: '2025-05-07', event: '新闻: 宣布与日本茑屋书店合作' },
|
||
{ date: '2025-06-12', event: '新闻: 广博股份展出衍生品实物' },
|
||
{ date: '2025-06-28', event: '核心事件: 动画全球同步播出' },
|
||
{ date: '2025-08-16', event: '新闻: 动画热播导致B站服务器过载' },
|
||
{ date: '2025-08-18', event: '核心事件: 与《王者荣耀》联动' },
|
||
{ date: '2025-09-07', event: '新闻: 25H1衍生品GMV达4.8亿' },
|
||
{ date: '2025-09-26', event: '三七互娱路演: 确认游戏化储备' }
|
||
];
|
||
|
||
const dates = timelineData.map(item => item.date);
|
||
const events = timelineData.map(item => item.event);
|
||
|
||
option = {
|
||
backgroundColor: 'transparent',
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
formatter: function (params) {
|
||
const dataIndex = params[0].dataIndex;
|
||
return `<b>${timelineData[dataIndex].date}</b><br/>${timelineData[dataIndex].event}`;
|
||
},
|
||
backgroundColor: 'rgba(22, 22, 34, 0.8)',
|
||
borderColor: 'rgba(129, 140, 248, 0.5)',
|
||
textStyle: {
|
||
color: '#e0e0e0'
|
||
}
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: dates,
|
||
axisTick: {
|
||
alignWithLabel: true
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255, 0.3)'
|
||
}
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
show: false,
|
||
max: 10
|
||
},
|
||
series: [{
|
||
name: '事件',
|
||
type: 'custom',
|
||
renderItem: function (params, api) {
|
||
var yValue = api.value(0) % 2 === 0 ? 3 : 6;
|
||
var start = api.coord([api.value(0), yValue]);
|
||
var size = api.size([1, 1]);
|
||
|
||
return {
|
||
type: 'group',
|
||
children: [{
|
||
type: 'line',
|
||
shape: {
|
||
x1: start[0],
|
||
y1: api.coord([api.value(0), 0])[1],
|
||
x2: start[0],
|
||
y2: start[1]
|
||
},
|
||
style: {
|
||
stroke: 'rgba(167, 139, 250, 0.7)'
|
||
}
|
||
}, {
|
||
type: 'circle',
|
||
shape: {
|
||
cx: start[0],
|
||
cy: start[1],
|
||
r: 6
|
||
},
|
||
style: {
|
||
fill: timelineData[params.dataIndex].event.includes('核心事件') ? '#f87171' : '#60a5fa'
|
||
}
|
||
}, {
|
||
type: 'text',
|
||
style: {
|
||
text: events[params.dataIndex],
|
||
x: start[0],
|
||
y: yValue === 3 ? start[1] - 20 : start[1] + 20,
|
||
textVerticalAlign: yValue === 3 ? 'bottom' : 'top',
|
||
textAlign: 'center',
|
||
fill: '#e0e0e0',
|
||
fontSize: 12
|
||
}
|
||
}]
|
||
};
|
||
},
|
||
data: timelineData.map((_, index) => index)
|
||
}],
|
||
dataZoom: [{
|
||
type: 'inside',
|
||
start: 0,
|
||
end: 100
|
||
}],
|
||
};
|
||
|
||
myChart.setOption(option);
|
||
window.addEventListener('resize', function () {
|
||
myChart.resize();
|
||
});
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
|
||
</html> |