<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript">
var dataX = ['大类案件', '小类案件','自行处置案件 '];
var dataY = [100,100,50];
var dataY2 = [50,48,10]
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
option = {
xAxis: {
type: 'category',
data: dataY,
axisLabel: {
show: true,
textStyle: {
color: '#000'
}
},
axisLine: {
show: false
},
axisTick: {
show: false
},
},
yAxis: {
type: 'value',
splitLine:{
show: true,
color: '#ccc'
},//去除网格线
axisLabel: {
show: true,
textStyle: {
color: '#000'
}
},
axisLine: {
show: false
},
axisTick: {
show: false
},
},
series : [
{
type:'bar',
data:dataY,
barGap: '-100%',//添加此配置项即为重叠效果
itemStyle: {
normal: {
color:'#f5e181',
label : {
show: true,
position: 'top',
formatter: function (params) {
return params.value ;
},
textStyle: {
color: '#000',
fontSize:'18'
}
}
}
}
},
{
type:'bar',
data:dataY2,
itemStyle: {
normal: {
color:'#fdcf0e',
label : {
show: true,
position: 'insideTop',
formatter: function (params,index) {
return params.value == 0 ? '0%' : Math.round(params.value/dataY2[params.dataIndex]*1000)/10 + '%';
},
textStyle: {
color: '#000',
fontSize:'18'
}
}
}
}
},
]
};
myChart.setOption(option, true);
</script>
</body>
</html>
注意点:不能跟stack属性一起用