423 lines
18 KiB
HTML
423 lines
18 KiB
HTML
|
||
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
<title>煤炭行业分析报告</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap" rel="stylesheet" />
|
||
<!-- Font Awesome Icons -->
|
||
<script src="https://kit.fontawesome.com/1d2b6c4f81.js" crossorigin="anonymous"></script>
|
||
<!-- Tailwind CSS -->
|
||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
||
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
|
||
<!-- Chart.js -->
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||
<!-- tsParticles -->
|
||
<script src="https://cdn.jsdelivr.net/npm/tsparticles@3/tsparticles.bundle.min.js"></script>
|
||
<style>
|
||
body {
|
||
font-family: 'Noto Sans SC', sans-serif;
|
||
background-color: #0f172a;
|
||
color: #e2e8f0;
|
||
}
|
||
.card-bg {
|
||
background: rgba(30, 41, 59, 0.7);
|
||
backdrop-filter: blur(10px);
|
||
border: 1px solid rgba(100, 116, 139, 0.3);
|
||
}
|
||
.table-row:hover {
|
||
background-color: rgba(51, 65, 85, 0.5);
|
||
}
|
||
#tsparticles {
|
||
position: fixed;
|
||
width: 100%;
|
||
height: 100%;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: -1;
|
||
}
|
||
.highlight-text {
|
||
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
color: transparent;
|
||
font-weight: 700;
|
||
}
|
||
.capacity-bar {
|
||
height: 8px;
|
||
border-radius: 4px;
|
||
background-color: rgba(100, 116, 139, 0.3);
|
||
overflow: hidden;
|
||
}
|
||
.capacity-fill {
|
||
height: 100%;
|
||
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
|
||
border-radius: 4px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="min-h-screen relative">
|
||
<div id="tsparticles"></div>
|
||
|
||
<div class="container mx-auto px-4 py-8 relative z-10">
|
||
<!-- 标题部分 -->
|
||
<div class="text-center mb-12">
|
||
<h1 class="text-4xl md:text-5xl font-bold mb-4 highlight-text">煤炭行业产能分析报告</h1>
|
||
<p class="text-lg text-slate-300 max-w-3xl mx-auto">
|
||
深度剖析中国煤炭行业产能布局，揭示核心企业生产现状与未来发展趋势
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 行业洞察部分 -->
|
||
<div class="card-bg rounded-2xl p-6 mb-8 shadow-xl">
|
||
<div class="flex items-center mb-4">
|
||
<div class="w-1 h-6 bg-blue-500 mr-3"></div>
|
||
<h2 class="text-2xl font-bold text-white">行业洞察</h2>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
|
||
<div class="bg-slate-800/50 rounded-xl p-5 border border-slate-700/50">
|
||
<div class="flex items-center mb-3">
|
||
<div class="p-2 bg-blue-500/20 rounded-lg mr-3">
|
||
<i class="fas fa-industry text-blue-400"></i>
|
||
</div>
|
||
<h3 class="text-lg font-semibold text-white">产能集中度</h3>
|
||
</div>
|
||
<p class="text-slate-300 text-sm">
|
||
头部五家企业（中国神华、陕西煤业、兖矿能源、中煤能源、潞安环能）占据行业主导地位，合计产能超过8亿吨/年，占全国总产能的显著比例。
|
||
</p>
|
||
</div>
|
||
|
||
<div class="bg-slate-800/50 rounded-xl p-5 border border-slate-700/50">
|
||
<div class="flex items-center mb-3">
|
||
<div class="p-2 bg-purple-500/20 rounded-lg mr-3">
|
||
<i class="fas fa-chart-line text-purple-400"></i>
|
||
</div>
|
||
<h3 class="text-lg font-semibold text-white">区域分布</h3>
|
||
</div>
|
||
<p class="text-slate-300 text-sm">
|
||
山西、陕西、内蒙古、山东、安徽五大产区集中了全国主要煤炭产能，其中山西企业数量最多，陕西煤业单省产能领先。
|
||
</p>
|
||
</div>
|
||
|
||
<div class="bg-slate-800/50 rounded-xl p-5 border border-slate-700/50">
|
||
<div class="flex items-center mb-3">
|
||
<div class="p-2 bg-green-500/20 rounded-lg mr-3">
|
||
<i class="fas fa-hammer text-green-400"></i>
|
||
</div>
|
||
<h3 class="text-lg font-semibold text-white">扩张趋势</h3>
|
||
</div>
|
||
<p class="text-slate-300 text-sm">
|
||
头部企业积极扩张产能，中国神华、陕西煤业、兖矿能源等均有在建产能，预计未来2-3年内将逐步释放，进一步提升市场集中度。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-gradient-to-r from-blue-900/30 to-purple-900/30 rounded-xl p-5 border border-slate-700/50">
|
||
<h3 class="text-lg font-semibold text-white mb-3">核心观点</h3>
|
||
<p class="text-slate-300">
|
||
煤炭行业正处于结构性优化阶段，产能向头部企业集中趋势明显。在能源保供政策背景下，大型煤炭企业凭借规模优势、资源禀赋和先进技术，将持续巩固市场地位。同时，行业正积极向绿色低碳转型，探索清洁高效利用路径，为长期可持续发展奠定基础。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 股票数据表格部分 -->
|
||
<div class="card-bg rounded-2xl p-6 shadow-xl">
|
||
<div class="flex items-center justify-between mb-6">
|
||
<div class="flex items-center">
|
||
<div class="w-1 h-6 bg-blue-500 mr-3"></div>
|
||
<h2 class="text-2xl font-bold text-white">企业产能数据</h2>
|
||
</div>
|
||
<div class="text-sm text-slate-400">
|
||
数据来源：煤炭行业表格
|
||
</div>
|
||
</div>
|
||
|
||
<div class="overflow-x-auto">
|
||
<table class="w-full">
|
||
<thead>
|
||
<tr class="border-b border-slate-700">
|
||
<th class="py-3 px-4 text-left text-sm font-semibold text-slate-300">企业名称</th>
|
||
<th class="py-3 px-4 text-left text-sm font-semibold text-slate-300">地区</th>
|
||
<th class="py-3 px-4 text-left text-sm font-semibold text-slate-300">2024年产量(万吨)</th>
|
||
<th class="py-3 px-4 text-left text-sm font-semibold text-slate-300">核定产能(万吨)</th>
|
||
<th class="py-3 px-4 text-left text-sm font-semibold text-slate-300">在建产能(万吨)</th>
|
||
<th class="py-3 px-4 text-left text-sm font-semibold text-slate-300">产能利用率</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="stockTableBody">
|
||
<!-- 表格内容将通过JavaScript动态生成 -->
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 数据可视化部分 -->
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mt-8">
|
||
<div class="card-bg rounded-2xl p-6 shadow-xl">
|
||
<h3 class="text-xl font-bold text-white mb-4">区域产能分布</h3>
|
||
<canvas id="regionChart" height="300"></canvas>
|
||
</div>
|
||
|
||
<div class="card-bg rounded-2xl p-6 shadow-xl">
|
||
<h3 class="text-xl font-bold text-white mb-4">头部企业产量对比</h3>
|
||
<canvas id="topCompaniesChart" height="300"></canvas>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 初始化粒子背景
|
||
tsParticles.load("tsparticles", {
|
||
particles: {
|
||
number: {
|
||
value: 80,
|
||
density: {
|
||
enable: true,
|
||
value_area: 800
|
||
}
|
||
},
|
||
color: {
|
||
value: "#3b82f6"
|
||
},
|
||
shape: {
|
||
type: "circle"
|
||
},
|
||
opacity: {
|
||
value: 0.5,
|
||
random: false
|
||
},
|
||
size: {
|
||
value: 3,
|
||
random: true
|
||
},
|
||
move: {
|
||
enable: true,
|
||
speed: 1,
|
||
direction: "none",
|
||
random: true,
|
||
straight: false,
|
||
out_mode: "out"
|
||
}
|
||
},
|
||
interactivity: {
|
||
events: {
|
||
onhover: {
|
||
enable: true,
|
||
mode: "repulse"
|
||
}
|
||
}
|
||
}
|
||
});
|
||
|
||
// 股票数据
|
||
const stockData = [
|
||
{'stock': '中国神华', 'region': '产量前五', '2024年产量(万吨)': '32710', '核定产能(万吨)': '35130', '在建产能(万吨)': '1600'},
|
||
{'stock': '陕西煤业', 'region': '产量前五/陕西', '2024年产量(万吨)': '17049', '核定产能(万吨)': '16200', '在建产能(万吨)': '2000'},
|
||
{'stock': '兖矿能源', 'region': '产量前五/山东', '2024年产量(万吨)': '14165', '核定产能(万吨)': '23329(含境外)', '在建产能(万吨)': '1180'},
|
||
{'stock': '中煤能源', 'region': '产量前五/安徽', '2024年产量(万吨)': '13757', '核定产能(万吨)': '17000', '在建产能(万吨)': '640'},
|
||
{'stock': '潞安环能', 'region': '产量前五/山西', '2024年产量(万吨)': '5728', '核定产能(万吨)': '5000', '在建产能(万吨)': '—'},
|
||
{'stock': '山西焦煤', 'region': '山西', '2024年产量(万吨)': '4480', '核定产能(万吨)': '4480', '在建产能(万吨)': '—'},
|
||
{'stock': '山煤国际', 'region': '山西', '2024年产量(万吨)': '3300', '核定产能(万吨)': '—', '在建产能(万吨)': '—'},
|
||
{'stock': '晋控煤业', 'region': '山西', '2024年产量(万吨)': '3450', '核定产能(万吨)': '3510', '在建产能(万吨)': '—'},
|
||
{'stock': '华阳股份', 'region': '山西', '2024年产量(万吨)': '3290', '核定产能(万吨)': '—', '在建产能(万吨)': '1000'},
|
||
{'stock': '兰花科创', 'region': '山西', '2024年产量(万吨)': '1390', '核定产能(万吨)': '—', '在建产能(万吨)': '—'},
|
||
{'stock': '新集能源', 'region': '安徽', '2024年产量(万吨)': '2152', '核定产能(万吨)': '—', '在建产能(万吨)': '—'},
|
||
{'stock': '淮北矿业', 'region': '安徽', '2024年产量(万吨)': '2055', '核定产能(万吨)': '—', '在建产能(万吨)': '—'},
|
||
{'stock': '恒源煤电', 'region': '安徽', '2024年产量(万吨)': '926', '核定产能(万吨)': '—', '在建产能(万吨)': '—'},
|
||
{'stock': '平煤股份', 'region': '河南', '2024年产量(万吨)': '2800', '核定产能(万吨)': '—', '在建产能(万吨)': '—'},
|
||
{'stock': '大有能源', 'region': '河南', '2024年产量(万吨)': '968', '核定产能(万吨)': '—', '在建产能(万吨)': '—'},
|
||
{'stock': '郑州煤电', 'region': '河南', '2024年产量(万吨)': '684', '核定产能(万吨)': '—', '在建产能(万吨)': '—'},
|
||
{'stock': '电投能源', 'region': '内蒙', '2024年产量(万吨)': '4600', '核定产能(万吨)': '—', '在建产能(万吨)': '—'},
|
||
{'stock': '冀中能源', 'region': '河北', '2024年产量(万吨)': '2700', '核定产能(万吨)': '—', '在建产能(万吨)': '—'},
|
||
{'stock': '昊华能源', 'region': '北京', '2024年产量(万吨)': '1900', '核定产能(万吨)': '—', '在建产能(万吨)': '—'},
|
||
{'stock': '上海能源', 'region': '上海', '2024年产量(万吨)': '1800', '核定产能(万吨)': '—', '在建产能(万吨)': '—'},
|
||
{'stock': '盘江股份', 'region': '贵州', '2024年产量(万吨)': '1300', '核定产能(万吨)': '—', '在建产能(万吨)': '—'},
|
||
{'stock': '辽宁能源', 'region': '辽宁', '2024年产量(万吨)': '600', '核定产能(万吨)': '—', '在建产能(万吨)': '—'},
|
||
{'stock': '安源煤业', 'region': '江西', '2024年产量(万吨)': '161', '核定产能(万吨)': '—', '在建产能(万吨)': '—'},
|
||
{'stock': '宝丰能源', 'region': '焦炭', '2024年产量(万吨)': '704', '核定产能(万吨)': '—', '在建产能(万吨)': '—'},
|
||
{'stock': '陕西黑猫', 'region': '焦炭', '2024年产量(万吨)': '621-699', '核定产能(万吨)': '—', '在建产能(万吨)': '—'},
|
||
{'stock': '美锦能源', 'region': '焦炭', '2024年产量(万吨)': '584（23年）', '核定产能(万吨)': '715', '在建产能(万吨)': '—'},
|
||
{'stock': '开滦股份', 'region': '焦炭', '2024年产量(万吨)': '536（23年）', '核定产能(万吨)': '—', '在建产能(万吨)': '—'},
|
||
{'stock': '山西焦化', 'region': '焦炭', '2024年产量(万吨)': '385（23年）', '核定产能(万吨)': '—', '在建产能(万吨)': '—'},
|
||
{'stock': '安泰集团', 'region': '焦炭', '2024年产量(万吨)': '282', '核定产能(万吨)': '—', '在建产能(万吨)': '—'},
|
||
{'stock': '云煤能源', 'region': '焦炭', '2024年产量(万吨)': '240', '核定产能(万吨)': '—', '在建产能(万吨)': '—'},
|
||
{'stock': '金能科技', 'region': '焦炭', '2024年产量(万吨)': '205', '核定产能(万吨)': '—', '在建产能(万吨)': '—'},
|
||
{'stock': '宝泰隆', 'region': '焦炭', '2024年产量(万吨)': '150', '核定产能(万吨)': '—', '在建产能(万吨)': '—'}
|
||
];
|
||
|
||
// 生成表格内容
|
||
function generateTable() {
|
||
const tableBody = document.getElementById('stockTableBody');
|
||
tableBody.innerHTML = '';
|
||
|
||
stockData.forEach((stock, index) => {
|
||
const row = document.createElement('tr');
|
||
row.className = 'border-b border-slate-800 table-row';
|
||
|
||
// 计算产能利用率
|
||
let capacityUtilization = '—';
|
||
let capacityPercentage = 0;
|
||
if (stock['核定产能(万吨)'] && stock['核定产能(万吨)'] !== '—' && stock['2024年产量(万吨)'] && stock['2024年产量(万吨)'] !== '—') {
|
||
const capacity = parseFloat(stock['核定产能(万吨)'].toString().replace(/[^0-9.-]+/g,""));
|
||
const production = parseFloat(stock['2024年产量(万吨)'].toString().replace(/[^0-9.-]+/g,""));
|
||
|
||
if (!isNaN(capacity) && !isNaN(production) && capacity > 0) {
|
||
capacityPercentage = Math.min(100, Math.round((production / capacity) * 100));
|
||
capacityUtilization = capacityPercentage + '%';
|
||
}
|
||
}
|
||
|
||
row.innerHTML = `
|
||
<td class="py-4 px-4">
|
||
<div class="flex items-center">
|
||
<div class="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center mr-3">
|
||
<span class="text-white text-xs font-bold">${stock.stock.charAt(0)}</span>
|
||
</div>
|
||
<span class="font-medium text-white">${stock.stock}</span>
|
||
</div>
|
||
</td>
|
||
<td class="py-4 px-4 text-slate-300">${stock.region}</td>
|
||
<td class="py-4 px-4 text-slate-300">${stock['2024年产量(万吨)']}</td>
|
||
<td class="py-4 px-4 text-slate-300">${stock['核定产能(万吨)'] || '—'}</td>
|
||
<td class="py-4 px-4 text-slate-300">${stock['在建产能(万吨)'] || '—'}</td>
|
||
<td class="py-4 px-4">
|
||
<div class="flex items-center">
|
||
<div class="w-24 mr-3">
|
||
<div class="capacity-bar">
|
||
<div class="capacity-fill" style="width: ${capacityPercentage}%"></div>
|
||
</div>
|
||
</div>
|
||
<span class="text-slate-300 text-sm">${capacityUtilization}</span>
|
||
</div>
|
||
</td>
|
||
`;
|
||
|
||
tableBody.appendChild(row);
|
||
});
|
||
}
|
||
|
||
// 生成区域分布图表
|
||
function generateRegionChart() {
|
||
const ctx = document.getElementById('regionChart').getContext('2d');
|
||
|
||
// 统计各区域企业数量
|
||
const regionCount = {};
|
||
stockData.forEach(stock => {
|
||
const region = stock.region.split('/')[0];
|
||
regionCount[region] = (regionCount[region] || 0) + 1;
|
||
});
|
||
|
||
new Chart(ctx, {
|
||
type: 'doughnut',
|
||
data: {
|
||
labels: Object.keys(regionCount),
|
||
datasets: [{
|
||
data: Object.values(regionCount),
|
||
backgroundColor: [
|
||
'#3b82f6',
|
||
'#8b5cf6',
|
||
'#ec4899',
|
||
'#10b981',
|
||
'#f59e0b',
|
||
'#ef4444',
|
||
'#06b6d4',
|
||
'#8b5cf6'
|
||
],
|
||
borderWidth: 0
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
plugins: {
|
||
legend: {
|
||
position: 'right',
|
||
labels: {
|
||
color: '#e2e8f0',
|
||
font: {
|
||
size: 12
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// 生成头部企业产量对比图表
|
||
function generateTopCompaniesChart() {
|
||
const ctx = document.getElementById('topCompaniesChart').getContext('2d');
|
||
|
||
// 获取前5大企业
|
||
const topCompanies = stockData
|
||
.filter(stock => stock['2024年产量(万吨)'] && stock['2024年产量(万吨)'] !== '—')
|
||
.sort((a, b) => {
|
||
const aVal = parseFloat(a['2024年产量(万吨)'].toString().replace(/[^0-9.-]+/g,""));
|
||
const bVal = parseFloat(b['2024年产量(万吨)'].toString().replace(/[^0-9.-]+/g,""));
|
||
return bVal - aVal;
|
||
})
|
||
.slice(0, 5);
|
||
|
||
new Chart(ctx, {
|
||
type: 'bar',
|
||
data: {
|
||
labels: topCompanies.map(company => company.stock),
|
||
datasets: [{
|
||
label: '2024年产量(万吨)',
|
||
data: topCompanies.map(company => {
|
||
return parseFloat(company['2024年产量(万吨)'].toString().replace(/[^0-9.-]+/g,""));
|
||
}),
|
||
backgroundColor: [
|
||
'rgba(59, 130, 246, 0.8)',
|
||
'rgba(139, 92, 246, 0.8)',
|
||
'rgba(236, 72, 153, 0.8)',
|
||
'rgba(16, 185, 129, 0.8)',
|
||
'rgba(245, 158, 11, 0.8)'
|
||
],
|
||
borderWidth: 0,
|
||
borderRadius: 6
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
scales: {
|
||
y: {
|
||
beginAtZero: true,
|
||
grid: {
|
||
color: 'rgba(100, 116, 139, 0.2)'
|
||
},
|
||
ticks: {
|
||
color: '#94a3b8'
|
||
}
|
||
},
|
||
x: {
|
||
grid: {
|
||
display: false
|
||
},
|
||
ticks: {
|
||
color: '#94a3b8'
|
||
}
|
||
}
|
||
},
|
||
plugins: {
|
||
legend: {
|
||
display: false
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// 页面加载完成后初始化
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
generateTable();
|
||
generateRegionChart();
|
||
generateTopCompaniesChart();
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|
||
``` |