数据可视化--ECharts图--HBuilderX--柱状图

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script src="echarts.min.js"></script></head><body><div style="width:800p

凤枭香

2768人浏览 · 2021-04-23 15:57:50

凤枭香 · 2021-04-23 15:57:50 发布

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="echarts.min.js">
			
		</script>
	</head>
	<body>
		<div style="width:800px;height:400px;"></div>
		<script type="text/javascript">
			var myChart = echarts.init(document.querySelector('div'))
			var xdata= ['张三','李四','王五','闰土','小明','茅台','二妞','大强']
			var ydata = [88,92,63,77,94,80,72,86]
			var ydata1 =[96,52,72,25,85,58,83,73]
			// 指定图表的配置项和数据
			var option = {	
				color:['red','blue'],
				title:{
					text:'成绩展示',
					link:'https://www.baidu.com/?tn=62095104_19_oem_dg',
					target:'blank',
					top: "0%",
					left:"20%",
					textStyle:{
						fontSize: 18,
						color:'orange',//颜色
						fontStyle:'italic', //字体风格
						fontWeight:'bold',//字体粗细
						fontFamily: "serif",//字体样式
					},
					borderWidth:3,//边框粗细

					shadowOffsetX: 1.5,//边框阴影偏移
					shadowOffsetY: 2,//边框阴影偏移
					borderColor:'blue',	//边框颜色
					borderRadius:20,//边框圆角半径
				},
				tooltip:{
					trigger:'item',//数据项图形触发
					truggerOn:'click',//提示框触发的条件;鼠标点击时触发
					formatter:function(arg){
						console.log(arg)//查看数据
						return arg.name+'的'+arg.seriesName+'分数:'+arg.data
						// console.log(arg)
					}
				},
				legend: {
				    data:['语文',"数学"],
				},
				toolbox:{
					feature:{
						saveAsImage:{},//保存为图片
						dataView:{},//数据视图工具
						restore:{},//配置项还原
						dataZoom:{},//数据区域缩放
						magicType:{//动态类型切换
							type:['line','bar','stack','tiled']
						},
					}
				},
			    xAxis:{
					type:'category',//类目轴，适用于离散的类目数据
			        data: xdata
					// type:'value'
				},
			    yAxis: {
					// type:'category',
					// data: xdata
					type:'value'
				},
			    series: [{
			        name: '语文',
			        type: 'bar',
					markPoint:{//最大最小值
						data:[
							{
								type:'max',name:'最大值'
							},
							{
								type:'min',name:'最小值'
							}
						]
					},
					markLine:{//平均值
						data:[
							{
								type:'average',name:'平均值'
							}
						]
					},
					label:{
						show:true,//是否显示标签
						rotate:60//标签旋转
					},
					barWidth:'30%',//柱条的宽度，不设时自适应
			        data: ydata
			    },{
					name: '数学',
					type: 'bar',
					data:ydata1,
					markPoint:{
						data:[
							{
								type:'max',name:'最大值'
							},
							{
								type:'min',name:'最小值'
							}
						]
					},
					markLine:{
						data:[
							{
								type:'average',name:'平均值'
							}
						]
					},
					label:{
						show:true,
						rotate:60
					},
					barWidth:'30%',
				}]
			};
			
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
		</script>
		
	</body>
</html>