当前位置: 首页 > Web前端 > JavaScript

在echartstooltip中添加点击事件

时间:2023-03-27 11:19:18 JavaScript

最近需要在echarts中给tooltip添加一个跳转,也就是简单的说就是需要在tooltip中添加一个点击事件。效果如下:可以看到点击tooltip中的a标签后,触发了事件。下面开始说说怎么做吧:基本的暂时不展示,如果想让鼠标移动到tooltip框中,需要在tooltip中添加如下代码tooltip:{...position:function(point:any){//控制tolltip框的位置return[point[0],point[1]]//设置为鼠标的位置},enterable:true,//鼠标可以进入tooltip}这样tooltip框就可以被鼠标移进去,事件需要挂在窗口下,写如下代码:ngAfterViewInit(){functiontest(params:any){console.log('clicked',params)}//@ts-ignorewindow['test']=test}然后在触发事件时添加工具提示:tooltip:{...,formatter:(params:any)=>{letresult;if(params.dataType==="edge"){//line//result=params.name;}elseif(params.dataType==="node"){//node//console.log(params);结果=`

${params.marker}${params.data.title}
解释:${params.data.explain}
CI计数:${params.data.CICounts}
关系计数:${params.data.relationCounts
右击调出菜单`;}returnresult}}重点是这一行
CIquantity:${params.data.CICounts}
几个注意点:value需要用引号括起来,即onclick="test('${params}')"这样onclick="test(${params})"会直接unexpectedidentifier的多个值需要单独传:onclick="test('${params}','${params}')"这样写就可以onclick="test('${params},${params}')”返回值会是这样的。虽然触发了事件,但是却很诡异。得到的值是[objectObject],明明是直接打印出来的。value就是这些东西:对象不能直接获取,但是具体的值可以直接获取:现在如果要获取extraData中的两个数据,只能直接传过去了。
CI数量:${params.data.CICounts}
打印出来是这样的总的来说反正达到了想要的效果,就是不知道为什么只要传过去对象就会变成[objectObject]。我不知道你有什么意见。