echarts自定义的tooltip无法添加点击事件的解决方法
前端|echarts
发布于2023-04-06 最近修改2023-12-22
518
0
Shimmer

思路

给body添加点击事件,然后通过tooltip自定义渲染时定义独特的class,判断点击元素,触发特定事件
typescript
复制代码
/* * @Descripttion: 针对于echarts tooltip的点击事件自定义hooks * @version: * @Author: WangPeng * @Date: 2023-03-01 15:54:14 * @LastEditors: WangPeng * @LastEditTime: 2023-03-01 16:12:44 */ import React, { useEffect } from 'react'; import { strToObject } from '../utils' type Props = { clickFunc?: (v: any) => any // 当点击的时候触发的回调函数,抛出点击图表的一些参数 className: string // 需要匹配的类名,比如自定义img的需要添加点击事件 为img添加一个独立的className } const useDocumentClick = (props: Props) => { const { clickFunc, className } = props; const clickDom = (e) => { const { srcElement } = e; if (srcElement?.className === className) { const obj = strToObject(e.target.alt); clickFunc && clickFunc(obj) } } useEffect(() => { document.body.addEventListener('click', clickDom) return () => { document.body.removeEventListener('click', clickDom) } }, []) return { }; }; export default useDocumentClick;

使用

javascript
复制代码
useDocumentClick({ clickFunc: (v) => { setOpen(true) }, className: 'echarts-click' })
目录