ECharts嵌套双X轴图表Tooltip无法显示二级X轴对应值的问题求助

大家好，我最近在用ECharts做一个带两层嵌套X轴的图表，遇到了Tooltip的困扰：我希望Tooltip能同时展示当前数据对应的两级X轴具体值，但目前只能显示一级X轴（比如Right/Left），二级X轴对应的年龄分组（比如Teen）没法在Tooltip里显示出来，试了自己写的formatter函数也没搞定，想请大家帮忙看看怎么修改。

先给大家看一下我的数据和完整图表配置：

var data = [
  { dominantHand: 'Right', age: 'Teen', value: Math.random(), gender: 'Female' },
  { dominantHand: 'Right', age: 'Adult', value: Math.random(), gender: 'Female' },
  { dominantHand: 'Right', age: 'Retired', value: Math.random(), gender: 'Female' },
  { dominantHand: 'Left', age: 'Teen', value: Math.random(), gender: 'Female' },
  { dominantHand: 'Left', age: 'Adult', value: Math.random(), gender: 'Female' },
  { dominantHand: 'Left', age: 'Retired', value: Math.random(), gender: 'Female' },
  { dominantHand: 'Right', age: 'Teen', value: Math.random(), gender: 'Male' },
  { dominantHand: 'Right', age: 'Adult', value: Math.random(), gender: 'Male' },
  { dominantHand: 'Right', age: 'Retired', value: Math.random(), gender: 'Male' },
  { dominantHand: 'Left', age: 'Teen', value: Math.random(), gender: 'Male' },
  { dominantHand: 'Left', age: 'Adult', value: Math.random(), gender: 'Male' },
  { dominantHand: 'Left', age: 'Retired', value: Math.random(), gender: 'Male' },
];

option = {
  title: {
    text: 'Fake Values for Dominant Hand and Age',
  },
  tooltip: {
    trigger: 'axis',
    formatter: function(params) {
      console.log(params); // 仅用于调试
      var tooltip = params[0].name + '<br>';
      for (var i = 0; i < params.length; i++) {
        tooltip += params[i].marker + params[i].seriesName + ': ' + params[i].value.toFixed(2) + '<br>';
      }
      return tooltip;
    }
  },
  legend: {
    data: ['Female', "Male"]
  },
  xAxis: [
    {
      type: 'category',
      data: ['Right', 'Left', 'Right', 'Left', 'Right', 'Left'],
      axisLabel: {
        interval: 0,
        rotate: 0,
      },
    },
    {
      type: 'category',
      data: ['Teen', 'Adult', 'Retired'],
      axisLabel: {
        interval: 0,
        rotate: 0,
      },
      position: 'bottom',
      offset: 30,
    },
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Female',
      type: 'bar',
      data: data.filter(function(item) {return item.gender === 'Female';}).map(function(item) {return item.value;})
    },
    {
      name: 'Male',
      type: 'bar',
      data:  data.filter(function(item) {return item.gender === 'Male';}).map(function(item) {return item.value;})
    }
  ]
};

现在的问题是，鼠标hover到数据上时，Tooltip只会显示Right或者Left，但我想要的是类似这样的效果：

Right - Teen

■ Female: 0.XX

■ Male: 0.XX

或者分两行显示一级、二级X轴内容也可以，核心是要同时看到当前数据对应的主导手和年龄组。

我调试时看了params里的内容，好像没有直接给出二级X轴对应的值，是不是需要通过索引去匹配二级X轴的data？还是有更简洁的方法？麻烦大家给点思路或者修改建议，谢谢啦！

备注：内容来源于stack exchange，提问作者David