echarts条形进度条

最新推荐文章于 2024-06-27 10:31:04 发布

qq_42208679

最新推荐文章于 2024-06-27 10:31:04 发布

阅读量2.3k

点赞数

本文链接：https://blog.csdn.net/qq_42208679/article/details/105350095

版权

echarts条形进度条

说明：
echarts.js必须下载到本地，在线引入坐标轴的箭头不会出现
效果如下：
在这里插入图片描述
html:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		.echarts {
			width: 500px;
			height:400px;
			background: #ccc;
			margin: 0 auto;
		}
		
	</style>

	<body>
		<div class="echarts" id="bjxxpm"></div>
	</body>

</html>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="echarts.js"></script>
<script type="text/javascript" src="index.js"></script>

js:

function bjxxpm() {
	var myChart = echarts.init(document.getElementById('bjxxpm'));
	/*指定图表的配置项和数据*/
	option = {
		textStyle: {
			color: '#fff',
			fontSize: '16'
		},
		title: {
			textStyle: {
				color: '#fff',
			},
			left: '50%',
			text: '',
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
		grid: { //设置图表位置
			left: '3%',
			right: '4%',
			top: '6%',
			bottom: '5%',
			containLabel: true
		},
		xAxis: {
			splitLine: { //去掉网格线
				show: false
			},
			position: 'top', //X轴位置
			type: 'value',
			boundaryGap: [0, 0.01],
			axisLabel: { //坐标轴刻度标签的相关设置
				// rotate:'45',//坐标轴文字旋转角度
				show: true,
				textStyle: {
					color: '#00ffd2',
					align: 'right',
					fontSize: 15
				}
			},
			axisLine: {
				lineStyle: {
					color: '#01563B',				
				},
				 symbol: ['none', 'arrow']
			},
			axisTick: {
				show: false
			},
		},
		yAxis: {
			type: 'category', //轴的类型分两种 1.category（类别）2.value(值)			
			data: ['学校名称', '学校名称', '学校名称', '学校名称', '学校名称', '学校名称', '学校名称', '学校名称', '学校名称', '学校名称'],
			axisLabel: {
				show: true,
				textStyle: {
					color: '#00ffd2',
					align: 'right',
					fontSize: 15 /*文字大小*/
				}
			},
			axisLine: {
				type: 'dotted', //设置Y轴坐标为实线
				lineStyle: {			 
					color: '#01563B',//轴的颜色		 
				},				
				symbol: ['arrow'] //添加箭头
			},	
			axisTick: {
				show: false
			},
		},
		series: [{
			type: 'bar',
			data: ['20', '30', '50', '78', '90', '100', '120', '130', '140', '160', ],
			barWidth: 15, //柱子宽度
			itemStyle: {
				normal: {
					color: function(params) {
						//注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
						var colorList = ['#00ff60', '#00ffa5', '#55b5ff', '#00fcff', '#00bb15', '#7ee202', '#ffde02', '#ffa800',
							'#ff6000', '#e53b3a'
						];
						return colorList[params.dataIndex]
					},
				}
			},
		}]
	};
	myChart.setOption(option);
}