486 lines
29 KiB
HTML
486 lines
29 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>概念深度研究：春节档重点影片（哪吒2）</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: #010008;
|
||
background-image:
|
||
radial-gradient(ellipse at 30% 20%, rgba(57, 10, 102, 0.3) 0%, transparent 60%),
|
||
radial-gradient(ellipse at 70% 80%, rgba(18, 55, 122, 0.3) 0%, transparent 60%);
|
||
background-attachment: fixed;
|
||
color: #e0e0e0;
|
||
}
|
||
|
||
.glass-card {
|
||
background: rgba(10, 10, 25, 0.4);
|
||
backdrop-filter: blur(20px);
|
||
-webkit-backdrop-filter: blur(20px);
|
||
border: 1px solid rgba(100, 100, 200, 0.2);
|
||
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.glass-card:hover {
|
||
box-shadow: 0 0 40px 0 rgba(71, 147, 255, 0.3);
|
||
border-color: rgba(120, 120, 255, 0.4);
|
||
}
|
||
|
||
.fui-header {
|
||
font-weight: 500;
|
||
color: #cceaff;
|
||
text-shadow: 0 0 8px rgba(71, 147, 255, 0.8);
|
||
border-left: 3px solid #4793ff;
|
||
padding-left: 1rem;
|
||
}
|
||
|
||
.fui-header-2 {
|
||
font-weight: 500;
|
||
color: #d1bfff;
|
||
text-shadow: 0 0 8px rgba(176, 122, 255, 0.7);
|
||
}
|
||
|
||
.highlight-text {
|
||
color: #82ffff;
|
||
font-weight: 700;
|
||
text-shadow: 0 0 5px rgba(130, 255, 255, 0.5);
|
||
}
|
||
|
||
.positive-text {
|
||
color: #9effc5;
|
||
}
|
||
|
||
.negative-text {
|
||
color: #ff9e9e;
|
||
}
|
||
|
||
.timeline::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 18px;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 2px;
|
||
background-image: linear-gradient(to bottom, rgba(71, 147, 255, 0), rgba(71, 147, 255, 0.8), rgba(71, 147, 255, 0));
|
||
}
|
||
|
||
.timeline-item::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 12px;
|
||
top: 20px;
|
||
width: 14px;
|
||
height: 14px;
|
||
border-radius: 50%;
|
||
background-color: rgba(71, 147, 255, 0.3);
|
||
border: 2px solid #4793ff;
|
||
box-shadow: 0 0 10px #4793ff;
|
||
z-index: 1;
|
||
}
|
||
|
||
</style>
|
||
</head>
|
||
<body class="min-h-screen p-4 sm:p-6 lg:p-8">
|
||
<div class="max-w-7xl mx-auto space-y-8">
|
||
|
||
<!-- Header -->
|
||
<header class="text-center space-y-2">
|
||
<h1 class="text-4xl md:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-300 to-indigo-400 py-2">
|
||
概念深度研究：春节档重点影片（哪吒2）
|
||
</h1>
|
||
<p class="text-xs text-gray-400">
|
||
北京价值前沿科技有限公司 AI投研agent：“价小前投研” 进行投研呈现。本报告为AI合成数据，投资需谨慎。
|
||
</p>
|
||
</header>
|
||
|
||
<!-- Bento Grid Dashboard -->
|
||
<section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
<div class="glass-card rounded-2xl p-6 flex flex-col justify-center items-center text-center col-span-1 md:col-span-2 lg:col-span-1">
|
||
<h3 class="text-lg font-semibold text-slate-300">猫眼预测总票房</h3>
|
||
<p class="text-5xl font-bold highlight-text tracking-tight">87.38 <span class="text-2xl text-slate-400 font-medium">亿元</span></p>
|
||
<p class="text-xs text-slate-500 mt-2">有望刷新中国影史票房纪录</p>
|
||
</div>
|
||
<div class="glass-card rounded-2xl p-6 flex flex-col justify-center items-center text-center">
|
||
<h3 class="text-lg font-semibold text-slate-300">豆瓣口碑评分</h3>
|
||
<p class="text-5xl font-bold highlight-text">8.6</p>
|
||
<p class="text-xs text-slate-500 mt-2">高口碑驱动票房“连续逆跌”</p>
|
||
</div>
|
||
<div class="glass-card rounded-2xl p-6 flex flex-col justify-center items-center text-center col-span-1 md:col-span-2 lg:col-span-2">
|
||
<h3 class="text-lg font-semibold text-slate-300">核心成就</h3>
|
||
<p class="text-2xl font-bold highlight-text">中国影史春节档票房冠军</p>
|
||
<p class="text-xs text-slate-500 mt-2">打破16项影史纪录，进入全球影史票房榜前50</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Box Office Chart -->
|
||
<section class="glass-card rounded-2xl p-6">
|
||
<h2 class="fui-header text-2xl mb-4">票房表现 & 市场预期演化</h2>
|
||
<div id="boxOfficeChart" style="width: 100%; height: 400px;"></div>
|
||
</section>
|
||
|
||
<!-- Insight Analysis -->
|
||
<main class="space-y-8">
|
||
<div class="glass-card rounded-2xl p-6 md:p-8">
|
||
<h2 class="fui-header text-2xl mb-6">核心观点摘要</h2>
|
||
<p class="text-slate-300 leading-relaxed">《哪吒之魔童闹海》概念已经历了从“高期待”到“强验证”的完整周期，其核心驱动力是 <span class="highlight-text">顶级IP与卓越内容质量的结合</span>，引爆了存量观影需求。目前，该概念已从单一的事件驱动型主题炒作，完全过渡到由 <span class="highlight-text">强劲基本面（影片票房和IP衍生价值）驱动的价值重估阶段</span>。其成功不仅为核心公司光线传媒带来历史级业绩弹性，更重塑了市场对国产动画电影工业化水平和IP长线运营价值的认知。</p>
|
||
</div>
|
||
|
||
<div class="glass-card rounded-2xl p-6 md:p-8">
|
||
<h2 class="fui-header text-2xl mb-6">核心事件时间轴</h2>
|
||
<div class="relative timeline pl-10">
|
||
<div class="relative pb-8 timeline-item">
|
||
<p class="text-sm text-cyan-300">2024年6月19日 (酝酿期)</p>
|
||
<p class="text-slate-300">路演信息显示，《哪吒2》存延期至2025年风险，市场高度关注但档期与主控方不确定。</p>
|
||
</div>
|
||
<div class="relative pb-8 timeline-item">
|
||
<p class="text-sm text-cyan-300">2024年12月10日 (正式催化)</p>
|
||
<p class="text-slate-300">《哪吒之魔童闹海》官宣定档2025年春节档，由光线传媒主投，成为市场焦点。</p>
|
||
</div>
|
||
<div class="relative pb-8 timeline-item">
|
||
<p class="text-sm text-cyan-300">2025年1月19日 (预售验证期)</p>
|
||
<p class="text-slate-300">影片预售开启，首日斩获 <span class="highlight-text">3000万</span> 票房，初步验证强大市场号召力。</p>
|
||
</div>
|
||
<div class="relative pb-8 timeline-item">
|
||
<p class="text-sm text-cyan-300">2025年1月28日 - 2月5日 (爆发期)</p>
|
||
<p class="text-slate-300">上映后口碑与票房双炸裂，豆瓣评分高达 <span class="highlight-text">8.6分</span>，出现“连续逆跌”罕见走势，排片占比从23.2%飙升至50%以上，形成“虹吸效应”。</p>
|
||
</div>
|
||
<div class="relative pb-0 timeline-item">
|
||
<p class="text-sm text-cyan-300">2025年2月 (价值重估期)</p>
|
||
<p class="text-slate-300">接连打破 <span class="highlight-text">16项</span> 影史纪录，成为中国影史春节档票房冠军。猫眼预测票房飙升至 <span class="highlight-text">87亿</span> 以上，衍生品全国脱销，IP价值全面验证。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div x-data="{ open: true }" class="glass-card rounded-2xl">
|
||
<div @click="open = !open" class="cursor-pointer p-6 md:p-8">
|
||
<div class="flex justify-between items-center">
|
||
<h2 class="fui-header text-2xl">核心逻辑与市场认知分析</h2>
|
||
<svg :class="{'rotate-180': open}" class="w-6 h-6 text-cyan-300 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
|
||
</div>
|
||
</div>
|
||
<div x-show="open" x-collapse class="px-6 md:px-8 pb-8 space-y-6">
|
||
<div>
|
||
<h3 class="fui-header-2 text-lg mb-2">核心驱动力</h3>
|
||
<ul class="list-disc list-inside space-y-2 text-slate-300">
|
||
<li><strong class="font-semibold text-slate-100">强大IP基础：</strong>前作50亿票房神话与“我命由我不由天”的文化出圈，积累了无与伦比的国民认知度。</li>
|
||
<li><strong class="font-semibold text-slate-100">内容为王，口碑驱动：</strong>豆瓣8.6分高口碑，故事与情感内核精准抓住成年观众共鸣，是实现“连续逆跌”的根本。</li>
|
||
<li><strong class="font-semibold text-slate-100">工业化体系支撑：</strong>长达5年的制作周期与高水准特效，标志着国产动画电影工业化体系日趋成熟。</li>
|
||
<li><strong class="font-semibold text-slate-100">IP衍生经济闭环：</strong>系统化开发衍生品，与泡泡玛特等头部品牌合作，盲盒、手办热销，打开第二增长曲线。</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h3 class="fui-header-2 text-lg mb-2">预期差分析</h3>
|
||
<p class="text-slate-300 mb-2">本次事件最大的特点是出现了巨大的 <span class="positive-text font-semibold">正向预期差</span>：</p>
|
||
<ul class="list-disc list-inside space-y-2 text-slate-300">
|
||
<li><strong class="font-semibold text-slate-100">票房天花板预期差：</strong>最终70-80亿+的票房预测，相比映前40亿左右的预测，存在近乎 <span class="highlight-text">翻倍</span> 的预期差。</li>
|
||
<li><strong class="font-semibold text-slate-100">口碑持续性预期差：</strong>市场未预见到其口碑能强劲到引发“连续逆跌”并形成碾压式的“虹吸效应”。</li>
|
||
<li><strong class="font-semibold text-slate-100">衍生品商业化预期差：</strong>衍生品火爆程度（盲盒全国脱销、二手市场溢价）超出市场想象，此前未被充分计价。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||
<div class="glass-card rounded-2xl p-6 md:p-8">
|
||
<h2 class="fui-header text-2xl mb-6">关键催化剂与未来发展路径</h2>
|
||
<div>
|
||
<h3 class="fui-header-2 text-lg mb-2">近期催化剂 (未来3-6个月)</h3>
|
||
<ul class="list-disc list-inside space-y-2 text-slate-300">
|
||
<li>最终票房数据落定，能否登顶影史第一。</li>
|
||
<li><span class="highlight-text">光线传媒Q1财报</span> 公布，验证巨额利润。</li>
|
||
<li>衍生品具体销售数据公布，量化IP价值。</li>
|
||
<li>海外发行表现超预期。</li>
|
||
</ul>
|
||
</div>
|
||
<div class="mt-6">
|
||
<h3 class="fui-header-2 text-lg mb-2">长期发展路径</h3>
|
||
<ul class="list-disc list-inside space-y-2 text-slate-300">
|
||
<li><strong class="text-slate-100">IP宇宙化：</strong>加速推进“封神宇宙”，构建内容护城河。</li>
|
||
<li><strong class="text-slate-100">IP运营常态化：</strong>从单片开发走向覆盖玩具、游戏、实景娱乐的全产业链运营。</li>
|
||
<li><strong class="text-slate-100">动画工业化深化：</strong>投资AI等新技术，巩固行业龙头地位。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="glass-card rounded-2xl p-6 md:p-8">
|
||
<h2 class="fui-header text-2xl mb-6">潜在风险与挑战</h2>
|
||
<div>
|
||
<h3 class="fui-header-2 text-lg mb-2">商业化风险</h3>
|
||
<ul class="list-disc list-inside space-y-2 text-slate-300">
|
||
<li class="negative-text">成功路径的可复制性风险，后续作品能否达到同等高度存疑。</li>
|
||
<li class="negative-text">IP衍生品热度与电影绑定，长线运营面临挑战。</li>
|
||
<li class="negative-text">高昂的制作与宣发成本（合计超7亿），若票房不及预期将面临巨大亏损。</li>
|
||
</ul>
|
||
</div>
|
||
<div class="mt-6">
|
||
<h3 class="fui-header-2 text-lg mb-2">政策与竞争风险</h3>
|
||
<ul class="list-disc list-inside space-y-2 text-slate-300">
|
||
<li class="negative-text">文化审查是所有影视内容的固有风险。</li>
|
||
<li class="negative-text">未来档期必然面临其他重磅影片的激烈竞争。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="glass-card rounded-2xl p-6 md:p-8">
|
||
<h2 class="fui-header text-2xl mb-6">综合结论与投资启示</h2>
|
||
<p class="text-slate-300 leading-relaxed mb-4"><strong>最终看法：</strong>《哪吒2》概念已完成从主题炒作到基本面驱动的华丽转身，并进入了 <span class="highlight-text">价值发现和重估的核心阶段</span>。其意义超越了一部电影的成败，为中国电影市场展示了“高质量内容IP化、系列化、产业化”的清晰范本和巨大潜力。</p>
|
||
<h3 class="fui-header-2 text-lg mb-2">最具投资价值的环节</h3>
|
||
<ul class="list-disc list-inside space-y-2 text-slate-300">
|
||
<li><strong>核心IP持有与运营方：</strong> <span class="highlight-text">光线传媒</span> 无疑是本轮概念中最具确定性和价值的标的，其价值已转变为对其整个动画电影战略和IP宇宙长期价值的重估。</li>
|
||
<li><strong>头部IP衍生品开发商：</strong> 以 <span class="highlight-text">泡泡玛特</span> 为代表的潮玩公司，以及在图书、卡牌等细分领域与顶级IP深度绑定的上市公司，有望受益于电影IP变现空间的持续扩大。</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Stock Tables -->
|
||
<section class="space-y-8">
|
||
<div class="glass-card rounded-2xl p-6 md:p-8">
|
||
<h2 class="fui-header text-2xl mb-4">《哪吒2》核心及衍生标的</h2>
|
||
<div class="overflow-x-auto">
|
||
<table class="table w-full">
|
||
<thead class="text-sm text-cyan-200">
|
||
<tr>
|
||
<th class="bg-transparent">股票名称</th>
|
||
<th class="bg-transparent">股票代码</th>
|
||
<th class="bg-transparent">关联原因</th>
|
||
<th class="bg-transparent">标签</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="text-slate-300">
|
||
<tr class="hover:bg-gray-800/30">
|
||
<td class="bg-transparent">光线传媒</td>
|
||
<td class="bg-transparent"><a href="https://valuefrontier.cn/company?scode=300251" target="_blank" class="text-blue-400 hover:underline">300251</a></td>
|
||
<td class="bg-transparent">《哪吒之魔童闹海》出品方</td>
|
||
<td class="bg-transparent"><div class="badge badge-primary badge-outline">核心出品</div></td>
|
||
</tr>
|
||
<tr class="hover:bg-gray-800/30">
|
||
<td class="bg-transparent">丝路视觉</td>
|
||
<td class="bg-transparent"><a href="https://valuefrontier.cn/company?scode=300556" target="_blank" class="text-blue-400 hover:underline">300556</a></td>
|
||
<td class="bg-transparent">为《哪吒之魔童闹海》提供特效 (旗下瑞云科技)</td>
|
||
<td class="bg-transparent"><div class="badge badge-accent badge-outline">特效制作</div></td>
|
||
</tr>
|
||
<tr class="hover:bg-gray-800/30">
|
||
<td class="bg-transparent">中信出版</td>
|
||
<td class="bg-transparent"><a href="https://valuefrontier.cn/company?scode=300788" target="_blank" class="text-blue-400 hover:underline">300788</a></td>
|
||
<td class="bg-transparent">《哪吒之魔童闹海》图书周边</td>
|
||
<td class="bg-transparent"><div class="badge badge-secondary badge-outline">IP衍生</div></td>
|
||
</tr>
|
||
<tr class="hover:bg-gray-800/30">
|
||
<td class="bg-transparent">京华激光</td>
|
||
<td class="bg-transparent"><a href="https://valuefrontier.cn/company?scode=603607" target="_blank" class="text-blue-400 hover:underline">603607</a></td>
|
||
<td class="bg-transparent">《哪吒之魔童闹海》卡牌周边</td>
|
||
<td class="bg-transparent"><div class="badge badge-secondary badge-outline">IP衍生</div></td>
|
||
</tr>
|
||
<tr class="hover:bg-gray-800/30">
|
||
<td class="bg-transparent">华立科技</td>
|
||
<td class="bg-transparent"><a href="https://valuefrontier.cn/company?scode=301011" target="_blank" class="text-blue-400 hover:underline">301011</a></td>
|
||
<td class="bg-transparent">《哪吒之魔童闹海》游戏周边</td>
|
||
<td class="bg-transparent"><div class="badge badge-secondary badge-outline">IP衍生</div></td>
|
||
</tr>
|
||
<tr class="hover:bg-gray-800/30">
|
||
<td class="bg-transparent">金逸影视</td>
|
||
<td class="bg-transparent"><a href="https://valuefrontier.cn/company?scode=002905" target="_blank" class="text-blue-400 hover:underline">002905</a></td>
|
||
<td class="bg-transparent">《哪吒之魔童闹海》院线</td>
|
||
<td class="bg-transparent"><div class="badge badge-info badge-outline">院线</div></td>
|
||
</tr>
|
||
<tr class="hover:bg-gray-800/30">
|
||
<td class="bg-transparent">四川文旅</td>
|
||
<td class="bg-transparent">--</td>
|
||
<td class="bg-transparent">《哪吒之魔童闹海》旅游概念</td>
|
||
<td class="bg-transparent"><div class="badge badge-warning badge-outline">文旅概念</div></td>
|
||
</tr>
|
||
<tr class="hover:bg-gray-800/30">
|
||
<td class="bg-transparent">成都路桥</td>
|
||
<td class="bg-transparent"><a href="https://valuefrontier.cn/company?scode=002628" target="_blank" class="text-blue-400 hover:underline">002628</a></td>
|
||
<td class="bg-transparent">《哪吒之魔童闹海》旅游概念</td>
|
||
<td class="bg-transparent"><div class="badge badge-warning badge-outline">文旅概念</div></td>
|
||
</tr>
|
||
<tr class="hover:bg-gray-800/30">
|
||
<td class="bg-transparent">峨眉山</td>
|
||
<td class="bg-transparent">--</td>
|
||
<td class="bg-transparent">《哪吒之魔童闹海》旅游概念</td>
|
||
<td class="bg-transparent"><div class="badge badge-warning badge-outline">文旅概念</div></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="glass-card rounded-2xl p-6 md:p-8">
|
||
<h2 class="fui-header text-2xl mb-4">同档期竞争影片相关标的</h2>
|
||
<div class="overflow-x-auto">
|
||
<table class="table w-full">
|
||
<thead class="text-sm text-cyan-200">
|
||
<tr>
|
||
<th class="bg-transparent">股票名称</th>
|
||
<th class="bg-transparent">股票代码</th>
|
||
<th class="bg-transparent">关联影片</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="text-slate-300">
|
||
<tr class="hover:bg-gray-800/30">
|
||
<td class="bg-transparent">万达电影</td>
|
||
<td class="bg-transparent"><a href="https://valuefrontier.cn/company?scode=002739" target="_blank" class="text-blue-400 hover:underline">002739</a></td>
|
||
<td class="bg-transparent">《唐探 1900》、《熊出没·重启未来》</td>
|
||
</tr>
|
||
<tr class="hover:bg-gray-800/30">
|
||
<td class="bg-transparent">中国电影</td>
|
||
<td class="bg-transparent"><a href="https://valuefrontier.cn/company?scode=600977" target="_blank" class="text-blue-400 hover:underline">600977</a></td>
|
||
<td class="bg-transparent">《唐探 1900》、《射雕英雄传:侠之大者》、《熊出没·重启未来》</td>
|
||
</tr>
|
||
<tr class="hover:bg-gray-800/30">
|
||
<td class="bg-transparent">北京文化</td>
|
||
<td class="bg-transparent"><a href="https://valuefrontier.cn/company?scode=000802" target="_blank" class="text-blue-400 hover:underline">000802</a></td>
|
||
<td class="bg-transparent">《封神第二部:战火西岐》</td>
|
||
</tr>
|
||
<tr class="hover:bg-gray-800/30">
|
||
<td class="bg-transparent">横店影视</td>
|
||
<td class="bg-transparent"><a href="https://valuefrontier.cn/company?scode=603103" target="_blank" class="text-blue-400 hover:underline">603103</a></td>
|
||
<td class="bg-transparent">《射雕英雄传:侠之大者》</td>
|
||
</tr>
|
||
<tr class="hover:bg-gray-800/30">
|
||
<td class="bg-transparent">博纳影业</td>
|
||
<td class="bg-transparent"><a href="https://valuefrontier.cn/company?scode=001330" target="_blank" class="text-blue-400 hover:underline">001330</a></td>
|
||
<td class="bg-transparent">《蛟龙行动》</td>
|
||
</tr>
|
||
<tr class="hover:bg-gray-800/30">
|
||
<td class="bg-transparent">华强方特</td>
|
||
<td class="bg-transparent">--</td>
|
||
<td class="bg-transparent">《熊出没·重启未来》</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
var chartDom = document.getElementById('boxOfficeChart');
|
||
var myChart = echarts.init(chartDom, 'dark');
|
||
var option;
|
||
|
||
option = {
|
||
backgroundColor: 'transparent',
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross',
|
||
label: {
|
||
backgroundColor: '#6a7985'
|
||
}
|
||
},
|
||
formatter: function (params) {
|
||
let res = params[0].name + '<br/>';
|
||
params.forEach(param => {
|
||
res += param.marker + ' ' + param.seriesName + ': ' + param.value + ' 亿元<br/>';
|
||
});
|
||
return res;
|
||
}
|
||
},
|
||
legend: {
|
||
data: ['累计票房', '媒体映前预测'],
|
||
textStyle: {
|
||
color: '#ccc'
|
||
}
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: ['预售开启', '春节档中段', '破30亿', '破35亿', '破54亿', '春节档结束', '最终预测'],
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255, 0.3)'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: '#ccc'
|
||
}
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
name: '票房(亿元)',
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255, 0.3)'
|
||
}
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255, 0.1)'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: '#ccc'
|
||
}
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '累计票房',
|
||
type: 'line',
|
||
stack: 'Total',
|
||
smooth: true,
|
||
lineStyle: {
|
||
width: 2,
|
||
color: '#00ffff',
|
||
shadowColor: 'rgba(0, 255, 255, 0.5)',
|
||
shadowBlur: 10
|
||
},
|
||
showSymbol: false,
|
||
areaStyle: {
|
||
opacity: 0.8,
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: 'rgba(0, 255, 255, 0.3)' },
|
||
{ offset: 1, color: 'rgba(0, 255, 255, 0)' }
|
||
])
|
||
},
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: [0.3, 25, 30, 35.62, 54.14, 74.63, 87.38]
|
||
},
|
||
{
|
||
name: '媒体映前预测',
|
||
type: 'line',
|
||
smooth: true,
|
||
lineStyle: {
|
||
width: 2,
|
||
type: 'dashed',
|
||
color: '#f97316'
|
||
},
|
||
showSymbol: false,
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: [38, 38, 38, 38, 38, 38, 38]
|
||
}
|
||
]
|
||
};
|
||
|
||
option && myChart.setOption(option);
|
||
window.addEventListener('resize', myChart.resize);
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html> |