场景
如下图所示,需要实现一个带层级关系的双x轴的柱状图,第一个x轴显示子级别的信息,第二个x轴显示父级关系。
上面的图很好理解,就是一个正常的堆叠柱状图,底下x轴根据层级关系显示分组信息。
解决方法
以第一个x轴为界限,把图分为上下两个网格。上面的网格为常规图,x轴作为子级;下面的网格为x轴的父级,绘制柱状图,每一根柱子设置相同高度,柱子的宽度设置为子级数量占总数的百分比。
数据结构:
[{
name: 'Group1',
children: [
{ name: 'Child1-1', count: 10, num: 20 },
{ name: 'Child1-2', count: 15, num: 22 }
]
}, {
name: 'Group2',
children: [
{ name: 'Child2-1', count: 13, num: 22 }
]
}, {
name: 'Group3',
children: [
{ name: 'Child3-1', count: 12, num: 24 },
{ name: 'Child3-2', count: 19, num: 28 }
]
}]
Grid配置:
[{
top: 30,
right: 10,
left: 60,
bottom: 60
}, {
right: 10,
left: 60,
height: 50, // height + bottom = 第一个grid的bottom
bottom: 10,
tooltip: {
show: false
}
}]
父级series配置:
{
type: 'bar',
data: [{
name: item.name, // 父级x轴显示名称
value: 1
}],
label: {
show: true,
position: 'inside',
formatter: '{b}',
offset: [0, 10],
textStyle: {
color: '#595959'
}
},
barGap: 0,
barWidth: `${item.children.length / total * 100}%`, // 设置宽度
itemStyle: {
opacity: 0.6,
color: 'transparent',
borderColor: '#cccccc',
},
labelLine: {
show: true
},
xAxisIndex: 1,
yAxisIndex: 1,
animation: false
}
一个小tips:因为父级X轴需要显示分割线,这里是用border实现的,但是border无法设置每一边的宽度和颜色,所以用当前Grid的axisLine盖住了bottom border