开发可视化差值展示组件：求差值计算函数及零值处理方案

这里提供一个健壮的实现，解决除零问题并覆盖所有需求场景：

const calculateFillPercentage = (totalIncome, totalExpense) => {
  // 两值均为0时，视为相等返回中间值50
  if (totalIncome === 0 && totalExpense === 0) {
    return 50;
  }
  
  // 支出为0且收入非0时，完全偏向收入侧返回100
  if (totalExpense === 0) {
    return 100;
  }
  
  // 收入为0且支出非0时，完全偏向支出侧返回0
  if (totalIncome === 0) {
    return 0;
  }
  
  const ratio = totalIncome / totalExpense;
  // 核心计算逻辑，满足线性映射需求
  let fillValue = 50 * (2 * ratio - 1);
  
  // 确保结果被限制在0-100的有效范围内
  return Math.min(100, Math.max(0, fillValue));
};

逻辑说明 #

1. 边界处理：

   • 当两个值都为0时，按“相等”逻辑返回50
   • 单独处理其中一个值为0的情况，避免除零错误，同时符合“一值远大于另一值”的极端场景（直接返回100或0）

2. 核心映射公式：
   50 * (2 * ratio - 1) 完美匹配需求：

   • 当ratio = 1（收入=支出）：50*(2-1) = 50，返回中间值
   • 当ratio = 2（收入是支出的2倍）：50*(4-1)=150，被Math.min(100)限制为100
   • 当ratio = 0.5（支出是收入的2倍）：50*(1-1)=0，返回0
   • 当ratio = 1.2（收入比支出大20%）：50*(2.4-1)=70，完全符合示例场景

3. 范围限制：
   用Math.min和Math.max确保最终结果不会超出0-100的有效区间，覆盖所有比例超过2倍或低于0.5倍的极端情况。

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