最近来了一个需要,须要在 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]
,不晓得各位有什么见解.