【奇淫巧技】echarts柱形图X轴下标移位

requirement

• 需要展示每个小时内接口的调用量，因此柱状图需要在小时间隔以内，如下图
  

challenge

• 由于X轴下标和柱形图实际上是一对一的，正常情况如下图
  
• 最初的想法是通过官方文档提供的对外参数，来修改X轴下标的位置，试了很多参数，很无奈，都不行

solution

• 使用两个坐标轴，原坐标轴放在上面，不显示；下面一个坐标轴，不放数据，但根据数值间隔划分，代码如下

var xAxis = [
        {
            type: 'category',
            data: data[0],
            show: false,
            position: 'top'
        },
        {
            type: 'value',
            min: 0,
            max: 24,
            splitNumber: 24,
            axisLabel: {
                formatter: '{value}时'
            }
        }
    ];