双X轴的Echarts图

场景

如下图所示，需要实现一个带层级关系的双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