问题背景与排查目标
问题描述与典型现象
在实际使用 ECharts 进行可视化时，Tooltip 提示框有时会遇到无法正确显示负值数据的情况，给数据分析带来困扰。典型现象包括：提示框只显示正数、显示为0、或直接内容为空。此类问题会影响到对比与趋势分析，因此需要进行系统的排查。ECharts Tooltip 提示框无法显示负值数据怎么办？完整排查与解决方案将贯穿本文的步骤与方法。
本指南围绕“ECharts Tooltip 提示框无法显示负值数据怎么办？完整排查与解决方案”这一问题，提供从数据源、坐标轴、格式化回调、以及多系列场景的完整排查与解决办法，帮助你在生产环境中快速定位并修复问题。
排查目标与预期结果
排查的目标是确保在各种场景下，负值数据能够在 Tooltip 中以正确的负号与数值呈现，且不同系列的数据在同一提示框中均能正确显示。
最终的期望是：无论数据源如何、坐标轴如何配置，负值的数值信息都能被完整、准确地呈现给用户。
检查数据源与数据结构
数据数组格式与传递方式
首先需要确认 series.data 中的数值类型为数值类型（number），而非字符串、对象或其他类型。错误的数据类型可能导致负值在显示时被错误解析，从而影响tooltip 的呈现。
在开发阶段应通过控制台或断点对比原始数据与提示框展示的值，确保 params.value 或 params.data 中确实包含负值。若存在类型不一致，应进行显式类型转换。
数据中的空值、NaN 与 Infinity 的处理
数据中若存在 NaN、undefined 或 Infinity，tooltip 的渲染可能会出现异常，甚至导致负值信息缺失。需要在数据生成阶段清洗，或用合理的默认值替代无效项。
// 示例：替换无效数值，确保后续格式化不丢失负值信息
data = rawData.map(v => Number.isFinite(v) ? v : 0);
坐标轴与数值范围设置排查
yAxis 的 min/max/scale 设置对负值的影响
当 yAxis 启用了 min、max 或 scale，且未正确覆盖负值区间时，负值可能在图表内部被截断，进而影响 tooltip 中对应点的显示。
解决思路是让 yAxis 的数值范围包含负值，必要时移除对 min 的强制约束，或显式设置一个包含负值区间的范围，例如：min: -100。
option = {yAxis: {type: 'value',min: -100, // 覆盖包含负值的区间// 也可以不设置 min，由系统自适应}
};
是否使用对数坐标（log）与负值的冲突
如果 yAxis 使用 type: 'log'，则 负值 和 0 在对数坐标下不可用，会导致渲染失败或 tooltip 无法显示相关点。因此，不应在对数坐标中出现负值，应改用线性坐标或对数据进行非负处理。
切换为线性坐标后，负值数据 将能够在 tooltip 中正确呈现。
tooltip 格式化回调的正确用法
tooltip.formatter 的使用要点
tooltip.formatter 是自定义提示框内容的核心入口。不同图表类型中 params 的结构略有差异，若错误地从 params 中取值，特别是在多系列场景下，可能导致负值信息被错位或缺失。
正确的做法是依据图表类型选择合适的字段读取值，例如：params.value、params[0].value、或使用 params[i].data 来访问数值，从而确保对负值也能正确读取。
示例：保证负值在 Tooltip 中正确显示
下面的示例展示了一个可支持多系列的 formatter，确保所有系列的负值都能被正确拼接并显示。
tooltip: {trigger: 'axis',formatter: function (params) {// params 可能是数组，针对多系列逐项拼接if (!Array.isArray(params)) {return params.name + ' : ' + params.value;}var s = params.map(function(p){var v = p.value;return p.seriesName + ' : ' + v;}).join('
');return s;}
}
tooltip.valueFormatter 的潜在陷阱
若使用 tooltip.valueFormatter，需确保对负值的处理不会丢失符号。优先使用 formatter，并在其中对负值进行显式处理。
tooltip: {valueFormatter: function (value) {// 使用字符串返回，确保负号不被截断return value.toString();}
}
多系列与数据结构的处理
多系列数据中负值在 Tooltip 的显示问题
在<多系列的图表中，tooltip 的内容由各系列的点组成。若某些系列包含 负值，需确保对应的 formatter 能正确拼接，同时避免因 null、undefined 导致的显示缺失。
还要确保每个系列的 data 的单位与精度保持一致，避免在格式化过程中出现四舍五入导致负值显示异常的情况。
数据结构与系列名的绑定
在设置 legend 或 tooltip 时，应确保每个数据点的 name 与该系列的 seriesName 对齐。错误的对齐会让负值信息出现在错误的系列，造成解读错乱。
option = {tooltip: {trigger: 'axis',formatter: function (params) {return params.map(p => p.seriesName + ' = ' + p.value).join('
');}},series: [{ type: 'bar', name: '实际值', data: [ -5, 3, -2, 7 ] },{ type: 'bar', name: '预测值', data: [ -4, 2, -1, 6 ] }]
};
特定场景的解决方案与完整代码示例
常见解决方案清单
在遇到 ECharts Tooltip 提示框无法显示负值数据 的场景时，可以优先尝试以下常见解决方案：确认数据中确实存在 负值、确保 yAxis 的范围覆盖负值、采用标准的 formatter、并避免在对数坐标下出现负值。
同时，在开发阶段可以开启 tooltip.axisPointer、tooltip.trigger 与 axisLabel 的调试信息，以快速定位是数据问题还是格式化逻辑的问题。
完整排错示例代码
下面给出一个完整的示例，覆盖数据准备、坐标轴设置、tooltip 格式化，以及一个简单的多系列柱状图，确保负值能够在 Tooltip 中正确显示。
// 1) 数据准备：确保负值存在且可读取
var dataNeg = [-12, -5, 0, 3, 8, -2];// 2) ECharts 选项
var option = {tooltip: {trigger: 'axis',axisPointer: { type: 'shadow' },formatter: function (params) {// 确保所有系列的负值都能显示return params.map(function(p) {var v = p.value;return '' + p.seriesName + ': ' + v;}).join('
');}},xAxis: {type: 'category',data: ['A','B','C','D','E','F']},yAxis: {type: 'value',min: -15},series: [{name: '实际值',type: 'bar',data: dataNeg}]
};var chart = echarts.init(document.getElementById('main'));
chart.setOption(option);
