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

48次阅读

共计 1004 个字符，预计需要花费 3 分钟才能阅读完成。

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

二、尝试

思考到 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

正文完