最近有读者问我如何去掉力引导图上,鼠标浮在连接线上时弹出的提示框,我的思路是通过回调函数定义 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 例子