Apache ECharts轴触发tooltip时如何显示所有系列数据

要实现鼠标悬停任意时间点时，同时显示数值线系列和所有布尔型自定义系列的对应值，核心思路是保留全局Tooltip的axis触发模式，通过自定义formatter函数手动匹配各系列在当前时间点的数据，具体实现如下：

关键配置步骤 #

1. 全局Tooltip保留trigger: 'axis'，并将axisPointer.type设为'time'，确保时间轴指针能准确定位到鼠标悬停的时间点。
2. 编写自定义formatter函数，分别处理两类系列的数据：
   • 数值线系列：直接从Tooltip默认参数中提取对应点的数值。
   • 布尔自定义系列：根据当前时间戳，遍历该系列的分段数据，找到时间点所在区间，获取对应布尔状态。

代码示例 #

修改ECharts配置中的Tooltip部分：

tooltip: {
  trigger: 'axis',
  axisPointer: {
    type: 'time',
    label: {
      formatter: (params) => echarts.format.formatTime('yyyy-MM-dd HH:mm:ss', params.value)
    }
  },
  formatter: function(params) {
    let tooltipContent = '';
    // 获取当前鼠标悬停的时间戳
    const currentTimeStr = params[0].axisValue;
    const currentTimestamp = new Date(currentTimeStr).getTime();
    
    // 遍历所有系列匹配数据
    const chartOption = this.getOption();
    chartOption.series.forEach(series => {
      if (series.type === 'line') {
        // 处理数值线系列：从params中匹配对应系列的数据点
        const matchedPoint = params.find(p => p.seriesName === series.name);
        if (matchedPoint) {
          tooltipContent += `${series.name}: ${matchedPoint.value[1]}<br/>`;
        }
      } else if (series.type === 'custom') {
        // 处理布尔自定义系列：查找当前时间所在的分段区间
        const seriesData = series.data;
        let currentStatus = 'N/A';
        for (let i = 0; i < seriesData.length; i++) {
          const segment = seriesData[i];
          const segmentStartTime = new Date(segment[0]).getTime();
          // 最后一段的结束时间设为无穷大
          const segmentEndTime = i < seriesData.length - 1 
            ? new Date(seriesData[i+1][0]).getTime() 
            : Infinity;
          
          if (currentTimestamp >= segmentStartTime && currentTimestamp < segmentEndTime) {
            currentStatus = segment[1].toString();
            break;
          }
        }
        tooltipContent += `${series.name}: ${currentStatus}<br/>`;
      }
    });
    return tooltipContent;
  }
}

方案说明 #

• 为什么单独设置自定义系列的item触发无效：该配置会覆盖全局的axis触发逻辑，导致Tooltip仅响应自定义系列的交互事件，无法同步获取数值线系列的数据。
• 为什么不采用堆叠区域步线方案：该方案无法支持多状态（如null）的视觉定制，且无法灵活控制不同状态的着色、透明度效果，不符合后续扩展需求。

注意事项 #

布尔自定义系列的数据需按时间顺序排列，每个数据项需包含起始时间和对应布尔状态，确保能正确匹配当前时间点的状态。

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