在vue中使用echarts如何把data中的数据显示到tooltip中

假设data中有以下的数据：

data() {
  return {
    barData: [{
      aaa: 12,
      bbb: 23,
      ccc: 18
    }, {
      aaa: 32,
      bbb: 43,
      ccc: 68
    }, {
      aaa: 17,
      bbb: 43,
      ccc: 15
    }, {
      aaa: 52,
      bbb: 34,
      ccc: 85
    }, {
      aaa: 14,
      bbb: 33,
      ccc: 38
    }, {
      aaa: 16,
      bbb: 83,
      ccc: 78
    }]
  }
}

而echarts中的data数据是：

series: [
  {
    name: '供入电量',
    type: 'bar',
    barWidth: 20,
    color: '#34c1f0',
    itemStyle: {
      borderRadius: [3, 3, 0, 0]
    },
    data: [
      600, 500, 900, 500, 800, 500, 500
    ]
  }
]

现在有个需求，echarts中的tooltip除了显示echarts中的data数据外，还需要展示vue中的data数据
可以使用echart的自定义tooltip：

tooltip: {
  trigger: 'axis',
  formatter: (params) => {
    console.log(params);
    for (const x in params) {
      return (
        params[x].axisValue + "</br>" +
        "供入电量: " + params[x].value + "</br>" +
        "数值1: " + this.barData[params[x].dataIndex].aaa + "</br>" +
        "数值2: " + this.barData[params[x].dataIndex].bbb + "</br>" +
        "数值3: " + this.barData[params[x].dataIndex].ccc + "</br>"
      )
    }
  }
}

以上的数值1和数值2、数值3的数值都是vue的data中的，实现的效果如下：