优秀的编程知识分享平台

网站首页 > 技术文章 正文

借官方关系图尝试下屏蔽鼠标浮在 links 上弹出的提示框

nanyue 2024-09-01 20:24:54 技术文章 9 ℃

最近有读者问我如何去掉力引导图上,鼠标浮在连接线上时弹出的提示框,我的思路是通过回调函数定义 tooltip.formatter 实现,在这给大家分享一下。

tooltip.formatter 是做什么的?

如下图

字符串模板

回调函数

大致是说可以用模板变量拼字符串,或者直接用一个函数的返回值作为提示框显示的内容。从回调函数那张图,我们可以看到,params 为我们提供了当前对象的很多属性,方便我们进行判断,从而生成定制化的提示内容。

如何区分 series[i]-graph.data 和 series[i]-graph.links?

查了配置项手册,从 series[i]-graph.tooltip.formatter 处并没有找到区分 series[i]-graph.data 和 series[i]-graph.links 的属性,但是怀着也许能从其他属性中找到规律的心思,我决定用 F12 看看 params 的内容。

方法就是在 series[i]-graph.tooltip.formatter 设置回调函数,打印 params 到控制台看看

option = {
 ...,
 series: [{
 ...,
 tooltip: {
 formatter: function(params){
 console.log(params);
 return params.name; 
 }
 }
 }]
}

控制台输出如下:

从 params 中发现,除了 links 和 data 的 params.data 不一样外,还有一个属性 params.dataType ,这是「 ECharts 配置项手册」里没提到的:

  • 鼠标停在 links 上:params.dataType 等于「edge」,也就是配置项中 series[i]-graph.links 的别名
  • 鼠标停在 data 上:params.dataType 等于「node」,也就是配置项中 series[i]-graph.data 的别名

这样一来就好办了,series[i]-graph.tooltip.formatter 设置回调函数,即

option = {
 ...,
 series: [{
 ...,
 tooltip: {
 formatter: function(params){
 return params.dataType == 'node' ? params.name: ''; 
 }
 }
 }]
}
  • 当 dataType 等于 「node」时,提示框内容为 params.name,否则内容为空(提示框内容为空时,ECharts 不弹出提示框)

效果不好截图,请点击 「了解更多」,直接查看 ECharts Gallery 例子

最近发表
标签列表