如何为Heatmap的类别轴放置axisLabel

Question

当前，我的热图的x类别轴上的axisLabel居于轴标记之间，如下所示：

如何更改axisLabels的位置使其居中于轴刻度线以下，如下面的图像（或至少左对齐）？： online editor

可以粘贴到{{3}}的测试数据

app.title = 'HM Test';

var xData = ['10', '20', '30', '60'];
var yData = ['<', 'Eins', 'Zwei', '>'];

var data = [
    [0, 0, 27102.3],
    [0, 1, 92854],
    [0, 2, 54130],
    [0, 3, 119060],
    [2, 2, 22222],
    [1, 0, 12586.3],
    [3, 0, 25294.102],
    [3, 1, 84362],
    [3, 2, 251390],
];

option = {
    tooltip: {
        position: 'top'
    },
    animation: false,
    grid: {
        height: '50%',
        y: '10%'
    },
    xAxis: {
        type: 'category',
        name: 'x-Achse',
        nameLocation: 'middle', 
        data: xData,
        splitArea: {
            show: true
        },
        axisTick: {
            alignWithLabel: false,
            show: true
        },
        axisLabel: {
            formatter: function (value) {
                return '{x|' + value + '}';
            },
            rich: {
                x: {
                    backgroundColor: 'lightgrey',
                    width: '10'                    
                }
            }
        },
    },
    yAxis: {
        type: 'category',
        data: yData,
        splitArea: {
            show: true
        }
    },
    visualMap: {
        min: 20000,
        max: 60000,
        calculable: true,
        orient: 'horizontal',
        left: 'center',
        bottom: '15%'
    },
    series: [{
        name: 'Punch Card',
        type: 'heatmap',
        data: data,
        label: {
            normal: {
                show: true
            }
        },
        itemStyle: {
            emphasis: {
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }]
};