需求

需要在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>



GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐