Apache ECharts：当鼠标移出数据区域时如何隐藏工具提示？

Question

Apache ECharts：在“类别”类型图表中，当鼠标位于数据区域之外时，工具提示会隐藏。 但“值”类型图表的行为不同，它不断显示第一个/最后一个数据点的工具提示。 如果鼠标停留在空白区域，如何隐藏工具提示？

option = {
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Test1', 'Test2']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      data: [320, 332, 301, 334, 390, 330]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      data: [820, 932, 901, 934, 1290, 1330]
    }
  ]
};

option = {
  tooltip: {
    trigger: 'axis'
  },
  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]]
    },

  ]
};

观察：对于“category”类型，axisPointer 不粘在第一个/最后一个数据点。 但对于“值”类型，当鼠标移出数据区域时，axisPointer 始终粘在第一个/最后一个数据点。 这就是“类别”类型隐藏工具提示的原因吗？

预期：当鼠标移出“值”类型图表的数据区域时，不会显示任何工具提示。

Answer 1

原因很简单，类别轴的截面是有限的，echarts 可以检查鼠标悬停在哪个截面。对于价值轴来说，什么是“空白空间”并不那么清楚。

据我所知，没有适合您的用例的内置功能。您可以尝试使用 tooltip 格式化程序函数 和一个不可见的帮助程序系列来限制您的空白空间（格式化程序回调函数不提供悬停位置的轴值，而是提供最近的数据点；这就是为什么我们需要另一个系列来确定鼠标悬停的位置）。

这里是一个小（未完成）示例，可以给您一个想法：

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: { snap: false },
    formatter: test,
  },
  xAxis: {
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218],
      type: 'line'
    },
    {
      type: 'scatter',
      data: [[100, 0]],
      silent: true,
      itemStyle: {color: 'transparent'}
    }
  ]
};

function test(params) {
  if (params[0].seriesIndex === 1) {
    return '';
  }
  return params[0].data + '';
}