Echarts 雷达图单变量触发 tooltip实现只有鼠标挪到了拐点上的时候才显示 tooltip，而且 toolti

主要问题

Echarts 雷达图的 tooltip 由数据项图形（item）触发，由坐标轴（axis）触发无效；因此没法显示单变量的 tooltip，而且在整个面积范围内都能触发 tooltip。

目标效果

只有鼠标挪到了拐点上的时候才显示 tooltip，而且 tooltip 里只显示这个拐点所在的变量的数据

主要思路

使用图表的mouseover事件监听图表控制 tooltip 的显隐

a. 判断回调函数的参数params.event.target.__dimIdx：
- 值为数字表示在拐点，该数字为拐点对应变量的下标：用dispatchAction指令显示 tooltip；
- 值为 undefined 表示不在拐点：用dispatchAction指令隐藏 tooltip
b. 存储变量下标tooltipIndicatorIdx，以便在tooltip.formatter中获取变量相关数据
在tooltip.formatter设置 tooltip 中显示的数据
使用图表的mouseout事件监听图表，鼠标移出时用dispatchAction指令隐藏 tooltip

1. 使用图表的`mouseover`事件监听图表

myChart.on(
  'mouseover',
  //监听名为seriesName1的数据项对应图形元素
  { seriesName: 'seriesName1'},
  (params) => {
    //判断params.event.target.__dimIdx不为undefined，则表示在拐点
    if (params.event.target.__dimIdx !== undefined) {
      //存储变量下标
      this.tooltipIndicatorIdx = params.event.target.__dimIdx
      //显示tooltip
      myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: params.seriesIndex,
        dataIndex: params.dataIndex,
      })
    } 
    //不在拐点则隐藏tooltip
    else {
      myChart.dispatchAction({
        type: 'hideTip',
      })
    }
  }
)
//鼠标移出时隐藏tooltip
myChart.on(
  'mouseout',
  { seriesName: 'seriesName1' },
  () => {
    myChart.dispatchAction({
      type: 'hideTip',
    })
  }
)

2. 设置 tooltip 中显示单变量数据

option = {
  ...
  tooltip: {
    trigger: 'item',
    // 表示不使用默认的“显示”“隐藏”触发规则。
    // 仅使用 dispatchAction 控制tooltip显隐时需设置
    triggerOn: 'none',
    formatter: () => {
      //根据存储的变量下标，获取对应数据并显示
      let { name, num } = radarIndicator[this.tooltipIndicatorIdx]
      return `<span style="font-weight:bold">${name}</span><br />${
        num || '--'
      }%`
    },
  },
}

3. 细节处理：tooltip 显示的位置调整

此时自动的 tooltip 位置有点错乱，不是以鼠标位置定位置了，而是以整个图表的位置来定 tooltip 位置。因此这里用 mouseover 的参数获取鼠标位置来设置 position。

myChart.on(
  'mouseover',
  (params) => {
    ...
    myChart.dispatchAction({
      ...
      //position同tooltip.position相同
      position: () => {
        return [params.event.offsetX + 30, params.event.offsetY - 40]
      },
    })
  }
)

参考来源：zhuanlan.zhihu.com/p/358873949

Echarts 雷达图单变量触发 tooltip