期末成绩柱状图

梦兮呀

于 2024-01-02 20:17:44 发布

阅读量446

点赞数 9

文章标签： echarts

本文链接：https://blog.csdn.net/isluya/article/details/135349073

版权

本文详细介绍了如何使用Echarts库创建一个简单的柱状图，展示期末成绩的最高分和平均分，包括图表配置项的设置和数据的呈现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Echarts入门示例</title>
		<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
		<div id="main" style="width: 600px; height:400px;"></div>
		
		 <script type="text/javascript">
		      // 基于准备好的dom，初始化echarts实例
		      var myChart = echarts.init(document.getElementById('main'));
		
		      // 指定图表的配置项和数据
		      var option = {
				title: {
					text: '期末成绩',
					textStyle: {
						color: 'red'
					},
					borderWidth: 3,
					borderColor: 'blue',
					borderRadius: 10,
					left: 'center',
					top: 'top'
				},
				tooltip:{
					trigger: 'axis',
					// triggerOn: 'click',
					formatter:function(arg){
						console.log(arg)
						return arg[0].name + '最高分是'+arg[0].data+',平均分是'+arg[1].data
					}
					// formatter: function(arg){
					// 	console.log(arg)
					// 	return arg[0].name + '的销量是' + arg[0].data
					// }
				},
				toolbox: {
					feature: {
						saveAsImage:{},
						dataView:{},
						restore:{},
						dataZoom:{},
						magicType:{
							type:['bar', 'line']
						},
						myTool1: {
							show: true,
							title: '从高到低排序',
							onclick: function(){
								console.log('aaaaaaaaaaaaaaaaaaaaaaaaa')
							}
						}
					}
				},
				legend:{
					left:'center',
					top:'bottom',
					data:['最高分', '平均分']
				},
		        xAxis: {
		          data: ['1班', '2班', '3班', '4班', '5班', '6班']
		        },
		        yAxis: {}, 
		        series: [
		          {
		            name: '最高分',
		            type: 'bar',
		            data: [95, 98, 96, 92, 96, 97]
		          },
				  {
				    name: '平均分',
				    type: 'bar',
				    data: [56, 62, 61, 60, 59, 58]
				  }
		        ]
		      };
		
		      // 使用刚指定的配置项和数据显示图表。
		      myChart.setOption(option);
		    </script>
		
	</body>
</html>