帮忙用echarts写一段简单的学生成绩展示表格
时间: 2023-08-21 22:03:27 浏览: 51
好的,以下是一个简单的学生成绩展示表格的 echarts 代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学生成绩展示表格</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<!-- 创建一个容器用于显示 echarts 图表 -->
<div id="chart" style="width: 600px;height:400px;"></div>
<script>
// 初始化 echarts 实例
var myChart = echarts.init(document.getElementById('chart'));
// 配置项数据
var option = {
title: {
text: '学生成绩展示表格'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['语文', '数学', '英语']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['小明', '小红', '小刚', '小李', '小张']
},
series: [
{
name: '语文',
type: 'bar',
stack: '总分',
data: [90, 80, 70, 85, 95]
},
{
name: '数学',
type: 'bar',
stack: '总分',
data: [85, 90, 75, 95, 80]
},
{
name: '英语',
type: 'bar',
stack: '总分',
data: [80, 85, 90, 75, 95]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
```
这段代码可以生成一个简单的学生成绩展示表格,包含了每个学生的语文、数学、英语成绩,采用了 echarts 中的柱状图(bar)来展示数据。你可以根据自己的需求修改代码中的数据和样式。
相关推荐
![](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)