echarts学生成绩柱状图
时间: 2023-11-12 21:09:01 浏览: 61
Echarts学生成绩柱状图是一种用于展示学生考试成绩的柱状图表,可以通过鼠标悬停柱形时显示数值内容等方式进行交互。要绘制这样的柱状图,需要引入Echarts文件并定义一个有宽高的容器,然后配置相应的参数,最后将数据传入即可。以下是一个简单的Echarts学生成绩柱状图的代码示例:
```javascript
// 引入Echarts文件
<script src="/lib/echarts.min.js"></script>
// 定义一个有宽高的容器
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
// 配置参数
var option = {
title: {
text: '学生成绩柱状图'
},
tooltip: {},
legend: {
data:['成绩']
},
xAxis: {
data: ["张三","李四","王五","赵六","钱七"]
},
yAxis: {},
series: [{
name: '成绩',
type: 'bar',
data: [80, 90, 70, 85, 95]
}]
};
// 使用刚指定的配置项和数据显示图表。
var myChart = echarts.init(document.getElementById('main'));myChart.setOption(option);
```
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)