Apache ECharts：鼠标移出数据区域时如何隐藏value类型图表的tooltip？

问题背景 #

• 在Apache ECharts中，category类型图表鼠标移出数据区域时，tooltip会自动隐藏；但value类型图表的tooltip始终会显示首个或末尾数据点的信息。
• 观察到两类图表的axisPointer行为存在差异：category类型图表的axisPointer不会吸附到首个/末尾数据点，而value类型图表在鼠标移出数据区域时，axisPointer始终吸附到首个/末尾数据点——这是否是导致tooltip表现不同的原因？
• 期望效果：鼠标处于空白区域时，隐藏value类型图表的tooltip。

2023/12/13 更新：实现方案 #

未采用Matthias Mertens提出的formatter函数方案，而是通过tooltip的position函数直接控制tooltip DOM元素的显示/隐藏，避免修改tooltip内容。具体实现代码如下：

option = {
  tooltip: {
    trigger: 'axis',
    position: function(point, params, dom, rect, size) {
      const idxInvisible = option.series.length - 1;
      const isInvisible = (params[0].seriesIndex === idxInvisible);
      isInvisible ? $(dom).hide() : $(dom).show();
      return point;
    }
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  xAxis: {
    type: 'value',
    boundaryGap: false,
    max: 1200,
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      data: [[100,120], [200,132], [300,101], [400,134], [500,90], [600, 200]]
    },
    {
      name: 'Union Ads',
      type: 'line',
      data: [[100,220], [200,182], [300,191], [400,234], [500,290], [600,90]]
    },
    { // 仅用于占位空白区域
      name: 'invisible',
      type: 'scatter',
      itemStyle: {color: 'transparent'},
      data: [[800,0], [1000,0], [1200,0]]
    }
  ]
};

方案逻辑 #

• 添加一个完全透明的scatter系列，用来占据图表中超出已有数据范围的空白区域
• 在tooltip的position回调中判断：若当前触发tooltip的是这个透明系列，说明鼠标处于空白区域，直接隐藏tooltip DOM；否则显示tooltip并返回正常定位

内容的提问来源于stack exchange，提问作者Jack Yeh