Files
vf_react/public/htmls/潮玩产业.html
2025-12-05 13:29:18 +08:00

475 lines
31 KiB
HTML
Raw 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.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=Lexend:wght@300;400;500;700&display=swap');
body {
font-family: 'Lexend', sans-serif;
background-color: #010418;
color: #E0E0E0;
overflow-x: hidden;
position: relative;
}
body::before {
content: '';
position: fixed;
top: -20%;
left: -20%;
width: 80%;
height: 80%;
background: radial-gradient(circle, rgba(67, 56, 202, 0.2), rgba(67, 56, 202, 0) 70%);
filter: blur(100px);
z-index: -1;
animation: move-glow1 20s infinite alternate;
}
body::after {
content: '';
position: fixed;
bottom: -20%;
right: -20%;
width: 80%;
height: 80%;
background: radial-gradient(circle, rgba(29, 78, 216, 0.2), rgba(29, 78, 216, 0) 70%);
filter: blur(100px);
z-index: -1;
animation: move-glow2 25s infinite alternate;
}
@keyframes move-glow1 {
from { transform: translate(0, 0); }
to { transform: translate(100px, 150px); }
}
@keyframes move-glow2 {
from { transform: translate(0, 0); }
to { transform: translate(-150px, -100px); }
}
.glass-card {
background: rgba(17, 24, 39, 0.5);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 2rem;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}
.section-title {
font-size: 2.5rem;
font-weight: 700;
background: linear-gradient(90deg, #93c5fd, #a78bfa);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 15px rgba(147, 197, 253, 0.3);
}
.sub-title {
font-size: 1.5rem;
font-weight: 500;
color: #d1d5db;
border-left: 4px solid #6366f1;
padding-left: 1rem;
text-shadow: 0 0 5px rgba(99, 102, 241, 0.5);
}
.bento-grid {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(12, 1fr);
}
.bento-item {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.bento-item:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: 0 0 25px rgba(167, 139, 250, 0.3);
}
.table th, .table td {
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.table thead th {
background-color: rgba(31, 41, 55, 0.7);
}
</style>
</head>
<body class="min-h-screen p-4 sm:p-8">
<div class="max-w-7xl mx-auto space-y-12">
<!-- Header -->
<header class="text-center py-8">
<h1 class="text-5xl md:text-7xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-300 via-purple-400 to-indigo-400 mb-4" style="text-shadow: 0 0 20px rgba(199, 210, 254, 0.3);">
潮玩产业 深度研究报告
</h1>
<p class="text-gray-400">北京价值前沿科技有限公司 AI投研agent“价小前投研”</p>
<p class="text-xs text-gray-500 mt-2">本报告为AI合成数据投资需谨慎。</p>
</header>
<!-- Concept Insight -->
<section class="glass-card p-6 md:p-10 space-y-8">
<h2 class="section-title">概念洞察 (Concept Insight)</h2>
<div class="p-6 border border-gray-700 rounded-2xl bg-black/20">
<h3 class="sub-title mb-4">核心观点摘要</h3>
<p class="text-gray-300">
潮玩产业正经历从“品类驱动”向“IP运营驱动”的深刻转型已从单一的盲盒热潮演变为一个多品类、全产业链、全球化布局的成熟消费赛道。其核心驱动力源于Z世代对“情绪价值”和“社交货币”的持续追求而未来的增长潜力在于<strong class="text-indigo-300">IP全球化运营</strong><strong class="text-indigo-300">AI技术融合</strong>以及<strong class="text-indigo-300">下沉市场开拓</strong>三大路径。
</p>
</div>
<div x-data="{ tab: 'logic' }" class="space-y-6">
<div class="tabs tabs-boxed bg-black/30">
<a class="tab tab-lg" :class="{ 'tab-active': tab === 'logic' }" @click="tab = 'logic'">核心逻辑与市场认知</a>
<a class="tab tab-lg" :class="{ 'tab-active': tab === 'catalyst' }" @click="tab = 'catalyst'">关键催化剂与发展路径</a>
<a class="tab tab-lg" :class="{ 'tab-active': tab === 'risk' }" @click="tab = 'risk'">潜在风险与挑战</a>
</div>
<div x-show="tab === 'logic'" class="space-y-6 p-4">
<h3 class="sub-title">核心驱动力</h3>
<ul class="list-disc list-inside space-y-3 text-gray-300 pl-4">
<li><strong class="text-blue-300">宏观层面:精神消费的“口红效应”</strong>:具备穿越周期的“抗周期”特性。经济承压背景下,潮玩成为满足年轻人情感慰藉、个性表达的重要出口。</li>
<li><strong class="text-blue-300">产业层面IP的全产业链价值放大</strong>核心是IP。成功的商业模式是从上游IP孵化到中游产品设计再到下游全渠道销售和社群运营形成价值闭环。</li>
<li><strong class="text-blue-300">技术层面AI赋能带来新想象空间</strong>AI技术为玩具赋予互动、陪伴等全新价值将潮玩从静态陈列品升级为“AI情感服务提供商”拓宽市场天花板。</li>
</ul>
<h3 class="sub-title">市场热度与预期差</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="p-4 border border-gray-700 rounded-xl bg-black/20">
<h4 class="font-bold text-lg text-purple-300 mb-2">市场情绪:乐观但分化</h4>
<p class="text-gray-400">对市场规模增长和头部公司(泡泡玛特、名创优品)前景高度认可,但对不同品类(盲盒降温,卡牌存疑)和中小品牌生存空间持谨慎态度。</p>
</div>
<div class="p-4 border border-gray-700 rounded-xl bg-black/20">
<h4 class="font-bold text-lg text-purple-300 mb-2">预期差分析</h4>
<ul class="list-disc list-inside space-y-2 text-gray-400">
<li><strong>渠道认知预期差:</strong> 市场可能过度关注线上GMV而低估了卡牌等品类在线下下沉市场的深度和韧性。</li>
<li><strong>IP价值预期差</strong> 市场可能高估了普通公司孵化爆款IP的能力低估了头部玩家在IP孵化上的系统性优势。</li>
<li><strong>“积木”品类预期差:</strong> 市场可能将“积木”一概而论,未能识别出“积木人”这一细分赛道的高壁垒和不同玩法。</li>
</ul>
</div>
</div>
</div>
<div x-show="tab === 'catalyst'" class="space-y-6 p-4">
<h3 class="sub-title">近期催化剂 (未来3-6个月)</h3>
<ul class="list-disc list-inside space-y-3 text-gray-300 pl-4">
<li><strong>头部公司业绩发布:</strong> 泡泡玛特、名创优品等财报将验证行业景气度。</li>
<li><strong>AI潮玩产品落地</strong> 奥飞娱乐等AI潮玩若热销将引爆“AI+潮玩”板块。</li>
<li><strong>重要IP发布与联动</strong> 新影视、游戏爆款IP的衍生品销售表现。</li>
<li><strong>港股IPO进展</strong> 卡游、布鲁可、52TOYS等上市进程将提供更透明的经营数据。</li>
</ul>
<h3 class="sub-title">长期发展路径</h3>
<ul class="list-disc list-inside space-y-3 text-gray-300 pl-4">
<li><strong>IP全球化运营 (当前-2027)</strong> 从“产品出海”升级为“IP出海”对标迪士尼、万代南梦宫。</li>
<li><strong>全年龄段与泛品类覆盖 (2025-2029)</strong> 突破“年轻人玩具”范畴,向家居、服饰、文具等多领域拓展。</li>
<li><strong>技术深度融合与虚实共生 (2027年以后)</strong> 融合AI、AR/VR技术成为连接物理与数字世界的入口。</li>
</ul>
</div>
<div x-show="tab === 'risk'" class="space-y-6 p-4">
<h3 class="sub-title">潜在风险与挑战</h3>
<ul class="list-disc list-inside space-y-3 text-gray-300 pl-4">
<li><strong>IP风险</strong> 核心风险。IP生命周期有限热度可能衰退新IP孵化成功率低。</li>
<li><strong>商业化风险:</strong> 产品质量问题(掉漆、破裂)、库存积压风险高。</li>
<li><strong>政策与竞争风险:</strong> 针对未成年人消费、盲盒模式的监管政策是潜在风险;跨界玩家涌入,竞争加剧。</li>
<li><strong>信息交叉验证风险:</strong> 线上GMV数据与线下渠道表现可能存在巨大差异如卡游需综合判断单一数据源存在局限性。</li>
</ul>
</div>
</div>
</section>
<!-- Market Data & Trends in Bento Grid -->
<section class="space-y-8">
<h2 class="section-title text-center">市场数据与核心趋势</h2>
<div class="bento-grid">
<div class="bento-item glass-card p-6 md:p-8 col-span-12 lg:col-span-7">
<h3 class="sub-title mb-4">中国IP玩具市场规模及预测 (亿元)</h3>
<div id="market-size-chart" style="width: 100%; height: 350px;"></div>
</div>
<div class="bento-item glass-card p-6 col-span-12 lg:col-span-5 space-y-4">
<h3 class="sub-title mb-4">产业宏观趋势</h3>
<div class="space-y-3">
<div class="p-3 bg-black/20 rounded-lg"><strong class="text-purple-300">规模扩张:</strong> 中国泛娱乐玩具市场规模已破千亿预计2029年突破2000亿。</div>
<div class="p-3 bg-black/20 rounded-lg"><strong class="text-purple-300">情绪消费:</strong> Z世代成为主力消费从功能主义转向情感与个性表达。</div>
<div class="p-3 bg-black/20 rounded-lg"><strong class="text-purple-300">国货出海:</strong> 中国潮玩品牌加速出海东南亚,竞争重心由产品向模式拓展。</div>
<div class="p-3 bg-black/20 rounded-lg"><strong class="text-purple-300">政策支持:</strong> 东莞投入1.2亿元支持潮玩产业,成立湾区潮玩文创产业联盟。</div>
</div>
</div>
<div class="bento-item glass-card p-6 md:p-8 col-span-12 lg:col-span-8">
<h3 class="sub-title mb-4">重点企业线上GMV同比增速 (2025年10月)</h3>
<div id="gmv-growth-chart" style="width: 100%; height: 350px;"></div>
</div>
<div class="bento-item glass-card p-6 col-span-12 lg:col-span-4 space-y-4">
<h3 class="sub-title mb-4">热门品类动态</h3>
<ul class="list-disc list-inside space-y-3 text-gray-300">
<li><strong>盲盒:</strong> 热度下降市场向头部品牌超级IP集中。</li>
<li><strong>卡牌:</strong> 线上数据下滑,但线下渠道尤其是下沉市场仍具韧性。</li>
<li><strong>积木:</strong> 国产替代加速,积木人赛道高投入高回报,壁垒较高。</li>
<li><strong>毛绒玩具:</strong> 增速迅猛,搪胶毛绒类订单量激增。</li>
<li><strong>AI潮玩:</strong> 尚处探索期,奥飞娱乐率先布局,前景广阔。</li>
</ul>
</div>
</div>
</section>
<!-- Industry Chain & Key Players -->
<section class="glass-card p-6 md:p-10 space-y-8">
<h2 class="section-title">产业链与核心公司深度剖析</h2>
<!-- Industry Chain -->
<div>
<h3 class="sub-title mb-6">产业链图谱</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-center">
<div class="p-6 bg-black/20 rounded-2xl border border-blue-800">
<h4 class="text-xl font-bold text-blue-300 mb-3">上游IP创作与供应</h4>
<p class="text-gray-400">自有IP孵化 (泡泡玛特)、授权IP (光线传媒-哪吒)、原材料 (美联新材-色母粒)。</p>
</div>
<div class="p-6 bg-black/20 rounded-2xl border border-purple-800">
<h4 class="text-xl font-bold text-purple-300 mb-3">中游:设计、制造与营销</h4>
<p class="text-gray-400">产品设计开发 (布鲁可)、生产制造 (东莞/汕头集群)、营销服务 (易点天下)。</p>
</div>
<div class="p-6 bg-black/20 rounded-2xl border border-indigo-800">
<h4 class="text-xl font-bold text-indigo-300 mb-3">下游:销售渠道</h4>
<p class="text-gray-400">品牌直营 (TOP TOY)、集合店 (酷乐潮玩)、线上电商 (芒果超媒)、二手交易 (闲鱼)。</p>
</div>
</div>
</div>
<!-- Key Players -->
<div x-data="{ company: 'popmart' }">
<h3 class="sub-title mb-6">核心玩家对比</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-4 mb-6">
<button @click="company = 'popmart'" :class="company === 'popmart' ? 'bg-indigo-600 text-white' : 'bg-gray-800/50 hover:bg-gray-700/70'" class="p-4 rounded-xl transition text-center">
<p class="font-bold text-lg">泡泡玛特</p>
<p class="text-sm text-gray-400">IP运营核心</p>
</button>
<button @click="company = 'toptoy'" :class="company === 'toptoy' ? 'bg-indigo-600 text-white' : 'bg-gray-800/50 hover:bg-gray-700/70'" class="p-4 rounded-xl transition text-center">
<p class="font-bold text-lg">名创优品/TOP TOY</p>
<p class="text-sm text-gray-400">渠道与供应链驱动</p>
</button>
<button @click="company = 'bruco'" :class="company === 'bruco' ? 'bg-indigo-600 text-white' : 'bg-gray-800/50 hover:bg-gray-700/70'" class="p-4 rounded-xl transition text-center">
<p class="font-bold text-lg">布鲁可</p>
<p class="text-sm text-gray-400">细分龙头</p>
</button>
<button @click="company = 'aofei'" :class="company === 'aofei' ? 'bg-indigo-600 text-white' : 'bg-gray-800/50 hover:bg-gray-700/70'" class="p-4 rounded-xl transition text-center">
<p class="font-bold text-lg">奥飞娱乐</p>
<p class="text-sm text-gray-400">转型探索者</p>
</button>
</div>
<div class="p-6 bg-black/30 rounded-2xl border border-gray-700 min-h-[300px]">
<div x-show="company === 'popmart'" x-transition>
<h4 class="text-2xl font-bold text-white mb-4">泡泡玛特 (领导者)</h4>
<div class="grid md:grid-cols-3 gap-4 text-gray-300">
<div><strong class="text-green-400">优势:</strong> 强大的自有IP孵化和运营能力是核心护城河全球化的全渠道布局海外市场增长迅猛。</div>
<div><strong class="text-blue-400">进展:</strong> 线上GMV保持高速增长(10月同比+94%);推出积木、卡牌等新品类;渠道升级(臻选店、POPOP子品牌)。</div>
<div><strong class="text-red-400">风险:</strong> 对头部IP依赖度高新IP孵化存在不确定性线下开店成本高。</div>
</div>
</div>
<div x-show="company === 'toptoy'" x-transition>
<h4 class="text-2xl font-bold text-white mb-4">名创优品/TOP TOY (追赶者)</h4>
<div class="grid md:grid-cols-3 gap-4 text-gray-300">
<div><strong class="text-green-400">优势:</strong> 依托名创优品强大的供应链和海外渠道经验;“超级大店”模式提升体验;产品策略灵活。</div>
<div><strong class="text-blue-400">进展:</strong> TOP TOY线上GMV增速惊人(10月同比+317%)已连续4个季度盈利加速海外拓展。</div>
<div><strong class="text-red-400">风险:</strong> 自有IP能力相对较弱外采产品占比高(70%),利润率可能受挤压。</div>
</div>
</div>
<div x-show="company === 'bruco'" x-transition>
<h4 class="text-2xl font-bold text-white mb-4">布鲁可 (细分龙头)</h4>
<div class="grid md:grid-cols-3 gap-4 text-gray-300">
<div><strong class="text-green-400">优势:</strong> 精准卡位“积木人”高增长赛道强IP授权(奥特曼)+极致低价策略;渠道下沉能力极强(15万终端)。</div>
<div><strong class="text-blue-400">进展:</strong> 线上GMV稳健增长(10月同比+71%);已提交港股招股书。</div>
<div><strong class="text-red-400">风险:</strong> 高度依赖外部IP授权“以价换量”模式可能损害长期品牌价值无自有工厂品控是短板。</div>
</div>
</div>
<div x-show="company === 'aofei'" x-transition>
<h4 class="text-2xl font-bold text-white mb-4">奥飞娱乐 (转型探索者)</h4>
<div class="grid md:grid-cols-3 gap-4 text-gray-300">
<div><strong class="text-green-400">优势:</strong> 拥有“喜羊羊”等国民级自有IP在AI潮玩领域布局早具备先发优势。</div>
<div><strong class="text-blue-400">进展:</strong> AI智趣喜羊羊已上市销售向“AI情感服务提供商”转型。</div>
<div><strong class="text-red-400">风险:</strong> 传统IP老化AI潮玩尚处市场培育早期商业化落地和消费者接受度存在不确定性。</div>
</div>
</div>
</div>
</div>
</section>
<!-- Stock List -->
<section class="glass-card p-6 md:p-10">
<h2 class="section-title mb-6">相关上市公司梳理</h2>
<div class="overflow-x-auto">
<table class="table table-zebra w-full text-base">
<thead class="text-lg text-gray-200">
<tr>
<th>股票名称</th>
<th>股票代码</th>
<th>关联原因</th>
<th>标签</th>
</tr>
</thead>
<tbody>
<!-- IP版权 -->
<tr class="bg-black/20"><td colspan="4" class="text-xl font-bold text-purple-300 py-3 pl-4">上游IP版权方</td></tr>
<tr><td>上海电影</td><td><a href="https://valuefrontier.cn/company?scode=601595" target="_blank" class="text-blue-400 hover:underline">601595</a></td><td>拥有《中国奇谭》等60个优质经典IP</td><td><div class="badge badge-primary">IP版权</div> <div class="badge badge-secondary">影视</div></td></tr>
<tr><td>光线传媒</td><td><a href="https://valuefrontier.cn/company?scode=300251" target="_blank" class="text-blue-400 hover:underline">300251</a></td><td>《哪吒之魔童闹海》相关IP</td><td><div class="badge badge-primary">IP版权</div> <div class="badge badge-secondary">影视</div></td></tr>
<tr><td>华策影视</td><td><a href="https://valuefrontier.cn/company?scode=300133" target="_blank" class="text-blue-400 hover:underline">300133</a></td><td>成立动漫事业群持续引进海外S级IP</td><td><div class="badge badge-primary">IP版权</div> <div class="badge badge-secondary">影视</div></td></tr>
<tr><td>完美世界</td><td><a href="https://valuefrontier.cn/company?scode=002624" target="_blank" class="text-blue-400 hover:underline">002624</a></td><td>拥有完美世界IP、诛仙IP等游戏IP</td><td><div class="badge badge-primary">IP版权</div> <div class="badge badge-accent">游戏</div></td></tr>
<tr><td>德艺文创</td><td><a href="https://valuefrontier.cn/company?scode=300640" target="_blank" class="text-blue-400 hover:underline">300640</a></td><td>“森晴”及“野生物口”等自主IP</td><td><div class="badge badge-primary">IP版权</div> <div class="badge">文创</div></td></tr>
<!-- 品牌方 -->
<tr class="bg-black/20"><td colspan="4" class="text-xl font-bold text-purple-300 py-3 pl-4">中游:潮玩品牌方</td></tr>
<tr><td>泡泡玛特</td><td>港股</td><td>覆盖IP潮玩全产业链拥有Molly、LABUBU等爆款自有IP</td><td><div class="badge badge-success">全产业链</div> <div class="badge">港股</div></td></tr>
<tr><td>奥飞娱乐</td><td><a href="https://valuefrontier.cn/company?scode=002292" target="_blank" class="text-blue-400 hover:underline">002292</a></td><td>“铠甲勇士”卡牌及“AI喜羊羊”智能玩具</td><td><div class="badge badge-info">AI+潮玩</div> <div class="badge">卡牌</div></td></tr>
<tr><td>晨光股份</td><td><a href="https://valuefrontier.cn/company?scode=603899" target="_blank" class="text-blue-400 hover:underline">603899</a></td><td>成立独立潮玩品牌奇只好玩以IP孵化运营为核心</td><td><div class="badge badge-warning">潮玩/盲盒</div></td></tr>
<tr><td>星辉娱乐</td><td><a href="https://valuefrontier.cn/company?scode=300043" target="_blank" class="text-blue-400 hover:underline">300043</a></td><td>产品覆盖TOP TOY、酷乐潮玩等连锁店</td><td><div class="badge badge-warning">潮玩/盲盒</div></td></tr>
<tr><td>海正生材</td><td><a href="https://valuefrontier.cn/company?scode=688203" target="_blank" class="text-blue-400 hover:underline">688203</a></td><td>网传与LABUBU潮玩3D打印材料相关</td><td><div class="badge">上游材料</div></td></tr>
<!-- 卡牌游戏 -->
<tr class="bg-black/20"><td colspan="4" class="text-xl font-bold text-purple-300 py-3 pl-4">中游:卡牌细分赛道</td></tr>
<tr><td>姚记科技</td><td><a href="https://valuefrontier.cn/company?scode=002605" target="_blank" class="text-blue-400 hover:underline">002605</a></td><td>入股卡牌交易平台卡淘,布局宝可梦卡牌等</td><td><div class="badge badge-info">卡牌</div> <div class="badge badge-secondary">渠道</div></td></tr>
<tr><td>京华激光</td><td><a href="https://valuefrontier.cn/company?scode=603607" target="_blank" class="text-blue-400 hover:underline">603607</a></td><td>为卡游提供高端防伪卡牌加工服务</td><td><div class="badge badge-info">卡牌</div> <div class="badge">防伪</div></td></tr>
<!-- 渠道 -->
<tr class="bg-black/20"><td colspan="4" class="text-xl font-bold text-purple-300 py-3 pl-4">下游:销售渠道</td></tr>
<tr><td>孩子王</td><td><a href="https://valuefrontier.cn/company?scode=301078" target="_blank" class="text-blue-400 hover:underline">301078</a></td><td>布鲁可重要战略合作伙伴,卡游品牌已入驻</td><td><div class="badge badge-secondary">渠道</div> <div class="badge">连锁</div></td></tr>
<tr><td>芒果超媒</td><td><a href="https://valuefrontier.cn/company?scode=300413" target="_blank" class="text-blue-400 hover:underline">300413</a></td><td>小芒电商聚焦IP商业化开发销售哪吒等周边</td><td><div class="badge badge-secondary">渠道</div> <div class="badge badge-accent">电商</div></td></tr>
<tr><td>青木科技</td><td><a href="https://valuefrontier.cn/company?scode=301110" target="_blank" class="text-blue-400 hover:underline">301110</a></td><td>泡泡玛特天猫旗舰店代运营服务商</td><td><div class="badge badge-secondary">代运营</div></td></tr>
<tr><td>电广传媒</td><td><a href="https://valuefrontier.cn/company?scode=000917" target="_blank" class="text-blue-400 hover:underline">000917</a></td><td>二手潮玩平台“娃友圈”</td><td><div class="badge badge-secondary">渠道</div> <div class="badge">二手交易</div></td></tr>
</tbody>
</table>
</div>
</section>
</div>
<script>
// ECharts Initialization
document.addEventListener('DOMContentLoaded', function () {
// Market Size Chart
var marketSizeChart = echarts.init(document.getElementById('market-size-chart'), 'dark');
var marketSizeOption = {
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', '2024 (预期)', '2029 (预测)'],
axisLine: { lineStyle: { color: '#888' } }
},
yAxis: {
type: 'value',
axisLine: { lineStyle: { color: '#888' } },
splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } }
},
series: [{
name: '市场规模',
type: 'bar',
barWidth: '40%',
itemStyle: {
borderRadius: [5, 5, 0, 0],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#8360c3' },
{ offset: 1, color: '#2ebf91' }
])
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#a78bfa' },
{ offset: 1, color: '#4ade80' }
])
}
},
data: [478, 764, 1675]
}]
};
marketSizeChart.setOption(marketSizeOption);
// GMV Growth Chart
var gmvGrowthChart = echarts.init(document.getElementById('gmv-growth-chart'), 'dark');
var gmvGrowthOption = {
backgroundColor: 'transparent',
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
formatter: '{b}: {c}%'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['TOP TOY', '泡泡玛特', '布鲁可', '乐高', '寻找独角兽', '卡游'],
axisLabel: {
interval: 0,
rotate: 30,
color: '#ccc'
},
axisLine: { lineStyle: { color: '#888' } }
},
yAxis: {
type: 'value',
name: '同比增速(%)',
axisLine: { lineStyle: { color: '#888' } },
splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } }
},
series: [{
name: 'GMV同比增速',
type: 'bar',
barWidth: '50%',
data: [
{ value: 317, itemStyle: { color: '#6366f1' } },
{ value: 94, itemStyle: { color: '#8b5cf6' } },
{ value: 71, itemStyle: { color: '#a855f7' } },
{ value: -2, itemStyle: { color: '#d946ef' } },
{ value: -50, itemStyle: { color: '#ec4899' } },
{ value: -75, itemStyle: { color: '#f43f5e' } }
],
itemStyle: {
borderRadius: [5, 5, 0, 0]
},
label: {
show: true,
position: 'top',
formatter: '{c}%',
color: '#fff'
}
}]
};
gmvGrowthChart.setOption(gmvGrowthOption);
window.addEventListener('resize', function() {
marketSizeChart.resize();
gmvGrowthChart.resize();
});
});
</script>
</body>
</html>