主体思路,设计两个x轴,控制重合,实现多柱情况下的堆叠或重叠,上代码:
options: {
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
top: '30%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: { //y轴刻度线
show: false
},
axisLine: {
show: false
},
},
{
type: 'category',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitArea: {
show: false
},
splitLine: {
show: false
},
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
],
yAxis: [
{
type: 'value',
axisTick: { //y轴刻度线
show: false
},
axisLine: {
show: false
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#DCDCDE'
}
}
}
],
series: [
{
name: '今年计划',
type: 'bar',
xAxisIndex: 1,
itemStyle: {
normal: {
show: true,
color: '#FEEFB1'
}
},
barWidth: '30%',
data: [33, 33, 33, 33, 33, 33, 33]
}, {
name: '去年计划',
type: 'bar',
xAxisIndex: 1,
barWidth: '30%',
barGap: '50%', // 设置多柱之间空隙
itemStyle: {
normal: {
show: true,
color: '#b8e0ab'
}
},
data: [51, 51, 51, 51, 51, 51, 51]
}, {
name: '今年完成',
type: 'bar',
barWidth: '30%',
itemStyle: {
normal: {
show: true,
color: '#FCD63D'
}
},
data: [8, 15, 10, 20, 22, 30, 22]
}, {
name: '去年完成',
type: 'bar',
barWidth: '30%',
barGap: '50%',
itemStyle: {
normal: {
show: true,
color: '#79c65f'
}
},
data: [8, 17, 26, 30, 32, 45, 30]
}
]
}
效果图如下: