echarts有几种事件可以获取当前列的数据(echarts事件API),但这些事件的使用体验并不好,都需要点击或移入折线本身才能获取当前列的数据。
用户在使用折线图时,通常是鼠标划入折线图,出现浮窗,此时就需要立刻把浮窗的数据返回出来。
在浮窗配置中有一个formatter,你可以在formatter中自定义浮窗样式,并且formatter可以接收函数返回值,formatter的参数就是当前列的所有数据。

  // 工具浮窗
  tooltip: {
    trigger: "axis",
    // 鼠标移入的轴线配置
    axisPointer: {
      lineStyle: {
        color: "#FF8B02"
      }
    },
    formatter: (e) => getCurrentDate(e) // 通过formatter自定义浮窗,并且可以监听当前列得所有数据
  },
// 当前鼠标移入列的所有数据-用于页面其它地方的渲染
const currentInfo = ref({
  my: null,
  level: null,
  avg: null,
  time: ""
})
const getCurrentDate = (params) => {
  let res = ""
  let time = `${params[0].axisValue}<br/>`
  res += time
  for (let i = 0; i < params.length; i++) {
    // 定义浮窗的渲染内容
    res += `<span style="display:inline-block;margin-right:4px">${params[i].marker}</span>
     <span style="display:inline-block;width:80px;height:20px;">${params[i].seriesName}</span>
     <span style="display:inline-block;width:30px;height:20px;">${params[i].data}</span><br/>`
  }
  // 这里给我们自定义的变量赋值,用于页面的展示
  currentInfo.value.time = params[0].axisValue;
  currentInfo.value.my = params[0].data;
  currentInfo.value.level = params[1].data;
  currentInfo.value.avg = params[2].data;
  return res
}

兔子先森
482 声望558 粉丝

致力于新技术的推广与优秀技术的普及。