462 lines
28 KiB
HTML
462 lines
28 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN" data-theme="dark">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>乙游 (Otome Game) 概念深度投研报告</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: #0c0a18;
|
||
color: #e0e0e0;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
.glass-card {
|
||
background: rgba(23, 22, 48, 0.4);
|
||
backdrop-filter: blur(16px) saturate(180%);
|
||
-webkit-backdrop-filter: blur(16px) saturate(180%);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 2rem; /* Extreme rounded corners */
|
||
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
|
||
}
|
||
|
||
.glow-bg {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: -1;
|
||
background-image:
|
||
radial-gradient(ellipse at 50% 0%, rgba(128, 90, 213, 0.15), transparent 70%),
|
||
radial-gradient(ellipse at 10% 100%, rgba(59, 130, 246, 0.15), transparent 80%),
|
||
radial-gradient(ellipse at 90% 90%, rgba(234, 179, 8, 0.1), transparent 70%);
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 2.25rem;
|
||
font-weight: 700;
|
||
letter-spacing: -0.025em;
|
||
background: linear-gradient(90deg, #a78bfa, #fbc2eb);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
text-shadow: 0 0 15px rgba(167, 139, 250, 0.3);
|
||
}
|
||
|
||
.sub-title {
|
||
font-size: 1.25rem;
|
||
font-weight: 500;
|
||
color: #d1d5db;
|
||
border-left: 3px solid #a78bfa;
|
||
padding-left: 0.75rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.bento-grid {
|
||
display: grid;
|
||
gap: 1.5rem;
|
||
grid-template-columns: repeat(6, 1fr);
|
||
}
|
||
|
||
.bento-item {
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
}
|
||
|
||
.bento-item:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
/* Responsive Bento Grid */
|
||
@media (max-width: 1024px) {
|
||
.bento-grid {
|
||
grid-template-columns: repeat(1, 1fr);
|
||
}
|
||
}
|
||
|
||
@media (min-width: 1024px) {
|
||
.col-span-lg-4 { grid-column: span 4 / span 4; }
|
||
.col-span-lg-2 { grid-column: span 2 / span 2; }
|
||
.col-span-lg-3 { grid-column: span 3 / span 3; }
|
||
.col-span-lg-6 { grid-column: span 6 / span 6; }
|
||
}
|
||
|
||
.tab-lifted.tab-active {
|
||
background: rgba(45, 43, 87, 0.6) !important;
|
||
border-color: rgba(255, 255, 255, 0.1) !important;
|
||
border-bottom-color: transparent !important;
|
||
}
|
||
|
||
table.table {
|
||
background-color: transparent;
|
||
}
|
||
|
||
table.table thead tr {
|
||
background-color: rgba(255, 255, 255, 0.05);
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
table.table tbody tr {
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
table.table tbody tr:last-child {
|
||
border-bottom: none;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="antialiased">
|
||
<div class="glow-bg"></div>
|
||
|
||
<div class="container mx-auto p-4 md:p-8 lg:p-12">
|
||
<!-- Header -->
|
||
<header class="text-center mb-16">
|
||
<h1 class="section-title mb-4">乙游 (Otome Game) 概念深度投研报告</h1>
|
||
<p class="text-lg text-gray-400">北京价值前沿科技有限公司 AI投研agent：“价小前投研” 呈现</p>
|
||
<p class="text-sm text-gray-500 mt-2">本报告为AI合成数据，投资需谨慎。</p>
|
||
</header>
|
||
|
||
<!-- Insight Section: Bento Grid -->
|
||
<section class="mb-16">
|
||
<h2 class="section-title mb-8 text-center">概念核心 Insight</h2>
|
||
<div class="bento-grid">
|
||
<!-- Main Logic -->
|
||
<div class="glass-card p-8 bento-item col-span-lg-4">
|
||
<h3 class="sub-title">核心逻辑与市场认知</h3>
|
||
<p class="font-bold text-lg text-violet-300 mb-4">乙游正从垂直细分赛道，演变为由 “她经济”消费力、3D技术升级、AI应用预期 三大核心动力驱动的高增长潜力板块。</p>
|
||
<div class="space-y-4 text-gray-300">
|
||
<p><strong class="text-white">1. 需求端 - 女性消费力崛起与情感需求释放:</strong> "女性消费增量"是根本背景。乙游精准捕捉了女性用户对高质量剧情、虚拟情感链接和角色陪伴的核心需求，这是其高用户粘性和高付费率的基石。</p>
|
||
<p><strong class="text-white">2. 供给端 - 技术革新带来的体验跃迁:</strong> 以《恋与深空》为代表的3D化革命，通过全方位3D建模、第一视角剧情等技术，将沉浸感提升到新维度，支撑了更高的商业价值，证明乙游已是技术密集型赛道。</p>
|
||
<p><strong class="text-white">3. 未来预期 - AI技术打开想象空间:</strong> 行业报告明确指出AI有望在乙游实现突破，如生成个性化对话与互动（类似《仙剑世界》的AI NPC），极大增强核心吸引力——情感陪伴，是驱动估值提升的远期逻辑。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Catalyst & Path -->
|
||
<div class="glass-card p-8 bento-item col-span-lg-2">
|
||
<h3 class="sub-title">关键催化剂与发展路径</h3>
|
||
<div class="space-y-3">
|
||
<div>
|
||
<h4 class="font-semibold text-violet-300">近期催化剂 (3-6月)</h4>
|
||
<ul class="list-disc list-inside text-gray-300">
|
||
<li>重点新品上线（如《代号梦境》）与市场表现。</li>
|
||
<li>《恋与深空》长线运营数据验证。</li>
|
||
<li>头部厂商公布实质性AI NPC交互功能。</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-semibold text-violet-300">长期发展路径</h4>
|
||
<ol class="list-decimal list-inside text-gray-300">
|
||
<li><strong>当前:</strong> 3D化普及与玩法融合。</li>
|
||
<li><strong>中期:</strong> AI驱动的情感交互革命。</li>
|
||
<li><strong>远期:</strong> IP化与VR/AR多端化生态。</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Expectation Gap -->
|
||
<div class="glass-card p-8 bento-item col-span-lg-3">
|
||
<h3 class="sub-title">预期差分析：纯乙游 vs 泛IP生态</h3>
|
||
<p class="text-gray-300">市场存在一个显著预期差：热点集中于“纯粹乙游”概念股，而可能低估了以《仙剑奇侠传》为代表的“泛女性向IP生态”模式的护城河。</p>
|
||
<ul class="mt-4 space-y-2 text-gray-400">
|
||
<li><strong class="text-white">市场共识:</strong> 寻找标签明确的乙游开发商，如星辉娱乐（《少女的王座》）。</li>
|
||
<li><strong class="text-white">潜在预期差:</strong> 忽视了拥有国民级IP的公司通过“游戏+影视+衍生品(如与泡泡玛特合作)”全面触达女性消费市场。这种模式在用户获取、情感认同和商业化方面优势巨大，护城河更深。</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Risks -->
|
||
<div class="glass-card p-8 bento-item col-span-lg-3">
|
||
<h3 class="sub-title">潜在风险与挑战</h3>
|
||
<ul class="space-y-3 text-gray-300">
|
||
<li class="flex items-start">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3 text-amber-400 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><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>
|
||
<span><strong class="text-white">技术风险:</strong> AI NPC实现路径不明确，仍存瓶颈；3D开发的技术门槛与成本高昂。</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3 text-amber-400 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><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>
|
||
<span><strong class="text-white">商业化风险:</strong> 内容消耗快，持续产出高质量剧情和人设对创造力构成巨大压力，易出现同质化竞争。</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3 text-amber-400 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><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>
|
||
<span><strong class="text-white">信息交叉验证风险:</strong> 输入的研报数据中存在将化工名词（苯乙烯）与“乙游”并列的严重错误，提示需对原始数据源进行批判性审视。</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Data Deep Dive Section -->
|
||
<section class="mb-16" x-data="{ tab: 'market' }">
|
||
<h2 class="section-title mb-8 text-center">多维数据深度解析</h2>
|
||
<div class="tabs tabs-lifted justify-center mb-6">
|
||
<a class="tab text-lg" :class="{ 'tab-active': tab === 'market' }" @click="tab = 'market'">市场 & 研报洞察</a>
|
||
<a class="tab text-lg" :class="{ 'tab-active': tab === 'roadshow' }" @click="tab = 'roadshow'">核心厂商路演</a>
|
||
<a class="tab text-lg" :class="{ 'tab-active': tab === 'chart' }" @click="tab = 'chart'">关键数据可视化</a>
|
||
</div>
|
||
|
||
<div class="glass-card p-8 min-h-[400px]">
|
||
<!-- Market & Reports Tab -->
|
||
<div x-show="tab === 'market'" x-transition>
|
||
<h3 class="sub-title">市场热度与研报核心观点</h3>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div>
|
||
<h4 class="font-semibold text-lg text-violet-300 mb-2">市场热度信号</h4>
|
||
<ul class="list-disc list-inside space-y-2 text-gray-300">
|
||
<li><strong class="text-white">社交媒体引爆:</strong> 乙女游戏话题在小红书、微博热搜刷爆，连续霸榜游戏排行。</li>
|
||
<li><strong class="text-white">消费趋势关联:</strong> 市场将乙游热度与“女性消费增量”趋势紧密挂钩。</li>
|
||
<li><strong class="text-white">AI+游戏风口:</strong> 行业报告将“乙女”游戏列为“AI+游戏内容”的核心应用场景，认为其商业化天花板有望被打开。</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-semibold text-lg text-violet-300 mb-2">研报聚焦：《恋与深空》案例</h4>
|
||
<ul class="list-disc list-inside space-y-2 text-gray-300">
|
||
<li><strong class="text-white">行业里程碑:</strong> 作为首款3D恋爱手游，开启了国产乙游3D化新时代，提升了沉浸感与真实感。</li>
|
||
<li><strong class="text-white">商业成功验证:</strong> 2024年1月上线后，迅速成为当月新游日均收入与下载量双料第一，上线首月iOS端收入超1600万美元。</li>
|
||
<li><strong class="text-white">面临挑战:</strong> 研报指出其存在剧情节奏慢、部分男主人设缺乏创新性等问题，长线运营能力面临考验。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Roadshow Tab -->
|
||
<div x-show="tab === 'roadshow'" x-transition>
|
||
<h3 class="sub-title">路演精粹：以《仙剑奇侠传》IP生态为例</h3>
|
||
<p class="text-gray-400 mb-4">路演数据显示，头部IP厂商虽未直接标榜“乙游”，但其战略布局深度契合女性向市场，构建了强大的IP生态护城河。</p>
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
<div>
|
||
<h4 class="font-semibold text-lg text-violet-300 mb-2">IP价值与粉丝基础</h4>
|
||
<ul class="list-disc list-inside text-gray-300">
|
||
<li>30年国民级IP，全球超1亿核心粉丝。</li>
|
||
<li>2024年完成全球版权统一，掌控力增强。</li>
|
||
<li>新版电视剧吸引新生代用户，反哺游戏。</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-semibold text-lg text-violet-300 mb-2">核心游戏《仙剑世界》设计</h4>
|
||
<ul class="list-disc list-inside text-gray-300">
|
||
<li>定位“东方浪漫幻想开放世界”，国风写实画风。</li>
|
||
<li>核心玩法吸引女性玩家：精怪收集（类宝可梦）、UGC家园建设、AI驱动NPC互动。</li>
|
||
<li>市场预约量已超700万，目标千万级。</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-semibold text-lg text-violet-300 mb-2">泛娱乐化生态运营</h4>
|
||
<ul class="list-disc list-inside text-gray-300">
|
||
<li><strong class="text-white">影视联动:</strong> 多部剧集、动画持续引流。</li>
|
||
<li><strong class="text-white">衍生品:</strong> 与泡泡玛特合作盲盒，销量良好。</li>
|
||
<li><strong class="text-white">跨界合作:</strong> 与《王者荣耀》等头部产品联动，并举办音乐会、剧本杀等线下活动。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Chart Tab -->
|
||
<div x-show="tab === 'chart'" x-transition>
|
||
<h3 class="sub-title">《恋与深空》上线初期市场表现</h3>
|
||
<div id="loveAndDeepspaceChart" class="w-full h-[400px]"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Associated Stocks Section -->
|
||
<section>
|
||
<h2 class="section-title mb-8 text-center">核心概念股梳理</h2>
|
||
|
||
<div class="glass-card p-4 md:p-8 overflow-x-auto mb-12">
|
||
<table class="table w-full">
|
||
<thead>
|
||
<tr>
|
||
<th class="text-lg text-white">股票名称</th>
|
||
<th class="text-lg text-white">股票代码</th>
|
||
<th class="text-lg text-white">核心逻辑 / 关联产品</th>
|
||
<th class="text-lg text-white">标签</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>星辉娱乐</td>
|
||
<td><a href="https://valuefrontier.cn/company?scode=300043" target="_blank" class="link link-hover text-violet-300">300043</a></td>
|
||
<td>拥有二次元女性向RPG手游《少女的王座》，及少女养成手游《纯白和弦》。</td>
|
||
<td><div class="badge badge-primary">核心研发</div></td>
|
||
</tr>
|
||
<tr>
|
||
<td>三七互娱</td>
|
||
<td><a href="https://valuefrontier.cn/company?scode=002555" target="_blank" class="link link-hover text-violet-300">002555</a></td>
|
||
<td>布局现代都市写实女性向游戏《代号梦境》。</td>
|
||
<td><div class="badge badge-secondary">巨头入局</div></td>
|
||
</tr>
|
||
<tr>
|
||
<td>吉比特</td>
|
||
<td><a href="https://valuefrontier.cn/company?scode=603444" target="_blank" class="link link-hover text-violet-300">603444</a></td>
|
||
<td>旗下拥有女性向宫廷养成游戏《花落长安》。</td>
|
||
<td><div class="badge badge-primary">核心研发</div></td>
|
||
</tr>
|
||
<tr>
|
||
<td>中文传媒</td>
|
||
<td><a href="https://valuefrontier.cn/company?scode=600373" target="_blank" class="link link-hover text-violet-300">600373</a></td>
|
||
<td>爆款乙游《恋与制作人》的独家代理和运营商。</td>
|
||
<td><div class="badge badge-accent">独家运营</div></td>
|
||
</tr>
|
||
<tr>
|
||
<td>电广传媒</td>
|
||
<td><a href="https://valuefrontier.cn/company?scode=000917" target="_blank" class="link link-hover text-violet-300">000917</a></td>
|
||
<td>《一起奔赴的星光》获版号，为女性向偶像养成冒险+音乐手游。</td>
|
||
<td><div class="badge badge-primary">核心研发</div></td>
|
||
</tr>
|
||
<tr>
|
||
<td>天舟文化</td>
|
||
<td><a href="https://valuefrontier.cn/company?scode=300148" target="_blank" class="link link-hover text-violet-300">300148</a></td>
|
||
<td>研发布局泛女性向游戏，《早安少女》《京都烟雨录》已在港台地区上线。</td>
|
||
<td><div class="badge badge-primary">核心研发</div></td>
|
||
</tr>
|
||
<tr>
|
||
<td>汤姆猫</td>
|
||
<td><a href="https://valuefrontier.cn/company?scode=300459" target="_blank" class="link link-hover text-violet-300">300459</a></td>
|
||
<td>旗下拥有经典女性向养成类游戏《我的安吉拉》系列。</td>
|
||
<td><div class="badge badge-info">泛女性向</div></td>
|
||
</tr>
|
||
<tr>
|
||
<td>恺英网络</td>
|
||
<td><a href="https://valuefrontier.cn/company?scode=002517" target="_blank" class="link link-hover text-violet-300">002517</a></td>
|
||
<td>旗下《一念永恒：少年追梦》包含受女性用户欢迎的元素。</td>
|
||
<td><div class="badge badge-info">泛女性向</div></td>
|
||
</tr>
|
||
<tr>
|
||
<td>中青宝</td>
|
||
<td><a href="https://valuefrontier.cn/company?scode=301051" target="_blank" class="link link-hover text-violet-300">301051</a></td>
|
||
<td>新闻数据中提及与乙游概念相关。</td>
|
||
<td><div class="badge badge-info">概念关联</div></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<h3 class="sub-title text-xl mb-6">关联概念涨幅归因分析（补充）</h3>
|
||
<div class="space-y-4">
|
||
<div class="collapse collapse-plus glass-card">
|
||
<input type="radio" name="rise-analysis-accordion" checked="checked" />
|
||
<div class="collapse-title text-xl font-medium text-violet-300">
|
||
游族网络 (002174) - 7.65% 上涨分析
|
||
</div>
|
||
<div class="collapse-content">
|
||
<p class="text-gray-300 whitespace-pre-line"><strong>核心催化剂:</strong> 游族转债赎回事件、海外业务表现突出（出海收入占比超60%）、AI赋能降本增效（素材成本降低60%）。
|
||
<strong>行业背景:</strong> 游戏出海趋势明确，AI技术为行业带来普惠。
|
||
<strong>资金与情绪:</strong> 融资净买入居板块第一，市场资金流入明显，叠加《凡人修仙传》等产品预期。
|
||
<strong>综合结论:</strong> 此次上涨是公司基本面改善、行业向好、资金流入和市场情绪共同作用的结果，转债赎回和出海趋势是直接催化剂。</p>
|
||
</div>
|
||
</div>
|
||
<div class="collapse collapse-plus glass-card">
|
||
<input type="radio" name="rise-analysis-accordion" />
|
||
<div class="collapse-title text-xl font-medium text-violet-300">
|
||
迅游科技 (300467) - 6.79% 上涨分析
|
||
</div>
|
||
<div class="collapse-content">
|
||
<p class="text-gray-300 whitespace-pre-line"><strong>核心催化剂:</strong> 明确与热门游戏《黑神话：悟空》有业务关联（子公司提供服务，参股企业提供CG渲染），直接受益于《黑神话》系列热度。
|
||
<strong>板块效应:</strong> 受益于游戏板块整体走强，特别是吉比特业绩超预期提振了市场情绪。
|
||
<strong>行业基本面:</strong> 端游市场连续4年增长，为游戏加速、渲染等配套服务提供了良好发展环境。
|
||
<strong>综合结论:</strong> 《黑神话》热度带来的直接关联是核心驱动力，叠加板块整体走强效应。</p>
|
||
</div>
|
||
</div>
|
||
<div class="collapse collapse-plus glass-card">
|
||
<input type="radio" name="rise-analysis-accordion" />
|
||
<div class="collapse-title text-xl font-medium text-violet-300">
|
||
欢瑞世纪 (000892) - 9.92% 上涨分析
|
||
</div>
|
||
<div class="collapse-content">
|
||
<p class="text-gray-300 whitespace-pre-line"><strong>核心催化剂:</strong> 短剧游戏《情感反诈模拟器》在Steam平台热销（峰值近7万在线），直接带动股价。
|
||
<strong>战略布局:</strong> 公司重点布局“短剧+互动影游+AIGC”多元化发展，契合市场热点趋势。
|
||
<strong>基本面改善:</strong> 新兴业务占比提升，营收结构优化，加上公司自身拥有优质IP运营能力。
|
||
<strong>综合结论:</strong> 由爆款短剧游戏直接引爆，叠加市场对公司互动影游和AI技术应用前景的乐观预期。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<footer class="text-center mt-16 pt-8 border-t border-white/10">
|
||
<p class="text-gray-500">报告生成于: <span id="generationDate"></span></p>
|
||
<p class="text-gray-600 text-sm mt-1">AI投研agent: 价小前投研 | 北京价值前沿科技有限公司</p>
|
||
</footer>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
document.getElementById('generationDate').textContent = new Date().toLocaleString('zh-CN');
|
||
|
||
// ECharts Initialization
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
var chartDom = document.getElementById('loveAndDeepspaceChart');
|
||
if(chartDom) {
|
||
var myChart = echarts.init(chartDom, 'dark'); // Use 'dark' theme
|
||
var option;
|
||
|
||
option = {
|
||
backgroundColor: 'transparent',
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
legend: {
|
||
data: ['数值'],
|
||
textStyle: { color: '#ccc' }
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'value',
|
||
boundaryGap: [0, 0.01],
|
||
axisLine: { lineStyle: { color: 'rgba(255,255,255,0.3)' } },
|
||
splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } }
|
||
},
|
||
yAxis: {
|
||
type: 'category',
|
||
data: ['日均下载量(次)', '日均iOS收入($)', '单日最高iOS收入($)', '首月总iOS收入($)'],
|
||
axisLine: { lineStyle: { color: 'rgba(255,255,255,0.3)' } }
|
||
},
|
||
series: [
|
||
{
|
||
name: '数值',
|
||
type: 'bar',
|
||
data: [48490, 552211, 1831661, 16566318],
|
||
itemStyle: {
|
||
borderRadius: [0, 5, 5, 0],
|
||
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||
{ offset: 0, color: '#833ab4' },
|
||
{ offset: 0.5, color: '#fd1d1d' },
|
||
{ offset: 1, color: '#fcb045' }
|
||
])
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: 'right',
|
||
color: '#fff',
|
||
formatter: (params) => {
|
||
return new Intl.NumberFormat().format(params.value);
|
||
}
|
||
}
|
||
}
|
||
]
|
||
};
|
||
myChart.setOption(option);
|
||
|
||
window.addEventListener('resize', function() {
|
||
myChart.resize();
|
||
});
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |