393 lines
27 KiB
HTML
393 lines
27 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>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.10.1/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>
|
||
@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: #0a0a0f;
|
||
color: #e0e0e0;
|
||
overflow-x: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
.glass-card {
|
||
background: rgba(15, 23, 42, 0.4);
|
||
backdrop-filter: blur(20px);
|
||
-webkit-backdrop-filter: blur(20px);
|
||
border: 1px solid rgba(56, 189, 248, 0.2);
|
||
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);
|
||
}
|
||
|
||
.glow-text {
|
||
text-shadow: 0 0 8px rgba(56, 189, 248, 0.7), 0 0 12px rgba(56, 189, 248, 0.5);
|
||
}
|
||
|
||
.glow-border {
|
||
box-shadow: 0 0 15px rgba(56, 189, 248, 0.15);
|
||
}
|
||
|
||
#cursor-glow {
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
width: 800px;
|
||
height: 800px;
|
||
background: radial-gradient(circle, rgba(29, 78, 216, 0.15) 0%, rgba(29, 78, 216, 0) 60%);
|
||
border-radius: 50%;
|
||
pointer-events: none;
|
||
transform: translate(-50%, -50%);
|
||
transition: all 0.1s ease-out;
|
||
z-index: -1;
|
||
}
|
||
|
||
.bento-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(12, 1fr);
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
.grid-item {
|
||
border-radius: 1.5rem;
|
||
padding: 1.5rem;
|
||
min-height: 200px;
|
||
}
|
||
|
||
[x-cloak] { display: none !important; }
|
||
|
||
</style>
|
||
</head>
|
||
<body class="min-h-screen bg-slate-950">
|
||
<div id="cursor-glow"></div>
|
||
|
||
<div class="container mx-auto p-4 sm:p-6 lg:p-8">
|
||
|
||
<header class="text-center py-12">
|
||
<h1 class="text-4xl md:text-6xl font-bold glow-text bg-gradient-to-r from-sky-400 to-cyan-300 bg-clip-text text-transparent">
|
||
卡游文创玩具 (Kayou)
|
||
</h1>
|
||
<h2 class="text-2xl md:text-3xl font-light text-slate-300 mt-4">深度投研报告</h2>
|
||
<p class="mt-8 text-sm text-slate-500 max-w-4xl mx-auto">
|
||
北京价值前沿科技有限公司 AI投研agent：“价小前投研” 进行投研呈现，本报告为AI合成数据，投资需谨慎。
|
||
</p>
|
||
</header>
|
||
|
||
<main class="space-y-8">
|
||
<!-- Bento Grid Section 1: Overview & Financials -->
|
||
<section class="bento-grid">
|
||
<div class="grid-item glass-card col-span-12 md:col-span-7 flex flex-col justify-between">
|
||
<div>
|
||
<h3 class="text-2xl font-bold text-sky-300 mb-4">核心观点摘要 (Core Insight)</h3>
|
||
<p class="text-slate-300 leading-relaxed">
|
||
“卡游文创玩具”概念本质是<strong class="text-cyan-300">一个由超级IP驱动、被强大线下渠道放大的消费品现象</strong>，正处在从单一爆款依赖向平台化、全球化转型的关键十字路口。其核心驱动力在于对IP的情感价值挖掘和对青少年社交需求的精准满足。未来潜力取决于其能否成功复制爆款IP的打造能力、拓展非卡牌品类，以及在全球市场验证其商业模式。
|
||
</p>
|
||
</div>
|
||
<div class="mt-6 p-4 rounded-xl bg-slate-900/50 border border-slate-700">
|
||
<h4 class="font-semibold text-sky-400">IPO 进程</h4>
|
||
<ul class="list-disc list-inside text-sm text-slate-400 mt-2 space-y-1">
|
||
<li><span class="font-bold">状态:</span> 2025-04-14向港交所重新提交招股书，审核中。</li>
|
||
<li><span class="font-bold">融资目标:</span> 约5亿美元。</li>
|
||
<li><span class="font-bold">关键时限:</span> 必须在 <strong class="text-amber-400">2025年10月14日</strong> 前完成IPO，否则招股书失效。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="grid-item glass-card col-span-12 md:col-span-5 flex flex-col">
|
||
<h3 class="text-2xl font-bold text-sky-300 mb-4">关键财务指标</h3>
|
||
<div id="revenue-chart" class="w-full h-full min-h-[250px]"></div>
|
||
</div>
|
||
<div class="grid-item glass-card col-span-12 md:col-span-5 flex flex-col">
|
||
<h3 class="text-2xl font-bold text-sky-300 mb-4">2024年业务构成</h3>
|
||
<div id="composition-chart" class="w-full h-full min-h-[250px]"></div>
|
||
</div>
|
||
<div class="grid-item glass-card col-span-12 md:col-span-7">
|
||
<h3 class="text-2xl font-bold text-sky-300 mb-4">市场地位与核心驱动力</h3>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
|
||
<div class="p-3 rounded-lg bg-slate-900/50">
|
||
<h4 class="font-semibold text-cyan-400">绝对龙头地位</h4>
|
||
<ul class="mt-2 text-slate-400 space-y-1">
|
||
<li>集换式卡牌市占率: <strong class="text-white">71.1%</strong></li>
|
||
<li>泛娱乐玩具市占率: <strong class="text-white">21.5%</strong></li>
|
||
<li>泛娱乐产品市占率: <strong class="text-white">13.3%</strong></li>
|
||
</ul>
|
||
</div>
|
||
<div class="p-3 rounded-lg bg-slate-900/50">
|
||
<h4 class="font-semibold text-cyan-400">核心驱动力</h4>
|
||
<ul class="mt-2 text-slate-400 list-disc list-inside space-y-1">
|
||
<li>IP价值深度再创造</li>
|
||
<li>渠道即护城河 (80万+终端)</li>
|
||
<li>成瘾性产品设计 ("盲盒"玩法)</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="mt-4 p-3 rounded-lg bg-slate-900/50">
|
||
<h4 class="font-semibold text-cyan-400 mb-2">市场情绪与预期差</h4>
|
||
<p class="text-slate-400 text-sm leading-relaxed">市场呈现“<strong class="text-green-400">乐观与疑虑并存</strong>”的分裂情绪。乐观面聚焦百亿营收与IPO预期；疑虑面则关注<strong class="text-red-400">IP生命周期短、爆款依赖度高、Q1业绩波动</strong>等核心问题。市场对增长可持续性的线性外推与公司经营的强周期性之间存在巨大预期差。</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Bento Grid Section 2: Strategy & Risks -->
|
||
<section class="bento-grid">
|
||
<div class="grid-item glass-card col-span-12 md:col-span-6 lg:col-span-4">
|
||
<h3 class="text-2xl font-bold text-sky-300 mb-4">关键催化剂</h3>
|
||
<div class="space-y-4">
|
||
<div>
|
||
<h4 class="font-semibold text-cyan-400">近期 (3-6个月)</h4>
|
||
<ul class="list-disc list-inside text-sm text-slate-400 mt-2 space-y-1">
|
||
<li>港股IPO成功聆讯及上市</li>
|
||
<li>美国市场初期销售数据公布</li>
|
||
<li>新爆款IP发布 (如名侦探柯南)</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-semibold text-cyan-400">长期发展路径</h4>
|
||
<ol class="list-decimal list-inside text-sm text-slate-400 mt-2 space-y-1">
|
||
<li><strong class="text-white">阶段一 (当前):</strong> IP授权 + 渠道为王</li>
|
||
<li><strong class="text-white">阶段二 (进行中):</strong> 品类扩张 + 全球化</li>
|
||
<li><strong class="text-white">阶段三 (远景):</strong> 自有IP + TCG生态</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="grid-item glass-card col-span-12 md:col-span-6 lg:col-span-8">
|
||
<h3 class="text-2xl font-bold text-sky-300 mb-4">潜在风险与挑战</h3>
|
||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 text-sm">
|
||
<div class="p-4 rounded-lg bg-red-900/20 border border-red-500/30">
|
||
<h4 class="font-semibold text-red-300">商业化风险</h4>
|
||
<ul class="list-disc list-inside text-slate-400 mt-2 space-y-1">
|
||
<li>对头部IP高度依赖 (五大IP占收入86%)</li>
|
||
<li>核心IP授权2029年到期</li>
|
||
<li>爆款模式的可持续性存疑 (Q1数据预警)</li>
|
||
</ul>
|
||
</div>
|
||
<div class="p-4 rounded-lg bg-amber-900/20 border border-amber-500/30">
|
||
<h4 class="font-semibold text-amber-300">政策与竞争风险</h4>
|
||
<ul class="list-disc list-inside text-slate-400 mt-2 space-y-1">
|
||
<li>针对未成年人消费的潜在监管</li>
|
||
<li>舆论定性为“精神鸦片”风险</li>
|
||
<li>竞争加剧 (集卡社等)</li>
|
||
</ul>
|
||
</div>
|
||
<div class="p-4 rounded-lg bg-indigo-900/20 border border-indigo-500/30">
|
||
<h4 class="font-semibold text-indigo-300">信息交叉验证风险</h4>
|
||
<ul class="list-disc list-inside text-slate-400 mt-2 space-y-1">
|
||
<li>24年财报(高增长)与25Q1路演(大幅下滑)叙事矛盾</li>
|
||
<li>研报中IP归属信息存在冲突</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Data Sources Section -->
|
||
<section class="glass-card rounded-3xl p-6" x-data="{ tab: 'news' }">
|
||
<h3 class="text-2xl font-bold text-sky-300 mb-4">原始数据情报摘要</h3>
|
||
<div class="tabs tabs-boxed bg-slate-900/50">
|
||
<a class="tab" :class="{'tab-active': tab === 'news'}" @click="tab = 'news'">新闻数据</a>
|
||
<a class="tab" :class="{'tab-active': tab === 'roadshow'}" @click="tab = 'roadshow'">路演纪要</a>
|
||
<a class="tab" :class="{'tab-active': tab === 'research'}" @click="tab = 'research'">研报精粹</a>
|
||
</div>
|
||
<div class="mt-4 text-slate-400 text-sm space-y-4 max-h-[400px] overflow-y-auto pr-2">
|
||
<div x-show="tab === 'news'" x-cloak>
|
||
<ul class="list-disc list-inside space-y-2">
|
||
<li><strong class="text-white">公司定位:</strong> 国内集换式卡牌绝对龙头，市占率71%。</li>
|
||
<li><strong class="text-white">IPO进程:</strong> 4月14日二次递表港交所，市场关注度持续提升。</li>
|
||
<li><strong class="text-white">财务表现:</strong> 2024年收入100.57亿元(yoy+278%)，经调整净利润44.66亿元(yoy+378%)，毛利率67.3%。</li>
|
||
<li><strong class="text-white">核心IP:</strong> 奥特曼、小马宝莉 (24年爆款)、叶罗丽、名侦探柯南、哪吒等。</li>
|
||
<li><strong class="text-white">渠道网络:</strong> 217家经销商覆盖全国，线下活跃门店超80万家，校边店为核心阵地。</li>
|
||
<li><strong class="text-white">全球化战略:</strong> 启动出海，小马宝莉打头阵，与孩之宝续签全球发行协议，计划进入北美市场。</li>
|
||
<li><strong class="text-white">产业链核心标的:</strong> 京华激光 (603607) 为其高端防伪供应商，第一大客户。</li>
|
||
</ul>
|
||
</div>
|
||
<div x-show="tab === 'roadshow'" x-cloak>
|
||
<ul class="list-disc list-inside space-y-2">
|
||
<li><strong class="text-white">2024年业绩拆分:</strong> GMV达219亿，小马宝莉贡献60-70%，奥特曼降至10-20%。</li>
|
||
<li><strong class="text-white">2025年Q1业绩波动:</strong> 核心IP <strong class="text-amber-400">哪吒</strong>二级市场价格崩盘；<strong class="text-red-400">小马宝莉</strong>因库存积压，Q1同比下滑65%-70%。</li>
|
||
<li><strong class="text-white">增长挑战:</strong> 小马宝莉热度下滑，2025年面临高基数压力。</li>
|
||
<li><strong class="text-white">新战略方向:</strong> “去卡牌化”（拓展文具、人偶）、联营加盟店（目标年底1000家）、TCG玩法探索。</li>
|
||
<li><strong class="text-white">核心壁垒:</strong> IP投入壁垒（年投入超7亿）、渠道壁垒（渗透至50万终端）、自有产能优势。</li>
|
||
<li><strong class="text-white">IP风险:</strong> 头部IP授权期限至2029年，自有IP占比不足2%。</li>
|
||
</ul>
|
||
</div>
|
||
<div x-show="tab === 'research'" x-cloak>
|
||
<ul class="list-disc list-inside space-y-2">
|
||
<li><strong class="text-white">线上销售:</strong> 24H1于抖音的销售额达到2.78亿元。</li>
|
||
<li><strong class="text-white">产品特点:</strong> 融入稀有度等级(R-SGR)、拼图元素、竞技玩法(TCG比赛)以提升收藏和社交价值。</li>
|
||
<li><strong class="text-white">消费群体:</strong> Z世代为核心，卡牌成为中小学生社交货币。</li>
|
||
<li><strong class="text-white">消费动机:</strong> 满足“社交型消费”需求，提供情绪价值。</li>
|
||
<li><strong class="text-white">未来机遇:</strong> 国产IP崛起、AI互动卡牌等AI玩具赛道潜力巨大。</li>
|
||
<li><strong class="text-white">风险提示:</strong> 市场竞争加剧、消费环境不及预期、新技术需求不确定性。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Stock Table Section -->
|
||
<section class="space-y-8">
|
||
<div>
|
||
<h3 class="text-3xl font-bold text-center text-sky-300 mb-6">概念相关股票池</h3>
|
||
<div class="overflow-x-auto glass-card rounded-2xl p-1">
|
||
<table class="table table-zebra-zebra bg-transparent">
|
||
<thead class="text-base text-cyan-300">
|
||
<tr>
|
||
<th>股票名称</th>
|
||
<th>股票代码</th>
|
||
<th>关联逻辑</th>
|
||
<th>标签</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr class="hover:bg-sky-900/50 transition-colors"><td>京华激光</td><td><a href="https://valuefrontier.cn/company?scode=603607" target="_blank" class="link link-hover">603607</a></td><td>卡游高端防伪供应商，产业链最纯粹A股标的，卡游第一大客户。</td><td><div class="badge badge-primary">核心供应商</div></td></tr>
|
||
<tr class="hover:bg-sky-900/50 transition-colors"><td>创源股份</td><td><a href="https://valuefrontier.cn/company?scode=300703" target="_blank" class="link link-hover">300703</a></td><td>与卡游合作奥特曼IP文创产品，通过卡游线下旗舰店销售。</td><td><div class="badge badge-secondary">产品合作</div></td></tr>
|
||
<tr class="hover:bg-sky-900/50 transition-colors"><td>光线传媒</td><td><a href="https://valuefrontier.cn/company?scode=300251" target="_blank" class="link link-hover">300251</a></td><td>与卡游有哪吒IP合作。</td><td><div class="badge badge-secondary">IP授权</div></td></tr>
|
||
<tr class="hover:bg-sky-900/50 transition-colors"><td>姚记科技</td><td><a href="https://valuefrontier.cn/company?scode=002605" target="_blank" class="link link-hover">002605</a></td><td>参投二手卡牌交易平台“卡淘”，布局卡牌交易生态。</td><td><div class="badge badge-accent">产业链生态</div></td></tr>
|
||
<tr class="hover:bg-sky-900/50 transition-colors"><td>孩子王</td><td><a href="https://valuefrontier.cn/company?scode=301078" target="_blank" class="link link-hover">301078</a></td><td>线下门店是卡游重要销售渠道，销售小马宝莉、奥特曼等畅销卡牌。</td><td><div class="badge badge-info">销售渠道</div></td></tr>
|
||
<tr class="hover:bg-sky-900/50 transition-colors"><td>奥飞娱乐</td><td><a href="https://valuefrontier.cn/company?scode=002292" target="_blank" class="link link-hover">002292</a></td><td>自身拥有IP并推出卡牌，是卡游的直接竞争者，同时也有联合开发合作。</td><td><div class="badge badge-warning">竞争/合作</div></td></tr>
|
||
<tr class="hover:bg-sky-900/50 transition-colors"><td>上海电影</td><td><a href="https://valuefrontier.cn/company?scode=601595" target="_blank" class="link link-hover">601595</a></td><td>拥有国内最多的优质头部IP，是潜在的IP合作方。</td><td><div class="badge badge-secondary">IP授权</div></td></tr>
|
||
<tr class="hover:bg-sky-900/50 transition-colors"><td>华策影视</td><td><a href="https://valuefrontier.cn/company?scode=300133" target="_blank" class="link link-hover">300133</a></td><td>参与《名侦探柯南》等IP卡牌业务。</td><td><div class="badge badge-secondary">IP合作</div></td></tr>
|
||
<tr class="hover:bg-sky-900/50 transition-colors"><td>横店影视</td><td><a href="https://valuefrontier.cn/company?scode=603103" target="_blank" class="link link-hover">603103</a></td><td>渠道布局谷子经济及卡牌，大股东参投卡游竞争对手“集卡社”。</td><td><div class="badge badge-warning">竞争关联</div></td></tr>
|
||
<tr class="hover:bg-sky-900/50 transition-colors"><td>苏大维格</td><td><a href="https://valuefrontier.cn/company?scode=300331" target="_blank" class="link link-hover">300331</a></td><td>与IP厂商合作推出卡游产品，积极布局卡游盲盒市场。</td><td><div class="badge badge-primary">防伪/合作</div></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="text-3xl font-bold text-center text-sky-300 mb-6">近期相关概念股涨幅异动分析</h3>
|
||
<div class="overflow-x-auto glass-card rounded-2xl p-1">
|
||
<table class="table bg-transparent">
|
||
<thead class="text-base text-cyan-300">
|
||
<tr>
|
||
<th>股票</th>
|
||
<th>代码</th>
|
||
<th>日期</th>
|
||
<th>涨幅</th>
|
||
<th>核心驱动逻辑分析</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr class="hover:bg-sky-900/50 transition-colors"><td>星辉娱乐</td><td><a href="https://valuefrontier.cn/company?scode=300043" target="_blank" class="link link-hover">300043</a></td><td>2025-08-29</td><td>5.85%</td><td class="text-xs max-w-md">多重因素驱动：游戏业务业绩改善、剥离亏损业务聚焦主业、受益于潮流玩具/AI玩具行业热度、估值修复预期。</td></tr>
|
||
<tr class="hover:bg-sky-900/50 transition-colors"><td>群兴玩具</td><td><a href="https://valuefrontier.cn/company?scode=002575" target="_blank" class="link link-hover">002575</a></td><td>2025-08-20</td><td>9.95%</td><td class="text-xs max-w-md">受益于算力概念股集体活跃，叠加AI玩具市场爆发背景，以及公司拟收购天宽科技向AI+算力转型的重大资产重组预期。</td></tr>
|
||
<tr class="hover:bg-sky-900/50 transition-colors"><td>实丰文化</td><td><a href="https://valuefrontier.cn/company?scode=002862" target="_blank" class="link link-hover">002862</a></td><td>2025-06-12</td><td>10.01%</td><td class="text-xs max-w-md">受AI玩具新品发布预期、与字节跳动豆包大模型合作落地、以及宝可梦/奶龙等IP经济热点题材驱动。</td></tr>
|
||
<tr class="hover:bg-sky-900/50 transition-colors"><td>德艺文创</td><td><a href="https://valuefrontier.cn/company?scode=300640" target="_blank" class="link link-hover">300640</a></td><td>2025-06-12</td><td>20.00%</td><td class="text-xs max-w-md">主要因IP经济概念持续走强，叠加公司在自主IP授权合作（如“森晴”）及文创产品开发方面的进展。</td></tr>
|
||
<tr class="hover:bg-sky-900/50 transition-colors"><td>线上线下</td><td><a href="https://valuefrontier.cn/company?scode=300959" target="_blank" class="link link-hover">300959</a></td><td>2025-09-17</td><td>18.98%</td><td class="text-xs max-w-md">核心催化剂为“卡游进军美国市场，线上线下渠道并行”新闻，触发市场对公司名称与业务的联想炒作，叠加服务消费政策利好。</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer class="text-center py-10 mt-10 border-t border-slate-800">
|
||
<p class="text-sm text-slate-500">报告生成时间: <span id="generation-time"></span></p>
|
||
<p class="text-xs text-slate-600 mt-2">免责声明：本报告由AI模型基于公开数据合成，不构成任何投资建议。市场有风险，投资需谨慎。</p>
|
||
</footer>
|
||
</div>
|
||
|
||
<script>
|
||
document.addEventListener('mousemove', (e) => {
|
||
const glow = document.getElementById('cursor-glow');
|
||
glow.style.left = `${e.clientX}px`;
|
||
glow.style.top = `${e.clientY}px`;
|
||
});
|
||
|
||
document.getElementById('generation-time').textContent = new Date().toLocaleString('zh-CN');
|
||
|
||
// ECharts Initialization
|
||
// Revenue Chart
|
||
var revenueChart = echarts.init(document.getElementById('revenue-chart'), 'dark');
|
||
var revenueOption = {
|
||
backgroundColor: 'transparent',
|
||
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
|
||
legend: {
|
||
data: ['营收 (亿元)', '调整后净利 (亿元)'],
|
||
textStyle: { color: '#ccc' }
|
||
},
|
||
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
|
||
xAxis: {
|
||
type: 'category',
|
||
data: ['2022', '2023 (下滑)', '2024 (爆发)'],
|
||
axisLine: { lineStyle: { color: '#888' } }
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLine: { lineStyle: { color: '#888' } },
|
||
splitLine: { lineStyle: { type: 'dashed', color: 'rgba(255,255,255,0.1)' } }
|
||
},
|
||
series: [
|
||
{
|
||
name: '营收 (亿元)',
|
||
type: 'bar',
|
||
barWidth: '30%',
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: '#0ea5e9' },
|
||
{ offset: 1, color: '#22d3ee' }
|
||
])
|
||
},
|
||
data: [41.31, 26.62, 100.57]
|
||
},
|
||
{
|
||
name: '调整后净利 (亿元)',
|
||
type: 'line',
|
||
smooth: true,
|
||
itemStyle: { color: '#f59e0b' },
|
||
data: [16.20, 5.78, 44.66]
|
||
}
|
||
]
|
||
};
|
||
revenueChart.setOption(revenueOption);
|
||
|
||
// Composition Chart
|
||
var compositionChart = echarts.init(document.getElementById('composition-chart'), 'dark');
|
||
var compositionOption = {
|
||
backgroundColor: 'transparent',
|
||
tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c}%' },
|
||
legend: {
|
||
orient: 'vertical',
|
||
left: 10,
|
||
data: ['集换式卡牌', '人偶及其他玩具', '文具'],
|
||
textStyle: { color: '#ccc' }
|
||
},
|
||
series: [
|
||
{
|
||
name: '业务构成',
|
||
type: 'pie',
|
||
radius: ['50%', '70%'],
|
||
avoidLabelOverlap: false,
|
||
label: { show: false, position: 'center' },
|
||
emphasis: {
|
||
label: { show: true, fontSize: '20', fontWeight: 'bold' }
|
||
},
|
||
labelLine: { show: false },
|
||
data: [
|
||
{ value: 81.5, name: '集换式卡牌', itemStyle: { color: '#0ea5e9'} },
|
||
{ value: 13.4, name: '人偶及其他玩具', itemStyle: { color: '#a855f7'} },
|
||
{ value: 5.1, name: '文具', itemStyle: { color: '#10b981'} }
|
||
]
|
||
}
|
||
]
|
||
};
|
||
compositionChart.setOption(compositionOption);
|
||
|
||
window.addEventListener('resize', function() {
|
||
revenueChart.resize();
|
||
compositionChart.resize();
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |