如何自定义ECharts折线图tooltip，按类型分组展示指定系列数据？

要实现hover某系列点时仅展示同类型系列在该位置的时间数据，可以通过自定义系列标识+监听鼠标事件+tooltip格式化过滤的组合方式解决，具体步骤如下：

1. 给系列添加自定义类型标识 #

在定义series时，给每个系列添加自定义字段（比如seriesType），用来标记该系列的类型（如car、bus）：

const option = {
  xAxis: { type: 'time', name: '时间' },
  yAxis: { type: 'category', data: ['位置A', '位置B', '位置C'], name: '位置' },
  series: [
    { name: 'car-路线1', type: 'line', seriesType: 'car', data: [...] },
    { name: 'bus-路线1', type: 'line', seriesType: 'bus', data: [...] },
    { name: 'car-路线2', type: 'line', seriesType: 'car', data: [...] },
    // 其他4个系列...
  ]
};

2. 监听鼠标事件记录当前hover的系列类型 #

定义变量存储当前hover的系列类型，通过mouseover和mouseout事件更新该变量：

let currentHoverType = '';
const myChart = echarts.init(document.getElementById('main'));

// 监听鼠标hover到系列点的事件
myChart.on('mouseover', (params) => {
  if (params.componentType === 'series') {
    // 读取自定义的系列类型
    currentHoverType = params.series.seriesType;
  }
});

// 鼠标离开时清空类型
myChart.on('mouseout', () => {
  currentHoverType = '';
});

3. 配置tooltip格式化函数过滤数据 #

在tooltip的formatter中，根据currentHoverType过滤出同类型的系列数据，再生成tooltip内容：

tooltip: {
  trigger: 'axis',
  axisPointer: { type: 'cross' },
  formatter: (params) => {
    // 过滤同类型数据，无选中类型时显示全部
    const targetParams = currentHoverType 
      ? params.filter(item => item.series.seriesType === currentHoverType)
      : params;
    
    // 拼接tooltip内容（可根据你的数据结构调整）
    let tooltipContent = `<div>${params[0].axisValue}</div>`;
    targetParams.forEach(item => {
      tooltipContent += `<div style="color:${item.color}">${item.seriesName}: ${item.value[0]}</div>`;
    });
    return tooltipContent;
  }
}

关键说明 #

• 自定义字段seriesType可以任意命名，只要保证同类型系列的字段值一致即可；
• mouseover事件中通过params.series可以直接获取到系列的自定义属性；
• 当鼠标hover到空白区域时，currentHoverType为空，tooltip会显示所有系列数据，保证基础交互逻辑正常。

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