最近来了一个需求,需要在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 = `
<div>${params.marker}${params.data.title}</div>
<div>
<span style="display:inline-block;max-width: 200px;white-space:pre-line;">
说明:${params.data.explain}
</span>
</div>
<div><a onclick="test('${params}')">CI数量:${params.data.CICounts}</a></div>
<div>关系数量:${params.data.relationCounts}</div>
<span style="color:#b3afaf"><i>右键唤出菜单</i></span>
`;
}
return result
}
}
重点是这一行 <div><a onclick="test('${params}')">CI数量:${params.data.CICounts}</a></div>
注意几点:
传值需要用引号包起来 也就是onclick="test('${params}')"
这样onclick="test(${params})"
是会直接报错unexpect identifier
的
传多个值需要分开传:onclick="test('${params}','${params}')"
这样才行
如果写成这样onclick="test('${params},${params}')"
返回值就会是这样
虽然事件触发了,但是很奇怪,拿到的值是[object Object]
明明直接打印这个值是这些东西:
对象不可以直接拿到,但是具体的值可以直接拿到:
现在想拿到extraData中的这两个数据,就只能直接传过去了 <div><a onclick="test('${params.data.extraData.modelId}','${params.data.extraData.name}')">CI数量:${params.data.CICounts}</a></div>
打印出来是这样
总的来说不管怎样,还是实现了想要的效果吧,就是不知道为什么只要是对象传递过去就会变成[object Object]
,不知道各位有什么见解.
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。