eCharts tooltip 提示框无法显示“-”值数据如何解决？

eCharts tooltip 提示框默认显示设置及“-”值处理

在使用eCharts图表时，如果数据中包含“-”等特殊字符，可能会导致tooltip提示框无法正常显示。 本文提供一种解决方案，确保tooltip始终显示有效数据。

当数据点值为“-”时，eCharts tooltip可能无法正确渲染。为了解决这个问题，建议将“-”值替换为null。 null值在eCharts中表示该数据点不存在，tooltip将跳过该点，显示其他有效数据点的信息。

以下代码示例演示了如何处理包含“-”值的数据，并配置tooltip以确保正常显示：

// 将“-”值替换为 null
const data = [10, 10, 20, 30, 40, 50, '-'].map(item => item === '-' ? null : item);

// 设置 tooltip 选项
const tooltip = {
  trigger: 'axis',
  formatter: params => {
    if (params[0].value === null) {
      return ''; // 对于 null 值，不显示任何内容
    }
    return `${params[0].name}: ${params[0].value}`;
  }
};

// 配置图表选项
const option = {
  tooltip,
  // 其他图表配置选项...
};

通过将“-”值映射为null，并使用自定义的formatter函数过滤null值，可以有效避免tooltip显示错误，确保图表正常显示最后一天或其他有效数据点的提示信息。