在做这个横向包裹图时,我怎么能将被包裹的柱子宽度小于包裹的柱子宽度,并且是垂直居中显示,急急急!(本人已解决,上传做为例子)
配置项如下
var yAxisData = ['上海', '深圳', '武汉', '长沙', '郑州', '南京', '厦门', '杭州', '天津', '北京'];
var option = {
backgroundColor: '#0f375f',
title: [{
}, ],
grid: [{
x: '10%',
y: '5%',
width: '45%',
height: '90%'
}, ],
tooltip: {
// trigger: 'axis',
// axisPointer: {
// type: 'shadow',
// }
// formatter: '{b} ({c})'
},
xAxis: [{
gridIndex: 0,
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
},
axisLine: {
show: false
}
}, ],
yAxis: [{
gridIndex: 0,
interval: 0,
data: yAxisData.reverse(),
axisTick: {
show: false
},
axisLabel: {
show: true
},
splitLine: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: "#6173a3"
}
},
}],
series: [
{
type: 'bar',
xAxisIndex: 0,
yAxisIndex: 0,
barWidth: '50%',
itemStyle: {
normal: {
color: 'rgb(7,79,127)',
}
},
silent: true,
barGap: '-100%',
data: [3000, 3000, 3000, 3000, 3000, 3000, 3000, 3000, 3000, 3000],
},
{
name: '企业数量',
type: 'bar',
barGap: '-90%',
barWidth: '40%',
label: {
normal: {
show: true,
position: "right",
formatter: '{c}家',
textStyle: {
color: "#9EA7C4"
}
}
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 1, 0,
[
{offset: 0, color: '#59EDFF'},
{offset: 1, color: '#59FFD7'}
]
)
},
emphasis:{
color:'#59FFD7',
}
},
data: [100, 1000, 800, 1070, 900, 300, 1200, 900, 1200, 200]
}
]
};