echarts tooltip中添加点击事件

最近来了一个需求,需要在echarts中的tooltip中增加跳转,也就是简单来说,需要在tooltip内新增一个点击事件
效果如下:

可以看到,点击tooltip中的a标签以后,触发了事件。
下面开始讲如何做到:

基础的暂且不表,想要鼠标能够移入到tooltip框中,需要在在tooltip中添加如下代码

tooltip:{
    ...
     position:function(point:any){//控制tolltip框的位置
        return [point[0],point[1]]//设置为鼠标的位置
    },
    enterable:true,//可以让鼠标进入tooltip
}

这样tooltip框就可以被鼠标移入了

然后事件需要挂在window
所以写如下代码:

 ngAfterViewInit() {
        function test(params:any){
            console.log('点了',params)
        }
        //@ts-ignore
        window['test'] = test
    }

然后对tooltip加上触发事件:

    tooltip:{
        ...,
        formatter: (params: any) => {
                    let result;
                    if (params.dataType === "edge") {//线
                        // result = params.name;
                    } else if (params.dataType === "node") {//节点
                        // console.log(params);
                        result = `
                            
${params.marker}${params.data.title}
说明:${params.data.explain}
关系数量:${params.data.relationCounts}
右键唤出菜单 `; } return result } }

重点是这一行

注意几点:

传值需要用引号包起来 也就是onclick="test('${params}')"
这样onclick="test(${params})"是会直接报错unexpect identifier
image.png

传多个值需要分开传:
onclick="test('${params}','${params}')"这样才行
echarts tooltip中添加点击事件_第1张图片image.png

如果写成这样onclick="test('${params},${params}')"

返回值就会是这样
image.png


虽然事件触发了,但是很奇怪,拿到的值是[object Object]
echarts tooltip中添加点击事件_第2张图片

明明直接打印这个值是这些东西:

echarts tooltip中添加点击事件_第3张图片

对象不可以直接拿到,但是具体的值可以直接拿到:
echarts tooltip中添加点击事件_第4张图片
现在想拿到extraData中的这两个数据,就只能直接传过去了


打印出来是这样
image.png

总的来说不管怎样,还是实现了想要的效果吧,就是不知道为什么只要是对象传递过去就会变成[object Object],不知道各位有什么见解.

你可能感兴趣的:(echarts tooltip中添加点击事件)