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显示错误，确保图表正常显示最后一天或其他有效数据点的提示信息。
