效果图
代码
<script src="../js/echarts-4.1.0/echarts.js"></script>
<script src="../js/theme/customed.js"></script>
<script type="text/javascript">
var yAxisData = ['项目1','项目2','项目3','项目4','项目5'];
var zdxmData = [95,30,10,50,100];
var valdata = [100,100,100,100,100];
var option = {
xAxis: {
show: false
},
grid: {
top:'2%',
left: '2%',
right: '2%',
bottom: '2%',
containLabel: true
},
yAxis: [{
show: true,
data: valdata,
inverse: true,
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
formatter: function(value, index) {
return [
(index + 1)
].join('\n')
},
rich: {
lg: {
// backgroundColor: '#339911',
// color: '#fff',
borderRadius: 15,
// padding: 5,
align: 'center',
width: 15,
height: 15
},
}
},
}, {
show: true,
inverse: true,
data: yAxisData,
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
}],
series: [{
name: '条',
type: 'bar',
yAxisIndex: 0,
data: zdxmData,
barWidth: 15,
itemStyle: {
normal: {
barBorderRadius: 30,
color: '#1089E7'
}
},
label: {
normal: {
show: true,
position: 'insideRight',
fontSize:'10',
formatter: function(params) {
if(params.value == 95){
return "待验收";
}else if(params.value == 30 || params.value == 50){
return "建设中";
}else if(params.value == 10){
return "已立项";
}else if(params.value == 100){
return "已完成";
}
}
}
},
}, {
name: '框',
type: 'bar',
yAxisIndex: 1,
barGap: '-100%',
data: [100, 100, 100, 100, 100],
barWidth: 15,
itemStyle: {
normal: {
color: 'none',
borderColor: '#00c1de',
borderWidth: 3,
barBorderRadius: 15,
}
}
}, ]
};
</script>
工作中使用到的,总结归纳后,仅供各位大神们参考......