ECharts折线图如何实现悬停折线本身时显示自定义tooltip

针对折线图的两个交互需求，直接调整对应配置项即可实现，不需要额外绑定原生鼠标事件：

• 折线全域触发Tooltip配置
  默认配置下Tooltip仅在鼠标精准命中数据标记点（symbol）时触发，要让鼠标悬停在折线任意线段位置都弹出提示框，在对应折线的series配置项中开启triggerLineEvent: true即可，保持Tooltip的trigger为item模式，不需要切换为坐标轴触发模式。如果存在触发不灵敏的问题，可以适当调大lineStyle.width数值扩大折线的鼠标响应热区。
• 自定义Tooltip内容+隐藏数据标记点配置
  1. 隐藏symbol标记点：在对应折线的series配置项中设置showSymbol: false，图表渲染时将不再显示折线的数据标记点
  2. 自定义Tooltip展示内容：通过Tooltip的formatter配置项自定义返回内容，仅提取当前命中的折线系列名称返回即可，不需要携带坐标点数值信息。

核心配置示例代码如下：

const chartOption = {
  tooltip: {
    trigger: 'item',
    // 自定义提示框内容，仅返回折线名称
    formatter: (params) => params.seriesName
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '月度访问趋势',
      type: 'line',
      data: [120, 200, 150, 80, 70, 110],
      showSymbol: false, // 禁用数据标记点显示
      triggerLineEvent: true, // 开启折线线段事件响应，支持悬停折线触发提示框
      lineStyle: {
        width: 3 // 按需调整折线宽度，扩大鼠标响应热区
      }
    }
  ]
}

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