思路:给body添加点击事件,然后通过tooltip自定义渲染时定义独特的class,判断点击元素,触发特定事件
/*
* @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;
使用
useDocumentClick({
clickFunc: (v) => {
setOpen(true)
},
className: 'echarts-click'
})