利用Echarts实现考试分数柱状图代码



50 197 66



特效描述:利用Echarts实现 考试分数 柱状图代码,利用Echarts实现考试分数柱状图代码

代码结构

1. 引入JS

<script type="text/javascript" src="echarts.common.min.js"></script>
<script type="text/javascript" src="echarts.common.min.js"></script>

2. HTML代码

<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body style="height: 100%; margin: 0">
<div id="container" style=" width: 600px;height: 300px;"></div>
<script type="text/javascript">
	var dom = document.getElementById("container");
	var myChart = echarts.init(dom);
	var app = {};
	option = null;
	app.title = '柱状图分数划分';
	var namedate = ['小明', '小红', '小张', '小潘', '小陆', '小洪', '大张'];
	var numdate = [60, 70, 80, 50, 70, 90, 100];
	var colorlist = [];
	numdate.forEach(element => {
		if (element < 60) {
			colorlist.push(["#fc7095", "#fa8466"])
		} else if (element >= 60 && element < 90) {
			colorlist.push(["#386ffd", "#74b3ff"])
		} else {
			colorlist.push(["#1aa8ce", "#49d3c6"])
		}
	});
	option = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {            // 坐标轴指示器,坐标轴触发有效
				type: 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
			}
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		xAxis: [
			{
				type: 'category',
				data: namedate,
				axisTick: {
					alignWithLabel: true
				},
				axisLine: {
					lineStyle: {
						color: "#4dd1c4",
						width: 1
					}
				},
				axisLabel: {
					show: true,
					textStyle: {
						color: '#999'
					}
				}
			}
		],
		yAxis: [
			{
				type: 'value',
				axisLabel: {
					formatter: '{value} 分',
					show: true,
					textStyle: {
						color: '#999'
					}
				},
				axisLine: {
					lineStyle: {
						color: "#4dd1c4",
						width: 1
					}
				},
				splitLine: {
					show: true,
					lineStyle: {
						type: 'dashed',
						color: '#ddd'
					}
				}
			}
		],
		series: [
			{
				name: '考试分数',
				type: 'bar',
				barWidth: '60%',
				data: numdate,
				itemStyle: {
					normal: {
						// color: new echarts.graphic.LinearGradient(
						//     0, 0, 0, 1,
						//     [
						//         {offset: 1, color: 'red'},
						//         {offset: 0, color: 'orange'}
						//     ]
						// )
						color: function (params) {
							// var colorList = colorlist;
							// return colorList[params.dataIndex];
							var colorList = colorlist
							var index = params.dataIndex;
							// if(params.dataIndex >= colorList.length){
							//         index=params.dataIndex-colorList.length;
							// }
							return new echarts.graphic.LinearGradient(0, 0, 0, 1,
								[
									{ offset: 1, color: colorList[index][0] },
									{ offset: 0, color: colorList[index][1] }
								]);
						}
					}
				}
			}
		]
	};
	;
	if (option && typeof option === "object") {
		myChart.setOption(option, true);
	}
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 弹出层拖动 窗口提示框 文字提示框

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到