466 lines
26 KiB
HTML
466 lines
26 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>华为Pura70 概念深度研报 | 价小前投研</title>
|
||
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||
<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 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: #010416;
|
||
color: #e0e0e0;
|
||
overflow-x: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
.glass-card {
|
||
background: rgba(10, 15, 40, 0.6);
|
||
backdrop-filter: blur(20px);
|
||
-webkit-backdrop-filter: blur(20px);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 24px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.glass-card:hover {
|
||
border-color: rgba(100, 200, 255, 0.3);
|
||
box-shadow: 0 0 30px rgba(100, 200, 255, 0.1);
|
||
}
|
||
|
||
.bento-grid {
|
||
display: grid;
|
||
gap: 1.5rem;
|
||
grid-template-columns: repeat(12, 1fr);
|
||
}
|
||
|
||
.grid-item {
|
||
grid-column: span 12;
|
||
}
|
||
|
||
@media (min-width: 1024px) {
|
||
.col-span-lg-4 { grid-column: span 4; }
|
||
.col-span-lg-6 { grid-column: span 6; }
|
||
.col-span-lg-8 { grid-column: span 8; }
|
||
.col-span-lg-12 { grid-column: span 12; }
|
||
}
|
||
|
||
.aurora-bg::before,
|
||
.aurora-bg::after {
|
||
content: '';
|
||
position: fixed;
|
||
top: 50%;
|
||
left: 50%;
|
||
width: 1000px;
|
||
height: 1000px;
|
||
border-radius: 50%;
|
||
opacity: 0.15;
|
||
filter: blur(150px);
|
||
z-index: -1;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
.aurora-bg::before {
|
||
background: radial-gradient(circle, #3b82f6, transparent 60%);
|
||
animation: moveAurora1 25s infinite linear;
|
||
}
|
||
|
||
.aurora-bg::after {
|
||
background: radial-gradient(circle, #8b5cf6, transparent 60%);
|
||
animation: moveAurora2 30s infinite linear;
|
||
}
|
||
|
||
@keyframes moveAurora1 {
|
||
0% { transform: translate(-50%, -50%) rotate(0deg) translateX(150px) rotate(0deg); }
|
||
100% { transform: translate(-50%, -50%) rotate(360deg) translateX(150px) rotate(-360deg); }
|
||
}
|
||
|
||
@keyframes moveAurora2 {
|
||
0% { transform: translate(-50%, -50%) rotate(0deg) translateX(-150px) rotate(0deg); }
|
||
100% { transform: translate(-50%, -50%) rotate(-360deg) translateX(-150px) rotate(360deg); }
|
||
}
|
||
|
||
.glow-text {
|
||
text-shadow: 0 0 8px rgba(192, 219, 255, 0.6);
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 1.8rem;
|
||
font-weight: 700;
|
||
color: #ffffff;
|
||
margin-bottom: 1rem;
|
||
position: relative;
|
||
padding-left: 1.5rem;
|
||
}
|
||
|
||
.section-title::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 6px;
|
||
height: 80%;
|
||
background-image: linear-gradient(to bottom, #3b82f6, #8b5cf6);
|
||
border-radius: 3px;
|
||
box-shadow: 0 0 10px #60a5fa;
|
||
}
|
||
|
||
.table thead th {
|
||
background-color: rgba(255, 255, 255, 0.05);
|
||
color: #a0aec0;
|
||
}
|
||
.table tbody tr {
|
||
border-bottom-color: rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.prose h3 {
|
||
color: #d1d5db;
|
||
}
|
||
.prose strong {
|
||
color: #93c5fd;
|
||
}
|
||
|
||
</style>
|
||
</head>
|
||
<body class="min-h-screen p-4 sm:p-6 lg:p-8 aurora-bg">
|
||
|
||
<div class="max-w-7xl mx-auto">
|
||
|
||
<!-- Header -->
|
||
<header class="text-center mb-12">
|
||
<h1 class="text-4xl md:text-5xl font-bold glow-text bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-400">
|
||
华为Pura70 概念深度研报
|
||
</h1>
|
||
<p class="mt-4 text-lg text-gray-400">AI投研agent：“价小前投研”</p>
|
||
</header>
|
||
|
||
<!-- Main Content -->
|
||
<main class="space-y-8">
|
||
|
||
<!-- Insight Section -->
|
||
<section class="glass-card p-6 md:p-8 prose prose-invert max-w-none">
|
||
<h2 class="section-title">概念Insight：综合分析</h2>
|
||
|
||
<h3 class="font-semibold text-xl text-blue-300">0. 概念事件与关键时间轴</h3>
|
||
<p>华为Pura70概念的核心是华为终端业务在高端智能手机市场的战略性回归和技术实力展现。其背景是华为在经历数年外部制裁后，通过供应链重构和技术自研，重新恢复了旗舰手机的正常迭代节奏。</p>
|
||
<ul class="list-disc pl-5 space-y-2">
|
||
<li><strong>2024年4月18日:</strong> Pura 70系列以“先锋计划”形式突发开售，市场反应热烈，开源证券路演称其“销售火爆”、“出现‘秒空’现象”。</li>
|
||
<li><strong>2024年4月21日:</strong> 中信建投与招商证券路演进一步印证市场火爆，并首次提及可伸缩长焦镜头、麒麟9010芯片、盘古大模型等核心技术。</li>
|
||
<li><strong>2024年7月-9月:</strong> 周度销量数据显示，系列销量趋于平稳，每周总销量稳定在18-21万台区间。</li>
|
||
<li><strong>2024年9月9日 (第37周):</strong> 产品线中新增“北斗卫星消息版”，并迅速成为销量主力之一。</li>
|
||
<li><strong>近期:</strong> 华为开启降价促销（Ultra最高优惠2000元），标志产品进入生命周期中后期，为Mate 70系列让路。</li>
|
||
<li><strong>未来催化:</strong> Pura 70系列将是首批升级纯血鸿蒙（HarmonyOS NEXT）的机型，预示其将从硬件驱动过渡到软件和生态驱动的新阶段。</li>
|
||
</ul>
|
||
|
||
<div class="divider before:bg-gray-700 after:bg-gray-700"></div>
|
||
|
||
<h3 class="font-semibold text-xl text-blue-300">1. 核心观点摘要</h3>
|
||
<p>华为Pura70概念标志着华为彻底回归全球高端手机牌桌，其本质是<strong>“技术自主突破”</strong>与<strong>“品牌势能回归”</strong>的双重验证。当前，该概念已从产品发布初期的事件驱动炒作，平稳过渡到由<strong>真实销量、供应链业绩兑现和生态系统（纯血鸿蒙）扩张</strong>所驱动的基本面验证阶段，其未来潜力更多体现在对整个国产供应链的深度赋能和生态价值重估。</p>
|
||
|
||
<div class="divider before:bg-gray-700 after:bg-gray-700"></div>
|
||
|
||
<h3 class="font-semibold text-xl text-blue-300">2. 概念的核心逻辑与市场认知分析</h3>
|
||
<h4>核心驱动力:</h4>
|
||
<ol class="list-decimal pl-5 space-y-2">
|
||
<li><strong>技术创新与自主可控:</strong>
|
||
<ul class="list-disc pl-5">
|
||
<li><strong>影像突破:</strong> Ultra版搭载全球首款超聚光伸缩摄像头和1英寸大底传感器。</li>
|
||
<li><strong>芯片迭代:</strong> 麒麟9010芯片，延续自主芯片叙事，是突破封锁的根本保障。</li>
|
||
<li><strong>AI与生态:</strong> 接入盘古大模型并即将升级纯血鸿蒙，构建“硬件+软件+AI+生态”的立体化护城河。</li>
|
||
</ul>
|
||
</li>
|
||
<li><strong>强大的品牌号召力:</strong> “秒空”、“销售火爆”等市场现象验证了华为在经历打压后不降反升的品牌忠诚度。</li>
|
||
</ol>
|
||
|
||
<h4>预期差分析:</h4>
|
||
<ul class="list-disc pl-5 space-y-2">
|
||
<li><strong>销量预期差:</strong> 市场普遍认知停留在“秒光”，但数据显示销量已“趋于平稳”。这并非利空，而是进入健康销售周期的正常表现。月销约80万台基本吻合“月均100万台”的预测。</li>
|
||
<li><strong>库存预期差:</strong> 渠道备货1400-1500万台，而销量预测为1000万台，存在400-500万台的潜在库存压力，这可能是近期降价促销的深层原因。</li>
|
||
<li><strong>创新认知差:</strong> 市场初期焦点在“伸缩摄像头”，但“北斗卫星消息版”的热销表明，华为在卫星通信差异化赛道上的能力可能被市场低估。</li>
|
||
</ul>
|
||
|
||
<div class="divider before:bg-gray-700 after:bg-gray-700"></div>
|
||
|
||
<h3 class="font-semibold text-xl text-blue-300">3. 关键催化剂与未来发展路径</h3>
|
||
<h4>近期催化剂 (3-6个月):</h4>
|
||
<ol class="list-decimal pl-5 space-y-2">
|
||
<li><strong>纯血鸿蒙 (HarmonyOS NEXT) 正式版推送:</strong> 最大的近期催化剂，将引爆对华为生态链、原生应用开发商的关注。</li>
|
||
<li><strong>华为Mate 70系列发布:</strong> 市场将高度关注新一代麒麟芯片性能和技术创新，验证华为产品节奏的回归。</li>
|
||
<li><strong>上市公司三季报/年报披露:</strong> 供应链公司的财报将是验证“华为订单”成色的试金石。</li>
|
||
</ol>
|
||
<h4>长期发展路径:</h4>
|
||
<ul class="list-disc pl-5 space-y-2">
|
||
<li><strong>硬件层:</strong> Pura系列将继续作为影像技术的试验田。</li>
|
||
<li><strong>软件与生态层:</strong> 以纯血鸿蒙为基础，构建类似苹果的封闭生态系统。</li>
|
||
<li><strong>AI终端化:</strong> 深化端侧AI能力，实现更专业的场景应用。</li>
|
||
<li><strong>全场景融合:</strong> 手机作为核心入口，与PC、汽车、穿戴设备等深度联动。</li>
|
||
</ul>
|
||
|
||
<div class="divider before:bg-gray-700 after:bg-gray-700"></div>
|
||
|
||
<h3 class="font-semibold text-xl text-blue-300">4. 潜在风险与挑战</h3>
|
||
<ul class="list-disc pl-5 space-y-2">
|
||
<li><strong>技术风险:</strong> 麒麟芯片在先进制程上能否持续追赶存在不确定性。</li>
|
||
<li><strong>商业化风险:</strong> 渠道库存压力与万元价位段的市占率能否稳固。</li>
|
||
<li><strong>政策与竞争风险:</strong> 外部制裁升级可能性与行业内激烈竞争。</li>
|
||
</ul>
|
||
|
||
<div class="divider before:bg-gray-700 after:bg-gray-700"></div>
|
||
|
||
<h3 class="font-semibold text-xl text-blue-300">5. 综合结论与投资启示</h3>
|
||
<p>华为Pura70概念已进入由<strong>销量数据、供应链财报和生态进展</strong>驱动的<strong>基本面驱动阶段</strong>。</p>
|
||
<h4>最具投资价值的细分环节:</h4>
|
||
<ol class="list-decimal pl-5 space-y-2">
|
||
<li><strong>核心创新组件供应商:</strong> 关注与伸缩摄像头、卫星通信、昆仑玻璃等深度绑定的“独家”或“一供”公司。</li>
|
||
<li><strong>国产化替代“新面孔”:</strong> 关注首次进入华为高端旗舰机供应链的芯片或材料公司。</li>
|
||
<li><strong>纯血鸿蒙生态伙伴:</strong> 布局与华为深度合作的原生应用开发商、软件服务商。</li>
|
||
</ol>
|
||
</section>
|
||
|
||
|
||
<!-- Bento Grid Section -->
|
||
<div class="bento-grid">
|
||
|
||
<!-- Sales Chart -->
|
||
<div class="grid-item col-span-lg-8 glass-card p-4 md:p-6 min-h-[400px] flex flex-col">
|
||
<h3 class="text-xl font-bold mb-4 text-white">周度销量趋势 (台)</h3>
|
||
<div id="salesChart" class="flex-grow"></div>
|
||
</div>
|
||
|
||
<!-- Key Data Points -->
|
||
<div class="grid-item col-span-lg-4 glass-card p-6 flex flex-col justify-between">
|
||
<div>
|
||
<h3 class="text-xl font-bold mb-4 text-white">市场表现速览</h3>
|
||
<p class="text-3xl font-bold text-cyan-400">1000万+</p>
|
||
<p class="text-gray-400 mb-4">台 (全生命周期销量预测)</p>
|
||
<ul class="space-y-3 text-gray-300">
|
||
<li class="flex items-start"><span class="badge badge-success badge-xs mr-3 mt-1.5"></span><span><strong>市场热度:</strong> 发布即"秒空"，销售火爆，现趋于平稳。</span></li>
|
||
<li class="flex items-start"><span class="badge badge-warning badge-xs mr-3 mt-1.5"></span><span><strong>渠道备货:</strong> 高达1400-1500万台，存在潜在库存压力。</span></li>
|
||
<li class="flex items-start"><span class="badge badge-info badge-xs mr-3 mt-1.5"></span><span><strong>价格策略:</strong> 近期开启降价促销，Ultra最高优惠2000元。</span></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tech Specs -->
|
||
<div class="grid-item col-span-lg-6 glass-card p-6">
|
||
<h3 class="text-xl font-bold mb-4 text-white">核心技术亮点</h3>
|
||
<div class="space-y-4">
|
||
<div class="p-4 rounded-xl bg-black bg-opacity-20">
|
||
<h4 class="font-bold text-purple-300">影像系统 (核心升级)</h4>
|
||
<p class="text-sm text-gray-300">Ultra版搭载全球首款<strong>超聚光伸缩摄像头</strong>，配备1英寸大底传感器与F1.6物理光圈，支持传感器位移防抖和风驰闪拍。</p>
|
||
</div>
|
||
<div class="p-4 rounded-xl bg-black bg-opacity-20">
|
||
<h4 class="font-bold text-purple-300">芯片与OS</h4>
|
||
<p class="text-sm text-gray-300">搭载全新<strong>麒麟9010芯片</strong>与<strong>HarmonyOS 4.2</strong>，即将首批升级纯血鸿蒙。</p>
|
||
</div>
|
||
<div class="p-4 rounded-xl bg-black bg-opacity-20">
|
||
<h4 class="font-bold text-purple-300">AI与智慧功能</h4>
|
||
<p class="text-sm text-gray-300">接入<strong>盘古大模型</strong>，支持AI隔空操控、AI消除修图、文档资讯摘要等功能。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Supply Chain Impact -->
|
||
<div class="grid-item col-span-lg-6 glass-card p-6 flex flex-col justify-center items-center text-center">
|
||
<h3 class="text-xl font-bold mb-4 text-white">供应链强劲带动</h3>
|
||
<div class="stats bg-transparent text-primary-content shadow-none">
|
||
<div class="stat">
|
||
<div class="stat-title text-gray-400">核心设备供应商Q1营收</div>
|
||
<div class="stat-value text-green-400 glow-text text-5xl">+86.98%</div>
|
||
<div class="stat-desc text-green-300 text-lg">“在Pura70产线的带动下实现翻倍”</div>
|
||
</div>
|
||
</div>
|
||
<p class="mt-4 text-gray-300">Pura70系列的生产显著拉动了光学模组、OLED面板等国产供应链环节，验证了其对产业的深度赋能。</p>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- Product Matrix -->
|
||
<section class="glass-card p-6 md:p-8">
|
||
<h2 class="section-title">Pura 70 系列产品矩阵</h2>
|
||
<div class="overflow-x-auto">
|
||
<table class="table table-zebra w-full">
|
||
<thead>
|
||
<tr>
|
||
<th>型号</th>
|
||
<th>后置摄像头配置</th>
|
||
<th>电池与快充</th>
|
||
<th>起售价 (元)</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="font-bold">Pura 70</td>
|
||
<td>50MP主摄 (OIS) + 13MP超广角 + 12MP潜望长焦 (OIS)</td>
|
||
<td>4900mAh | 66W有线 + 50W无线</td>
|
||
<td>5499</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="font-bold">Pura 70 Pro</td>
|
||
<td>50MP主摄 (OIS) + 12.5MP超广角 + 48MP超聚光微距长焦 (OIS)</td>
|
||
<td>5050mAh | 100W有线 + 80W无线</td>
|
||
<td>6499</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="font-bold text-blue-300">Pura 70 Pro+</td>
|
||
<td>同Pro版本</td>
|
||
<td>5050mAh | 100W有线 + 80W无线</td>
|
||
<td>7999</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="font-bold text-purple-300">Pura 70 Ultra</td>
|
||
<td>50MP伸缩主摄 (1英寸, 传感器位移防抖) + 40MP超广角 + 50MP超聚光微距长焦 (OIS)</td>
|
||
<td>5200mAh | 100W有线 + 80W无线</td>
|
||
<td>9999</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Stock List -->
|
||
<section class="glass-card p-6 md:p-8">
|
||
<h2 class="section-title">相关产业链公司梳理</h2>
|
||
<div class="overflow-x-auto">
|
||
<table class="table w-full">
|
||
<thead>
|
||
<tr>
|
||
<th>股票名称</th>
|
||
<th>股票代码</th>
|
||
<th>关联原因</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<!-- Data will be populated here -->
|
||
<tr><td>欧菲光</td><td><a href="https://valuefrontier.cn/company?scode=002456" target="_blank" class="link link-hover link-info">002456</a></td><td>摄像头模组</td></tr>
|
||
<tr><td>光弘科技</td><td><a href="https://valuefrontier.cn/company?scode=300735" target="_blank" class="link link-hover link-info">300735</a></td><td>代工</td></tr>
|
||
<tr><td>华力创通</td><td><a href="https://valuefrontier.cn/company?scode=300045" target="_blank" class="link link-hover link-info">300045</a></td><td>卫星通信</td></tr>
|
||
<tr><td>蓝思科技</td><td><a href="https://valuefrontier.cn/company?scode=300433" target="_blank" class="link link-hover link-info">300433</a></td><td>玻璃盖板</td></tr>
|
||
<tr><td>韦尔股份</td><td></td><td>CIS（图像传感器）</td></tr>
|
||
<tr><td>思特威</td><td><a href="https://valuefrontier.cn/company?scode=688213" target="_blank" class="link link-hover link-info">688213</a></td><td>CIS（图像传感器）</td></tr>
|
||
<tr><td>联创电子</td><td><a href="https://valuefrontier.cn/company?scode=002036" target="_blank" class="link link-hover link-info">002036</a></td><td>玻塑混合镜头</td></tr>
|
||
<tr><td>水晶光电</td><td><a href="https://valuefrontier.cn/company?scode=002273" target="_blank" class="link link-hover link-info">002273</a></td><td>旋涂滤光片</td></tr>
|
||
<tr><td>卓胜微</td><td><a href="https://valuefrontier.cn/company?scode=300782" target="_blank" class="link link-hover link-info">300782</a></td><td>射频芯片及天线</td></tr>
|
||
<tr><td>南芯科技</td><td><a href="https://valuefrontier.cn/company?scode=688484" target="_blank" class="link link-hover link-info">688484</a></td><td>模拟芯片</td></tr>
|
||
<tr><td>京东方</td><td></td><td>面板</td></tr>
|
||
<tr><td>维信诺</td><td><a href="https://valuefrontier.cn/company?scode=002387" target="_blank" class="link link-hover link-info">002387</a></td><td>面板</td></tr>
|
||
<tr><td>欣旺达</td><td><a href="https://valuefrontier.cn/company?scode=300207" target="_blank" class="link link-hover link-info">300207</a></td><td>电池</td></tr>
|
||
<tr><td>德赛电池</td><td><a href="https://valuefrontier.cn/company?scode=000049" target="_blank" class="link link-hover link-info">000049</a></td><td>电池</td></tr>
|
||
<tr><td>长电科技</td><td><a href="https://valuefrontier.cn/company?scode=600584" target="_blank" class="link link-hover link-info">600584</a></td><td>封测</td></tr>
|
||
<tr><td>立讯精密</td><td><a href="https://valuefrontier.cn/company?scode=002475" target="_blank" class="link link-hover link-info">002475</a></td><td>连接器</td></tr>
|
||
<tr><td>领益智造</td><td><a href="https://valuefrontier.cn/company?scode=002600" target="_blank" class="link link-hover link-info">002600</a></td><td>结构件</td></tr>
|
||
<tr><td>深南电路</td><td><a href="https://valuefrontier.cn/company?scode=002916" target="_blank" class="link link-hover link-info">002916</a></td><td>载板</td></tr>
|
||
<tr><td>舜宇光学</td><td></td><td>摄像头模组</td></tr>
|
||
<tr><td>瑞声科技</td><td></td><td>声学零部件</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- Footer -->
|
||
<footer class="mt-12 text-center text-xs text-gray-500">
|
||
<p>北京价值前沿科技有限公司 AI投研agent：“价小前投研” 进行投研呈现</p>
|
||
<p>本报告为AI合成数据，投资需谨慎。</p>
|
||
</footer>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
var chartDom = document.getElementById('salesChart');
|
||
var myChart = echarts.init(chartDom, 'dark');
|
||
var option;
|
||
|
||
const salesData = {
|
||
weeks: ['第29周', '第31周', '第32周', '第33周', '第37周', '第39周'],
|
||
models: {
|
||
'PURA70': [67744, 53000, 55605, 50000, 28763, 27553],
|
||
'Pro': [70231, 93675, 101921, 87027, 75737, 77342],
|
||
'Pro+': [47359, 42567, 40105, 34541, 25737, 24947],
|
||
'ULTRA': [15077, 16514, 14079, 13730, 10658, 11895],
|
||
'北斗卫星消息版': [0, 0, 0, 0, 55684, 45000]
|
||
}
|
||
};
|
||
|
||
const seriesData = Object.keys(salesData.models).map(key => ({
|
||
name: key,
|
||
type: 'line',
|
||
smooth: true,
|
||
symbol: 'circle',
|
||
symbolSize: 8,
|
||
data: salesData.models[key]
|
||
}));
|
||
|
||
option = {
|
||
backgroundColor: 'transparent',
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
backgroundColor: 'rgba(10, 15, 40, 0.8)',
|
||
borderColor: 'rgba(255, 255, 255, 0.2)',
|
||
textStyle: {
|
||
color: '#E0E0E0'
|
||
}
|
||
},
|
||
legend: {
|
||
data: Object.keys(salesData.models),
|
||
textStyle: {
|
||
color: '#A0AEC0'
|
||
},
|
||
bottom: 0,
|
||
itemWidth: 15,
|
||
itemHeight: 15
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '15%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: salesData.weeks,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#4A5568'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: '#A0AEC0'
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
color: '#A0AEC0',
|
||
formatter: function (value) {
|
||
return value / 10000 + 'w';
|
||
}
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255, 0.1)',
|
||
type: 'dashed'
|
||
}
|
||
}
|
||
},
|
||
series: seriesData,
|
||
color: ['#3b82f6', '#8b5cf6', '#10b981', '#f97316', '#ef4444']
|
||
};
|
||
|
||
option && myChart.setOption(option);
|
||
|
||
window.addEventListener('resize', () => {
|
||
myChart.resize();
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |