关于使用DeepSeek来做成绩分析报告接连发了好几篇文章，反响还不错，有的已经有10000的阅读量。有不少老师文章后留言，提出一些新的问题和需求。有些关于操作疑问的，我都已经在留言后回复了。今天专门解决一下有老师提出来的新需求——
成绩分析报告里的图表能不能保存成图片？
数据能不能直接在本地提交？这样就不用自己修改代码了，对编程没有经验的老师就更友好了。
但是要怎么做的？
为了突出解决问题，我就将成绩分析的任务简化一点：让DeepSeek把这个班级的成绩学科相关度进行热点图绘制，提供保存为图片的功能，同时数据表示根据需要上传的，不要把数据写死在H5页面中。
实际操作中，你可以将一个保留完整数据结构的Excel文件作为附件提交给DeepSeek，数据可以做一些脱敏处理，比如将数字都变成0或者都在原来基础上乘以0.567之类的。
温馨提示
通过下面的提示词完成的成绩分析H5页面中是没有任何成绩数据的，可以有效地保护好成绩信息，使其全部只在你的电脑上，不跑到外面去。
注意
然后，我就让DeepSeek干活了！
完整的提示词如下，关键点我做了一些标注，其余可以根据你的真实需要进行修改。
请基于提供的成绩表数据，创建一个纯H5页面实现以下功能：
1. 数据可视化要求：
– 使用Echarts 5+绘制学科成绩相关度热点图
– 计算语文、数学、英语、政治、历史、地理六门学科之间的Pearson相关系数矩阵
– 热点图需包含：
* 颜色渐变映射
* 学科名称坐标轴标签
* 相关系数值标签显示
* 自适应容器尺寸
2. 数据来源
– 通过纯前端JS（ SheetJS）读取本地Excel文件，读取学科成绩
– 数据分析使用的基础数据必须与本地Excel文件的数据一致，不能用虚拟的数据
– H5页面中不得将成绩数据进行“硬编码”，避免数据泄露
3. 交互功能：
– 响应式设计，适配不同屏幕尺寸
– 悬浮显示具体相关系数值
– 使用Echarts提供的”下载图表”按钮，支持导出为PNG格式
– 提供3种经典商务配色供用户选择
4. 页面要求：
– 纯HTML5实现，无需后端依赖
– 包含标准HTML5文档结构
– 内联CSS和JavaScript
– 标题显示”1班学科成绩相关度分析”
– 在图表下方注明数据来源
5. 代码规范：
– 使用ES6语法
– 添加必要注释
– 做好错误处理
– 使用CDN引入Echarts库和 SheetJS库
– 禁止使用cdn.jsdelivr.net的CDN
– 可以使用cdn.bootcdn.net或unpkg.com或cdn.staticfile.org的CDN
6. 输出格式：
– 返回完整可运行的HTML代码，不得简化代码，不得将代码拆分
– 确保代码可直接复制使用
特别提醒一下，由于生成式大模型基本都是概率模型，所以还是有一定概率出现不听话的情况，导致图表显示不了。
那么这种情况下，大家最主要的还是可以请大模型给你换一个CDN的源，因为有些CDN源国内没法访问。当然，这种情况是各地不同的。所以我上面提供了三个备用的CDN源，只是我这里cdn.jsdelivr.net的CDN访问不了而已。
有什么问题欢迎大家留言！如果你是第一次读这个系列文章可以先读一下前面3篇。★（3）三步走，彻底解决DeepSeek做成绩分析偷懒的问题！★（2）就一句话，DeepSeek做的成绩分析显示图表！★（1）有了DeepSeek，教师做成绩分析该换个思路了！
下面我把DeepSeek生成的源代码给大家。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1班学科成绩相关度分析</title>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
}
.container {
max-width: 1000px;
margin: 0 auto;
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1 {
text-align: center;
color: #333;
margin-bottom: 30px;
}
#chart-container {
width: 100%;
height: 600px;
margin: 20px 0;
}
.controls {
display: flex;
justify-content: center;
margin-bottom: 20px;
flex-wrap: wrap;
gap: 10px;
}
.color-scheme-btn {
padding: 8px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
transition: all 0.3s;
}
.color-scheme-btn:hover {
transform: scale(1.05);
}
.data-source {
text-align: center;
color: #666;
font-size: 14px;
margin-top: 20px;
}
.file-input {
margin: 10px 0;
text-align: center;
}
@media (max-width: 768px) {
#chart-container {
height: 400px;
}
}
</style>
</head>
<body>
<div class="container">
<h1>1班学科成绩相关度分析</h1>
<div class="file-input">
<input type="file" id="excel-file" accept=".xlsx,.xls" />
<p>请上传Excel成绩文件</p>
</div>
<div class="controls">
<button class="color-scheme-btn" style="background-color: #1f77b4; color: white;" onclick="changeColorScheme('blue-white-red')">蓝白红渐变</button>
<button class="color-scheme-btn" style="background-color: #2ca02c; color: white;" onclick="changeColorScheme('green-white-purple')">绿白紫渐变</button>
<button class="color-scheme-btn" style="background-color: #ff7f0e; color: white;" onclick="changeColorScheme('orange-white-blue')">橙白蓝渐变</button>
</div>
<div id="chart-container"></div>
<div class="data-source">
数据来源：本地Excel文件 - 1班成绩表测试.xlsx
</div>
</div>
<script>
// 全局变量
let myChart = null;
let currentColorScheme = 'blue-white-red';
const subjects = ['语文', '数学', '英语', '政治', '历史', '地理'];
// 初始化图表
function initChart() {
const chartDom = document.getElementById('chart-container');
myChart = echarts.init(chartDom);
// 响应式调整
window.addEventListener('resize', function() {
if (myChart) {
myChart.resize();
}
});
}
// 计算Pearson相关系数矩阵
function calculateCorrelationMatrix(data) {
const matrix = [];
const n = subjects.length;
// 初始化矩阵
for (let i = 0; i < n; i++) {
matrix[i] = new Array(n).fill(0);
}
// 计算每对学科的相关系数
for (let i = 0; i < n; i++) {
for (let j = 0; j < n; j++) {
if (i === j) {
matrix[i][j] = 1; // 对角线为1
} else if (j > i) {
const corr = pearsonCorrelation(
data.map(row => row[subjects[i]]),
data.map(row => row[subjects[j]])
);
matrix[i][j] = corr;
matrix[j][i] = corr; // 对称矩阵
}
}
}
return matrix;
}
// 计算两个数组的Pearson相关系数
function pearsonCorrelation(x, y) {
const n = x.length;
if (n !== y.length || n === 0) return 0;
// 计算均值
const meanX = x.reduce((sum, val) => sum + val, 0) / n;
const meanY = y.reduce((sum, val) => sum + val, 0) / n;
// 计算协方差和标准差
let cov = 0, stdX = 0, stdY = 0;
for (let i = 0; i < n; i++) {
const diffX = x[i] - meanX;
const diffY = y[i] - meanY;
cov += diffX * diffY;
stdX += diffX * diffX;
stdY += diffY * diffY;
}
// 计算相关系数
const denominator = Math.sqrt(stdX * stdY);
return denominator === 0 ? 0 : cov / denominator;
}
// 更新图表
function updateChart(correlationMatrix) {
if (!myChart) return;
// 准备数据
const data = [];
for (let i = 0; i < subjects.length; i++) {
for (let j = 0; j < subjects.length; j++) {
data.push([i, j, correlationMatrix[i][j]]);
}
}
// 设置颜色方案
let visualMapColors;
switch (currentColorScheme) {
case 'green-white-purple':
visualMapColors = ['#2ca02c', '#ffffff', '#9467bd'];
break;
case 'orange-white-blue':
visualMapColors = ['#ff7f0e', '#ffffff', '#1f77b4'];
break;
case 'blue-white-red':
default:
visualMapColors = ['#1f77b4', '#ffffff', '#d62728'];
}
// 配置项
const option = {
title: {
text: '学科成绩相关度热点图',
left: 'center'
},
tooltip: {
position: 'top',
formatter: function(params) {
return `${subjects[params.value[0]]} & ${subjects[params.value[1]]}<br>相关系数: ${params.value[2].toFixed(3)}`;
}
},
grid: {
left: '3%',
right: '7%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: subjects,
splitArea: {
show: true
},
axisLabel: {
rotate: 45
}
},
yAxis: {
type: 'category',
data: subjects,
splitArea: {
show: true
}
},
visualMap: {
min: -1,
max: 1,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '0%',
inRange: {
color: visualMapColors
}
},
series: [{
name: '相关系数',
type: 'heatmap',
data: data,
label: {
show: true,
formatter: function(params) {
return params.value[2].toFixed(2);
}
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}],
toolbox: {
feature: {
saveAsImage: {
title: '保存为图片',
type: 'png',
name: '学科成绩相关度分析'
}
},
right: 20
}
};
myChart.setOption(option);
}
// 更改颜色方案
function changeColorScheme(scheme) {
currentColorScheme = scheme;
if (window.correlationData) {
updateChart(window.correlationData);
}
}
// 处理Excel文件
function handleFile(file) {
const reader = new FileReader();
reader.onload = function(e) {
try {
const data = e.target.result;
const workbook = XLSX.read(data, { type: 'array' });
// 获取第一个工作表
const firstSheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[firstSheetName];
// 转换为JSON
const jsonData = XLSX.utils.sheet_to_json(worksheet);
// 提取需要的学科成绩数据
const scoreData = jsonData.map(row => {
const scoreRow = {};
subjects.forEach(subject => {
scoreRow[subject] = parseFloat(row[subject]) || 0;
});
return scoreRow;
});
// 计算相关系数矩阵
const correlationMatrix = calculateCorrelationMatrix(scoreData);
window.correlationData = correlationMatrix; // 存储供颜色方案切换使用
// 更新图表
updateChart(correlationMatrix);
} catch (error) {
console.error('Error processing file:', error);
alert('处理文件时出错: ' + error.message);
}
};
reader.readAsArrayBuffer(file);
}
// 初始化
document.addEventListener('DOMContentLoaded', function() {
initChart();
// 文件上传处理
document.getElementById('excel-file').addEventListener('change', function(e) {
const file = e.target.files[0];
if (file) {
handleFile(file);
}
});
// 默认加载示例数据（仅用于演示，实际使用时应通过文件上传）
// 注意：根据要求，我们不硬编码数据，所以这里注释掉
// 实际使用时需要通过上传Excel文件来加载数据
});
</script>
</body>
</html>本文由 admin 发布在 Relive-Pro主题演示站，转载此文请保持文章完整性，并请附上文章来源（Relive-Pro主题演示站）及本页链接。
原文链接：https://dnsy.nxskgs.com/huodong%e4%bb%8b%e7%bb%8d/1522.html
原文链接：https://dnsy.nxskgs.com/huodong%e4%bb%8b%e7%bb%8d/1522.html
