关于前端:vue中使用Echarts展示多个提示框

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

二、尝试

思考到tooltip为单例模式，一次只能展现一个，所以不能应用tooltip。转而思考到markPoint。查问到markPoint下的数组格局：markPoint: {    data: [      { name: 'doWell', xAxis: 7, yAxis: 18 },    ]  },xAxis：为x轴坐标，yAxis为y轴坐标值因为可能要显示多个提示框，所以相邻两个柱状图的数据咱们拿到后须要进行解决，假如右边数据为this.data1,左边的数据为this.data2const 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