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);
}