ECharts折线图所有数据为null/undefined时如何强制显示自定义tooltip

问题根源 #

ECharts 默认逻辑下，当折线图系列的所有数据均为null/undefined时，不会渲染任何可交互的图形元素，因此axis触发模式的tooltip无法检测到对应系列，不会弹出提示框。

配置修改步骤 #

1. 调整series配置，强制保留交互能力 #

给折线图系列添加配置，即使数据全空也保留可交互的点位，可将点位设置为全透明不影响视觉效果：

series: [
  {
    type: "line",
    data: [null, null, null, null, null, null, null],
    // 强制展示点位符号
    showSymbol: true,
    // 开启折线事件触发能力
    triggerLineEvent: true,
    // 将点位设为完全透明，视觉上隐藏
    itemStyle: {
      color: 'rgba(0,0,0,0)'
    }
  }
]

2. 自定义tooltip formatter，空值展示自定义内容 #

在tooltip配置中添加格式化函数，判断数据为空时输出N/A：

tooltip: {
  trigger: "axis",
  axisPointer: {
    type: "shadow",
    label: {
      show: true,
      overflow: "break"
    }
  },
  formatter: (params) => {
    let content = params[0].axisValue + '<br/>'
    params.forEach(item => {
      const showValue = item.value ?? 'N/A'
      content += `${item.marker} ${item.seriesName}: ${showValue}<br/>`
    })
    return content
  }
}

3. 可选：固定y轴默认范围 #

全空数据场景下y轴会无默认取值区间，可能导致交互区域异常，可根据业务数据范围设置y轴的最小、最大值：

yAxis: [
  {
    type: "value",
    min: 0,
    max: 100 // 可根据实际业务调整
  }
]

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