我想要一段echarts写成的html格式的代码,用来展示一个班级内,每个同学的各科成绩,并给出综合排名
时间: 2024-01-24 12:03:53 浏览: 29
以下是一个简单的 HTML 代码,使用 echarts 展示每个同学在三门课程中的成绩,并给出了综合排名:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>班级成绩排名</title>
<!-- 引入 echarts 库 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.1/dist/echarts.min.js"></script>
</head>
<body>
<!-- echarts 图表容器 -->
<div id="main" style="width: 800px;height:600px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 各科成绩数据
var data = [
{ name: '张三', score1: 89, score2: 92, score3: 91 },
{ name: '李四', score1: 91, score2: 88, score3: 93 },
{ name: '王五', score1: 87, score2: 90, score3: 89 },
{ name: '赵六', score1: 93, score2: 94, score3: 92 },
{ name: '钱七', score1: 88, score2: 91, score3: 90 },
];
// 计算综合成绩和排名
data.forEach(function(item) {
item.totalScore = item.score1 + item.score2 + item.score3;
});
data.sort(function(a, b) {
return b.totalScore - a.totalScore;
});
data.forEach(function(item, index) {
item.rank = index + 1;
});
// x轴和y轴的数据
var xData = data.map(function(item) {
return item.name;
});
var yData1 = data.map(function(item) {
return item.score1;
});
var yData2 = data.map(function(item) {
return item.score2;
});
var yData3 = data.map(function(item) {
return item.score3;
});
var yDataTotal = data.map(function(item) {
return item.totalScore;
});
var yDataRank = data.map(function(item) {
return item.rank;
});
// echarts 配置项
var option = {
title: {
text: '班级成绩排名'
},
tooltip: {},
legend: {
data:['语文','数学','英语','综合排名']
},
xAxis: {
data: xData
},
yAxis: [
{
name: '分数',
type: 'value'
},
{
name: '排名',
type: 'value',
min: 0,
max: 30
}
],
series: [
{
name: '语文',
type: 'bar',
data: yData1
},
{
name: '数学',
type: 'bar',
data: yData2
},
{
name: '英语',
type: 'bar',
data: yData3
},
{
name: '综合排名',
type: 'line',
yAxisIndex: 1,
data: yDataRank
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
```
代码中使用了 echarts 库来实现成绩图表的展示,并且使用了 JavaScript 对数据进行了处理,计算出每个同学的综合成绩和排名。在 echarts 的配置项中,使用了柱状图和折线图来展示各科成绩和综合排名。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)