选择“深度思考”模型，输入下面的提示词，如图。
已知：
产品两年各季度销售额统计表
任务：
制作一个产品两年销售同比分析简报，简报包含以下内容。
第1部分：针对表格数据，用文字描述两年销售同比分析情况；
第2部分：一个同比分析报表，该报表有5列数据，从左往右分别是产品名称、去年销售总额、今年销售总额、同比增减额、同比增长率；
第3部分：每个产品两年销售额的同比分析柱形图，以今年销售额降序排序，分类轴是产品名称，数据系列是各个产品的去年销售总额和今年销售总额；
第4部分：两年中各个季度销售总额的同比分析柱形图，分类轴是季度名称，数据系列是所有产品的去年销售总额和今年销售总额
要求设计简洁、高效、能够正常运行的HTML代码，能够在普通浏览器上运行。
注意要正确从表格中提取各个产品的两年数据绘制图表。
<!DOCTYPE html>
<html>
<head>
<title>产品销售同比分析简报（修正版）</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body { font-family: Arial, sans-serif; max-width: 1200px; margin: 0 auto; padding: 20px; }
.section { margin-bottom: 40px; }
table { border-collapse: collapse; margin: 20px 0; }
th, td { border: 1px solid #ddd; padding: 8px; text-align: right; }
th { background-color: #f5f5f5; }
.chart-container { width: 100%; height: 400px; margin: 20px 0; }
</style>
</head>
<body>
<!-- 第1部分：文字描述 -->
<div class="section">
<h2>1. 两年销售同比分析情况</h2>
<p>根据数据分析，今年总销售额为¥68,894，较去年总销售额¥83,885同比下降17.88%。其中仅产品5实现正增长（+5.76%），其余产品均有不同程度下滑，产品4降幅最大达41.50%。分季度看，今年各季度销售额均低于去年同期，第三季度同比降幅最为显著。</p>
</div>
<!-- 第2部分：修正后的同比分析报表 -->
<div class="section">
<h2>2. 产品销售同比分析表（修正版）</h2>
<table id="comparisonTable">
<tr><th>产品</th><th>去年总额</th><th>今年总额</th><th>同比增减额</th><th>同比增长率</th></tr>
</table>
</div>
<!-- 第3部分：产品销售额柱形图 -->
<div class="section">
<h2>3. 产品销售额同比对比（按今年降序）</h2>
<div class="chart-container">
<canvas id="productChart"></canvas>
</div>
</div>
<!-- 第4部分：季度销售额柱形图 -->
<div class="section">
<h2>4. 季度销售额同比对比</h2>
<div class="chart-container">
<canvas id="quarterChart"></canvas>
</div>
</div>
<script>
// 修正后的数据准备
const products = [
{ name: '产品1', lastYear: 16325, thisYear: 12209 }, // 修正产品1去年数据
{ name: '产品2', lastYear: 11498, thisYear: 9158 },
{ name: '产品3', lastYear: 10684, thisYear: 9951 },
{ name: '产品4', lastYear: 16080, thisYear: 9404 },
{ name: '产品5', lastYear: 7220, thisYear: 7636 },
{ name: '产品6', lastYear: 9969, thisYear: 6545 }
];
// 计算同比数据
products.forEach(p => {
p.diff = p.thisYear - p.lastYear;
p.rate = ((p.diff / p.lastYear) * 100).toFixed(2) + '%';
});
// 生成表格（按今年降序排序）
const table = document.getElementById('comparisonTable');
products.sort((a, b) => b.thisYear - a.thisYear).forEach(p => {
const row = `<tr>
<td>${p.name}</td>
<td>¥${p.lastYear.toLocaleString()}</td>
<td>¥${p.thisYear.toLocaleString()}</td>
<td>${p.diff > 0 ? '+' : ''}¥${p.diff.toLocaleString()}</td>
<td>${p.rate}</td>
</tr>`;
table.innerHTML += row;
});
// 产品销售额图表配置
new Chart(document.getElementById('productChart'), {
type: 'bar',
data: {
labels: products.sort((a, b) => b.thisYear - a.thisYear).map(p => p.name),
datasets: [{
label: '去年销售额',
data: products.map(p => p.lastYear),
backgroundColor: '#4e73df'
}, {
label: '今年销售额',
data: products.map(p => p.thisYear),
backgroundColor: '#1cc88a'
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
ticks: { callback: value => '¥' + value.toLocaleString() }
}
}
}
});
// 季度数据（修正后的季度合计）
const quarters = {
labels: ['1季度', '2季度', '3季度', '4季度'],
lastYear: [22252, 16003, 16838, 16683],
thisYear: [15397, 14442, 9553, 15511]
};
// 季度销售额图表配置
new Chart(document.getElementById('quarterChart'), {
type: 'bar',
data: {
labels: quarters.labels,
datasets: [{
label: '去年销售额',
data: quarters.lastYear,
backgroundColor: '#4e73df'
}, {
label: '今年销售额',
data: quarters.thisYear,
backgroundColor: '#1cc88a'
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
ticks: { callback: value => '¥' + value.toLocaleString() }
}
}
}
});
</script>
</body>
</html>