vue中使用Echarts展示多个提示框

一、效果图
两个坐标轴的值进行对比，左边大于右边即在左边柱状图上方给出提示‘表现良好’

二、尝试

考虑到tooltip为单例模式，一次只能展示一个，所以不能使用tooltip。转而考虑到markPoint。
查询到markPoint下的数组格式：
markPoint: {
    data: [
      { name: 'doWell', xAxis: 7, yAxis: 18 },
    ]
  },
xAxis：为x轴坐标，yAxis为y轴坐标值
因为可能要显示多个提示框，所以相邻两个柱状图的数据我们拿到后需要进行处理，假设左边数据为this.data1,右边的数据为this.data2
const newArr = []
this.data1.map((item, idx) => {
    if (item > this.data2[idx]) {
      newArr.push({ name: 'well', xAxis: idx, yAxis: item })
    }
  })
那么就可以在series里左边的柱状图里添加markPoint
    markPoint: {
          // data: [
          //   { name: 'well', value: '表现良好', xAxis: 0, yAxis: 60 },
          // ]
          data: newArr,
          symbolOffset: [this.calFontSize(0.2), '-50%'], // 调整提示位置
          //markPoint支持引入图片作为提示框，同时支持base64和svg
          symbol: 'image://' + require('@/assets/img/classReport/markPoint.svg'), //
          symbolSize: [this.calFontSize(0.85), this.calFontSize(0.4)]// 设置大小 85 40 适配
        }
      },
自定义字体适配函数
calFontSize(res) {
  const clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
  if (!clientWidth) return
  const fontSize = 100 * (clientWidth / 1366)
  return res * fontSize
}
markPoint官方文档：
https://echarts.apache.org/zh/option.html#series-line.markPoint