Vue3 echarts tooltip添加点击事件（最简版）

堵松松

已于 2024-04-18 16:51:21 修改

阅读量1.4k

点赞数 14

文章标签： echarts vue.js 前端

于 2024-04-18 16:42:03 首次发布

本文链接：https://blog.csdn.net/D_S_S_/article/details/137926193

版权

需求

需要在echarts tooltip点击跳转对应的页面，效果如下

在这里插入图片描述

背景

项目是用vue3和echarts实现的，echarts版本（^5.3.3），并不能把点击事件绑定在window上且echarts 没有提供点击tooltip的方法（因为当前是基于qiankun的一个微应用）
参考其他解决方法比较繁琐，且没有完善对vue3 版本方法的介绍

解决方法

首先配置echarts 的tooltip,formatter 的模版中定义了 data-param 传递参数


tooltip: {
    trigger: 'item',
    className: 'tooltip',
    enterable: true,
    alwaysShowContent: true,
    borderWidth: 0,
    z: 9999, // 设置较高的 z-index 值
    padding: [
      0, // 上
      0, // 右
      0, // 下
      0, // 左
    ],
    position(point: any) { // 控制tolltip框的位置
      return [point[0], point[1]]// 设置为鼠标的位置
    },
//自定义tooltip的显示内容，如下部分为拆出点击内容
    formatter: params => {
      const { data, percent } = params
      const name = data.name.slice(-3)
      const str = `
        <span style="color:#333;font-weight: 500;"> ${name} </span> <span class="clTic" data-param="${data.tag}"> ${data.tag === 'goodCommentCntRate' ? '去互动' : data.tag === 'negativeCommentRate' ? '去处理' : ''}</span>  
      return str
    },
  },

在vue组件onMounted触发实现,重点利用showTip 监听tootip显示，获取元素并监听点击事件，利用target.getAttribute获取传递参数,后续就可以实现逻辑操作了

<template>
      <div ref="echartsDom" class="chartdom">图表组件</div>
</template>

<script setup lang="ts">
import { options } from '../const'
const echartsDom = ref<HTMLElement>()
const setOptions = (dom, options) => {
  options && dom.setOption(options)
}
onMounted(async () => {
  const myChart = echarts.init(echartsDom.value as HTMLElement)
  setOptions(myChart, options)
  myChart.on('showTip', () => {
    const tooltipContent = document.querySelector('.clTic')
    if (tooltipContent) {
      tooltipContent.addEventListener('click', e => {
        const target = e.target as HTMLElement
        const res = target.getAttribute('data-param')
        emits('chartClick', res)
      })
    }
  })

})
</script>