vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update pay ui

Browse Source
This commit is contained in:
zzlgreat
2025-12-05 13:29:18 +08:00
parent 20994cfb13
commit 48d9c76c5e
1008 changed files with 417880 additions and 486974 deletions
Download Patch File Download Diff File Expand all files Collapse all files

529
public/htmls/TMA偏苯三酸酐.html Normal file
View File

@@ -0,0 +1,529 @@
<!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>TMA偏苯三酸酐 - 深度行研报告</title>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.10.1/dist/full.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.10/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=Inter:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
background-color: #0a091e;
color: #e0e0e0;
overflow-x: hidden;
position: relative;
}
.glass-card {
background: rgba(26, 28, 51, 0.4);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border: 1px solid rgba(110, 119, 180, 0.2);
box-shadow: 0 8px 32px 0 rgba(16, 17, 43, 0.37);
}
.bento-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}
.glow-effect::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(127, 90, 240, 0.15) 0%, rgba(127, 90, 240, 0) 50%);
transform: translate(-50%, -50%);
z-index: -1;
pointer-events: none;
animation: pulse 10s infinite alternate;
}
@keyframes pulse {
0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.7; }
100% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
}
.main-container::before, .main-container::after {
content: '';
position: fixed;
border-radius: 50%;
z-index: -10;
filter: blur(150px);
opacity: 0.2;
}
.main-container::before {
width: 600px;
height: 600px;
background: #4f46e5;
top: -200px;
left: -200px;
}
.main-container::after {
width: 500px;
height: 500px;
background: #db2777;
bottom: -150px;
right: -150px;
}
.table th, .table td {
border-color: rgba(110, 119, 180, 0.2) !important;
}
</style>
</head>
<body class="min-h-screen">
<div class="main-container relative p-4 sm:p-6 md:p-8">
<!-- Header -->
<header class="text-center mb-12 relative z-10">
<div class="glass-card rounded-3xl p-6 inline-block">
<h1 class="text-4xl md:text-5xl font-bold tracking-tighter text-transparent bg-clip-text bg-gradient-to-r from-purple-400 via-pink-500 to-red-500">
TMA偏苯三酸酐 深度行研报告
</h1>
<p class="mt-4 text-slate-400 text-sm">
北京价值前沿科技有限公司 AI投研agent：“价小前投研” 进行投研呈现
</p>
<p class="mt-1 text-slate-500 text-xs">本报告为AI合成数据，投资需谨慎。</p>
</div>
</header>
<!-- Insight Section -->
<section id="insight" class="mb-12">
<div class="glass-card rounded-3xl p-6 md:p-8 glow-effect">
<h2 class="text-3xl font-bold mb-6 text-cyan-300 tracking-wide">核心Insight分析</h2>
<div class="space-y-8">
<div>
<h3 class="text-xl font-semibold mb-3 text-fuchsia-400">0. 概念事件脉络</h3>
<p class="text-slate-300 leading-relaxed">
TMA（偏苯三酸酐）概念的引爆是一次典型的由<span class="font-semibold text-yellow-300">海外供给侧突发事件</span>驱动的周期性行情。核心引爆点为2024年3-4月，市场传闻全球主要生产商之一的<span class="font-semibold text-rose-400">美国英力士（Ineos Joliet）7万吨/年TMA装置发生事故并永久性关闭</span>，此事件瞬间打破全球供需平衡，导致全球供给出现巨大缺口，引发行情。
</p>
</div>
<div>
<h3 class="text-xl font-semibold mb-3 text-fuchsia-400">1. 核心观点摘要</h3>
<p class="text-slate-300 leading-relaxed">
TMA概念的本质，是一场由<span class="font-semibold text-yellow-300">海外关键产能永久性退出</span>所引爆的、在<span class="font-semibold text-yellow-300">全球寡头垄断格局</span>下上演的<span class="font-semibold text-yellow-300">供给侧结构性行情</span>。其核心驱动力在于突发的巨大供需缺口与国内厂商的绝对定价权，短期内高景气度与超额利润具备高度确定性，但长期需关注新增产能的建设进度与潜在的需求端变化。
</p>
</div>
<div class="bento-grid">
<div class="glass-card rounded-2xl p-6 col-span-1 md:col-span-2">
<h3 class="text-xl font-semibold mb-4 text-fuchsia-400">2. 核心逻辑与市场认知</h3>
<ul class="space-y-4 text-slate-300">
<li class="flex items-start">
<svg class="w-5 h-5 mr-3 text-cyan-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
<span><strong class="text-white">供给端剧烈收缩:</strong> 美国英力士7万吨产能（占全球~30%）永久退出是根源。新建产能周期长达24个月，为价格上涨提供充足时间窗口。</span>
</li>
<li class="flex items-start">
<svg class="w-5 h-5 mr-3 text-cyan-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<span><strong class="text-white">需求端价格高度不敏感:</strong> TMA在下游核心产品（如PVC线缆、粉末涂料）中成本占比极低（仅1%-3%），价格传导顺畅，下游厂商有极强承受能力。</span>
</li>
<li class="flex items-start">
<svg class="w-5 h-5 mr-3 text-cyan-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
<span><strong class="text-white">高度集中的寡头格局:</strong> 事件后全球仅剩四家有效产能，中国三家企业（正丹、百川、泰达）合计产能占全球超83%，掌握绝对定价权。</span>
</li>
<li class="flex items-start">
<svg class="w-5 h-5 mr-3 text-red-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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"></path></svg>
<span><strong class="text-red-400">预期差与风险:</strong> 市场对海外停产的<span class="font-bold">精确产能规模认知存在矛盾</span>（7万吨 vs 4.5万吨），若缺口被高估，将影响价格高点的可持续性。</span>
</li>
</ul>
</div>
<div class="glass-card rounded-2xl p-6">
<h3 class="text-xl font-semibold mb-4 text-fuchsia-400">3. 关键催化剂与发展路径</h3>
<div class="space-y-4">
<div>
<h4 class="font-semibold text-cyan-400">近期催化剂 (3-6个月)</h4>
<ul class="list-disc list-inside text-slate-300 mt-2 space-y-1">
<li>企业季度财报验证盈利能力</li>
<li>TMA产品周度/月度报价能否企稳</li>
<li>海关出口数据验证海外需求转移</li>
</ul>
</div>
<div>
<h4 class="font-semibold text-cyan-400">长期发展路径</h4>
<ol class="list-decimal list-inside text-slate-300 mt-2 space-y-1">
<li><strong class="text-white">高景气维持期 (当前 - 2025年底):</strong> 供给短缺，享受超额利润。</li>
<li><strong class="text-white">新增产能博弈期 (2026年):</strong> 泰达新材3万吨产能投产，市场开始博弈价格压制。</li>
<li><strong class="text-white">回归新均衡期 (2027年+):</strong> 供需再平衡，竞争回归成本与技术。</li>
</ol>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Charts Section -->
<section id="charts" class="mb-12">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Price Trend Chart -->
<div class="glass-card rounded-3xl p-6 lg:col-span-2">
<h3 class="text-xl font-semibold mb-4 text-cyan-300">TMA价格走势 (元/吨)</h3>
<div id="priceChart" class="w-full h-80"></div>
</div>
<!-- Capacity Share Chart -->
<div class="glass-card rounded-3xl p-6">
<h3 class="text-xl font-semibold mb-4 text-cyan-300">全球TMA产能格局演变</h3>
<div id="capacityChart" class="w-full h-80"></div>
</div>
<!-- Downstream Consumption Chart -->
<div class="glass-card rounded-3xl p-6 lg:col-span-3">
<h3 class="text-xl font-semibold mb-4 text-cyan-300">TMA下游消费结构</h3>
<div id="consumptionChart" class="w-full h-72"></div>
</div>
</div>
</section>
<!-- Data Evidence Section -->
<section id="data-evidence" class="mb-12" x-data="{ tab: 'news' }">
<div class="glass-card rounded-3xl p-6 md:p-8">
<h2 class="text-3xl font-bold mb-6 text-cyan-300">数据与事实依据</h2>
<div class="tabs tabs-boxed bg-slate-900/30 mb-6">
<a class="tab tab-lg" :class="{ 'tab-active': tab === 'news' }" @click="tab = 'news'">新闻数据</a>
<a class="tab tab-lg" :class="{ 'tab-active': tab === 'roadshow' }" @click="tab = 'roadshow'">路演纪要</a>
<a class="tab tab-lg" :class="{ 'tab-active': tab === 'research' }" @click="tab = 'research'">研报精粹</a>
</div>
<div x-show="tab === 'news'">
<div class="space-y-4">
<div class="p-4 rounded-xl bg-slate-800/50">
<h4 class="font-semibold text-lg text-fuchsia-400">市场供需与价格</h4>
<ul class="list-disc list-inside mt-2 text-slate-300 space-y-1">
<li><strong>全球格局:</strong> 2023年全球TMA产能约25.5万吨，正丹股份占8.5万吨/年。</li>
<li><strong>关键事件:</strong> 2024年4月起，市场流传美国英力士永久性关闭其TMA生产装置。</li>
<li><strong>市场状态:</strong> TMA产品逐渐呈现供不应求，销售价格和数量逐步上涨，海外市场对中国TMA需求增长显著。</li>
</ul>
</div>
<div class="p-4 rounded-xl bg-slate-800/50">
<h4 class="font-semibold text-lg text-fuchsia-400">正丹股份 (龙头)</h4>
<blockquote class="border-l-4 border-cyan-400 pl-4 text-slate-400 italic my-2">
“2024年公司实现营业收入34.8亿元，同比增长126.31%；归属于上市公司股东的净利润为11.9亿元，同比增长11949.39%。”
</blockquote>
<p class="text-slate-300">业绩增长主因TMA和TOTM产销量及单价大幅上升，单位成本稳定。公司年产6.5万吨升级改造项目在建中。</p>
</div>
<div class="p-4 rounded-xl bg-slate-800/50">
<h4 class="font-semibold text-lg text-fuchsia-400">百川股份</h4>
<p class="text-slate-300">子公司南通百川的TMA一期产线于2024年7月27日开始停车检修，因设备采购周期长导致检修进度晚于预期，最终于10月24日完成检修并恢复生产，并完成了技术优化。</p>
</div>
</div>
</div>
<div x-show="tab === 'roadshow'" x-cloak>
<div class="space-y-4">
<div class="p-4 rounded-xl bg-slate-800/50">
<h4 class="font-semibold text-lg text-fuchsia-400">核心观点 (综合多家券商)</h4>
<ul class="list-disc list-inside mt-2 text-slate-300 space-y-1">
<li><strong>事件驱动:</strong> 英力士美国工厂爆炸/不可抗力（7万吨产能），导致全球供应收缩，是所有分析的起点。</li>
<li><strong>价格影响:</strong> 国内TMA价格从年初1.4万元/吨暴涨至2.6-3.0万元/吨区间（4月数据），毛利激增。</li>
<li><strong>供需格局:</strong> 国内产能高度集中于正丹股份(8.5万吨)、百川股份(4万吨)、泰达新材(3万吨)，合计占全球产能超90%。库存降至历史低位。</li>
<li><strong>下游传导:</strong> TMA在下游成本占比仅1-3%，涨价传导至终端较为顺畅。</li>
<li><strong>推荐标的:</strong> 一致推荐正丹股份、百川股份、泰达新材。</li>
</ul>
</div>
<div class="p-4 rounded-xl bg-slate-800/50">
<h4 class="font-semibold text-lg text-fuchsia-400">数据矛盾与修正</h4>
<p class="text-slate-400"><span class="font-bold text-red-400">注意:</span> 路演纪要中关于海外停产装置的信息存在不一致。部分指向英力士7万吨装置，也有纪要修正为美国FMC公司4.5万吨装置，或提及福斯特惠勒。虽然结论（供给收缩）一致，但缺口精确规模存在不确定性。</p>
</div>
</div>
</div>
<div x-show="tab === 'research'" x-cloak>
<div class="space-y-4">
<div class="p-4 rounded-xl bg-slate-800/50">
<h4 class="font-semibold text-lg text-fuchsia-400">供给与格局</h4>
<ul class="list-disc list-inside mt-2 text-slate-300 space-y-1">
<li><strong>历史演变:</strong> 海外产能自2006年起持续退出，产能向中国集中。</li>
<li><strong>当前格局:</strong> 英力士退出后，全球仅剩意大利波林(3万吨)及中国三家企业，中国产能占比提升至<strong class="text-yellow-300">83.78%</strong>。</li>
<li><strong>供需缺口预测:</strong> 预计2024年全球实际需求约20-21万吨，实际供应量约14万吨，供需缺口达<strong class="text-red-400">6万吨</strong>。</li>
</ul>
</div>
<div class="p-4 rounded-xl bg-slate-800/50">
<h4 class="font-semibold text-lg text-fuchsia-400">价格与盈利</h4>
<blockquote class="border-l-4 border-cyan-400 pl-4 text-slate-400 italic my-2">
“2024年8月5日，TMA最高价达53,500元/吨，较2023年8月1日（12,450元/吨）增幅达329.72%。”
</blockquote>
<p class="text-slate-300">TMA毛利润从2023年三季度约650元/吨提升至2024年4月超过13000元/吨，盈利能力大幅改善。</p>
</div>
<div class="p-4 rounded-xl bg-slate-800/50">
<h4 class="font-semibold text-lg text-fuchsia-400">扩产与风险</h4>
<ul class="list-disc list-inside mt-2 text-slate-300 space-y-1">
<li><strong>建设周期:</strong> 新建TMA产能需约24个月建成。</li>
<li><strong>扩产计划:</strong> 泰达新材拟投资扩建年产3万吨TMA项目，建设期1-2年。</li>
<li><strong>核心风险:</strong> 海外工厂复产超预期、需求不及预期、原材料价格大幅波动。</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Stock Table Section -->
<section id="stocks" class="mb-12">
<div class="glass-card rounded-3xl p-6 md:p-8">
<h2 class="text-3xl font-bold mb-6 text-cyan-300">核心标的与产业链公司</h2>
<div class="overflow-x-auto">
<h3 class="text-xl font-semibold mb-4 text-fuchsia-400">核心生产企业</h3>
<table class="table table-zebra-zebra w-full text-sm">
<thead class="text-base text-slate-300">
<tr>
<th>股票名称</th>
<th>股票代码</th>
<th>核心逻辑</th>
<th>产能 (万吨)</th>
<th>关键数据/标签</th>
</tr>
</thead>
<tbody>
<tr>
<td>正丹股份</td>
<td><a href="https://valuefrontier.cn/company?scode=300641" target="_blank" class="link link-hover text-cyan-400">300641.SZ</a></td>
<td class="font-semibold text-yellow-300">全球最大TMA生产商，产业链一体化优势</td>
<td>8.5</td>
<td class="text-xs">
<span class="badge badge-primary badge-outline">绝对龙头</span>
<span>产能/市值(240410): 0.41吨/万元</span>
</td>
</tr>
<tr>
<td>百川股份</td>
<td><a href="https://valuefrontier.cn/company?scode=002455" target="_blank" class="link link-hover text-cyan-400">002455.SZ</a></td>
<td>全球第二大TMA生产商，完成技改提升稳定性</td>
<td>4.0</td>
<td class="text-xs">
<span class="badge badge-secondary badge-outline">稳健追赶者</span>
<span>近期完成检修技改</span>
</td>
</tr>
<tr>
<td>泰达新材</td>
<td><a href="https://valuefrontier.cn/company?scode=430372" target="_blank" class="link link-hover text-cyan-400">430372.NQ</a></td>
<td>具备技术优势，率先宣布扩产，业绩弹性大</td>
<td>3.0 (+3.0在建)</td>
<td class="text-xs">
<span class="badge badge-accent badge-outline">高弹性挑战者</span>
<span class="text-red-400">新三板，注意流动性</span>
</td>
</tr>
</tbody>
</table>
<h3 class="text-xl font-semibold my-6 text-fuchsia-400">产业链相关公司</h3>
<table class="table table-zebra-zebra w-full text-sm">
<thead class="text-base text-slate-300">
<tr>
<th>股票名称</th>
<th>股票代码</th>
<th>产业链位置</th>
<th>关联逻辑</th>
</tr>
</thead>
<tbody>
<tr>
<td>华锦股份</td>
<td><a href="https://valuefrontier.cn/company?scode=000059" target="_blank" class="link link-hover text-cyan-400">000059.SZ</a></td>
<td><span class="badge badge-info badge-outline">上游原料</span></td>
<td>生产TMA核心原料偏三甲苯(成本占比~60%)，是正丹股份供应商</td>
</tr>
<tr>
<td>嘉澳环保</td>
<td><a href="https://valuefrontier.cn/company?scode=603822" target="_blank" class="link link-hover text-cyan-400">603822.SH</a></td>
<td><span class="badge badge-warning badge-outline">下游应用</span></td>
<td>环保增塑剂生产企业，其生产所需材料包括偏苯三酸酐</td>
</tr>
<tr>
<td>凯盛新材</td>
<td><a href="https://valuefrontier.cn/company?scode=301069" target="_blank" class="link link-hover text-cyan-400">301069.SZ</a></td>
<td><span class="badge badge-ghost badge-outline">潜在相关</span></td>
<td>已有偏苯三酸酐提纯技术储备，为潜在进入者</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Footer -->
<footer class="text-center mt-12 text-slate-500 text-xs">
<p>北京价值前沿科技有限公司 AI投研agent：“价小前投研”</p>
<p>本报告基于公开数据由AI模型合成，不构成任何投资建议，市场有风险，投资需谨慎。</p>
<p>&copy; 2024 ValueFrontier. All Rights Reserved.</p>
</footer>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
// Price Chart
var priceChartDom = document.getElementById('priceChart');
var priceChart = echarts.init(priceChartDom);
var priceOption = {
tooltip: { trigger: 'axis', backgroundColor: 'rgba(26, 28, 51, 0.8)', borderColor: '#4f46e5', textStyle: { color: '#e0e0e0' } },
xAxis: {
type: 'category',
boundaryGap: false,
data: ['2023-H2', '2024年初', '2024-03', '2024-04', '2024-08'],
axisLine: { lineStyle: { color: '#888' } }
},
yAxis: {
type: 'value',
name: '元/吨',
splitLine: { lineStyle: { color: 'rgba(110, 119, 180, 0.2)' } },
axisLine: { lineStyle: { color: '#888' } }
},
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
series: [{
name: 'TMA价格',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 8,
data: [13000, 14000, 19500, 26000, 53500],
itemStyle: { color: '#db2777' },
lineStyle: { width: 3, color: '#db2777' },
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(219, 39, 119, 0.5)'
}, {
offset: 1,
color: 'rgba(219, 39, 119, 0)'
}])
}
}]
};
priceChart.setOption(priceOption);
// Capacity Chart
var capacityChartDom = document.getElementById('capacityChart');
var capacityChart = echarts.init(capacityChartDom);
var capacityOption = {
tooltip: { trigger: 'item', backgroundColor: 'rgba(26, 28, 51, 0.8)', borderColor: '#4f46e5', textStyle: { color: '#e0e0e0' } },
legend: {
orient: 'vertical',
left: 'left',
textStyle: { color: '#e0e0e0' }
},
series: [
{
name: '事件前格局 (25.5万吨)',
type: 'pie',
radius: ['35%', '55%'],
center: ['50%', '55%'],
label: { show: false },
data: [
{ value: 8.5, name: '正丹股份' },
{ value: 4, name: '百川股份' },
{ value: 3, name: '泰达新材' },
{ value: 3, name: '意大利波林' },
{ value: 7, name: '美国英力士' },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
{
name: '事件后格局 (18.5万吨)',
type: 'pie',
radius: [0, '25%'],
center: ['50%', '55%'],
label: {
position: 'inner',
formatter: '{d}%',
color: '#fff',
fontSize: 10
},
data: [
{ value: 8.5, name: '正丹股份' },
{ value: 4, name: '百川股份' },
{ value: 3, name: '泰达新材' },
{ value: 3, name: '意大利波林' },
]
}
]
};
capacityChart.setOption(capacityOption);
// Consumption Chart
var consumptionChartDom = document.getElementById('consumptionChart');
var consumptionChart = echarts.init(consumptionChartDom);
var consumptionOption = {
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(26, 28, 51, 0.8)',
borderColor: '#4f46e5',
textStyle: { color: '#e0e0e0' }
},
legend: {
top: '5%',
left: 'center',
textStyle: {
color: '#e0e0e0'
}
},
series: [
{
name: '下游消费结构',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#0a091e',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 20,
fontWeight: 'bold',
color: '#fff'
}
},
labelLine: {
show: false
},
data: [
{ value: 52, name: '增塑剂 (TOTM)' },
{ value: 40, name: '粉末涂料' },
{ value: 7, name: '绝缘材料' },
{ value: 1, name: '其他' }
]
}
]
};
consumptionChart.setOption(consumptionOption);
window.addEventListener('resize', function() {
priceChart.resize();
capacityChart.resize();
consumptionChart.resize();
});
});
</script>
</body>
</html>