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

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

控制台输出如下：

• links 的 params

• data 的 params

从 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 不弹出提示框）