echarts柱状图正负值显示不一致的解决方法
在使用ECharts绘制柱状图时，如果数据中包含0或“-”等特殊值，可能会导致正负值显示不正确。本文提供一种解决方案，确保柱状图上正负值准确显示。
问题根源及解决方案
问题在于数据数组（例如data1和data4）中存在0和“-”等无法直接转换为数值进行正负值判断的值。
解决方法：
-
数据预处理： 将数据数组中的0和“-”替换为一个极小的负数，例如-0.01。这使得所有数据都能参与正负值判断。
-
自定义
formatter函数： 修改tooltip和label的formatter函数，以便正确处理数据并显示正负号。
修改后的代码示例：
// ...其他代码...
var data1 = [0, -294, -211, -211, -0.01].map(item => (item === 0 || item === '-') ? -0.01 : item); // 数据预处理
var data4 = [-294,'-', '-', '-',-0.01].map(item => (item === '-' ) ? -0.01 : item); // 数据预处理
// ...其他代码...
option = {
// ...其他配置...
tooltip: {
// ...其他配置...
formatter: function (params) {
let tar = params[1].value !== -0.01 ? params[1] : params[0]; // 选择非-0.01的数据项
return tar.name + '
' + tar.seriesName + ' : ' + (tar.value >=0 ? '+' + tar.value : tar.value); // 显示正负号
}
},
series: [
// ...其他配置...
{
// ...其他配置...
label: {
normal: {
// ...其他配置...
formatter: function (p) {
return data1[p.dataIndex] >= 0 ? ('+' + p.value) : p.value; // 显示正负号
}
}
}
},
// ...其他配置...
{
// ...其他配置...
label: {
// ...其他配置...
formatter: function (p) {
return data4[p.dataIndex] >= 0 ? ('+' + p.value) : p.value; // 显示正负号
}
}
},
// ...其他配置...
]
};
// ...其他代码...
通过以上修改，ECharts柱状图将能够正确显示正负值，并清晰地标注正负号，避免了显示上的歧义。 注意map函数用于对数组进行数据预处理，将0和'-'替换为-0.01。 formatter函数则负责在显示时添加正负号。
