多层级轴标签（第二版）

covertData = function(src) {
    var nameList = [];  // X 轴数据
    var valueList = []; // Y 轴数据

    var groupLabelList = ['']; // ★分组的标签数据，长度是 nameList 长度的 2N+1
    var subGroupLabelList = ['']; // ★二级分组的标签数据，形式同上

    var groupTickList = [0]; // 分组位置刻度位置数据，整数列表
    var subGroupTickList = [0]; // 二级分组刻度位置数据

    var costomList = ['costomTick']; // 忘了删掉的，过程版本用过的变量- -b
    // 用于记录上次遍历到的分组/二级分组名称，以及该名称出现过的次数
    var groupTmp = {
        name: '',
        count: 0
    };
    var subGroupTmp = {
        name: '',
        count: 0
    };

    // 遍历源数据，生成所需的图表数据、分组轴标签、分组轴刻度数据
    for (var i = 0; i < src.length; i++) {

        nameList.push(src[i].name);
        valueList.push(src[i].value);
        
        // 为分组/二级分组的标签数据填入空字符串
        // 后面再对需要显示轴标签的位置进行更新，直接更新为要显示的标签文字
        groupLabelList.push('', '');
        subGroupLabelList.push('', '');

        // 当一个分组/二次分组名称遍历完成时，计算出该分组的标签、刻度位置
        // 然后重新开始计数，这里分别用了两种写法，三元表达式和 if-else 语句
        i === src.length - 1 || groupTmp.name !== '' && groupTmp.name !== src[i + 1].group ?
            (groupLabelList[i * 2 - groupTmp.count + 1] = src[i].group,
                groupTmp.name = '',
                groupTmp.count = 0,
                groupTickList.push(i * 2 + 2)) :
            (groupTmp.name = src[i].group,
                groupTmp.count++);

        if (i === src.length - 1 || subGroupTmp.name !== '' && subGroupTmp.name !== src[i + 1].subGroup) {
            subGroupLabelList[i * 2 - subGroupTmp.count + 1] = src[i].subGroup,
            subGroupTmp.name = '';
            subGroupTmp.count = 0;
            subGroupTickList.push(i * 2 + 2);
        } else {
            subGroupTmp.name = src[i].subGroup;
            subGroupTmp.count++;
        }

    }

    return {
        nameList: nameList,
        valueList: valueList,
        groupLabelList: groupLabelList,
        subGroupLabelList: subGroupLabelList,
        groupTickList: groupTickList,
        subGroupTickList: subGroupTickList
    };
};

option = {
    // 准备 3 个同一位置叠放的 grid （直角坐标系）
    grid: [{
        bottom: '20%'
    }, {
        bottom: '20%'
    }, {
        bottom: '20%'
    }],
    
    // 准备 3 个 X 轴，第一个放数据，后两个放分组标签、刻度
    // 后两个轴的类目数据是数据轴的 2 倍再加 1
    xAxis: [{
        gridIndex: 0,
        type: 'category',
        data: dstData.nameList,
        axisTick: {
            length: 20
        }
    }, {
        gridIndex: 1,
        type: 'category',
        data: dstData.groupLabelList,
        boundaryGap: false,
        axisLabel: {
            margin: 80, // 轴标签远离轴线的距离
            interval: 0 // 强制显示所有轴标签，避免因类目过密而显示不全。
        },
        axisTick: {
            length: 100, // 刻度长度
            // 用回调函数定义刻度的显示/隐藏
            interval: (index) => dstData.groupTickList.indexOf(index) != -1
        }
    }, {
        gridIndex: 2,
        type: 'category',
        data: dstData.subGroupLabelList,
        boundaryGap: false,
        axisLabel: {
            margin: 40,
            interval: 0
        },
        axisTick: {
            length: 60,
            interval: (index) => dstData.subGroupTickList.indexOf(index) != -1
        }
    }],
    yAxis: [{
        gridIndex: 0,
    }, {
        gridIndex: 1,
    }, {
        gridIndex: 2,
    }],

    series: [{
        xAxisIndex: 0,
        yAxisIndex: 0,
        type: 'bar',
        name: 'test',
        label: {
            show: true,
            position: 'top'
        },
        data: dstData.valueList
    }]
};