开发实践｜关于100以内的加减乘除法问题之我在客户现场遇到的bug

原创

Aion

修改于 2024-11-28 17:15:17

2250

好事发生

这里推荐一篇实用的文章：BuildAdmin19：前端项目如何设计一个异步API请求模块，作者：【叫我阿柒啊】。

这篇文章作者主要讲在前后端分离的架构中，后端负责封装api接口，前端负责请求api接口。我通常使用Springboot来开发后端，在前端项目中就要实现api请求模块。在之前拆解BuildAdmin的项目中，因为一直在构建前端页面的各个模块，就没有开发后端接口。后面就打算开始后端开发，例如菜单的请求、数据页面的渲染等等。那么前端如何请求这些后端接口呢，所以这边篇文章还是来封装一个前端的接口请求模块。

引子

夜色催更，清尘收露，小曲幽坊月暗。竹槛灯窗，识秋娘庭院。笑相遇，似觉琼枝玉树相倚，暖日明霞光烂。水眄兰情，总平生稀见。
画图中、旧识春风面。谁知道、自到瑶台畔。眷恋雨润云温，苦惊风吹散。念荒寒、寄宿无人馆。重门闭、败壁秋虫叹。怎奈向、一缕相思，隔溪山不断。
——《拜星月慢·高平秋思》（北宋周邦彦）

他思秋娘，我思客户，办公桌前茶已凉，唯独键盘暖手掌。

夜夜思，日日想，希望别改需求，希望不要给bug。

“这加减法的问题，你也能计算错误？”牛马焉能一生，奈何，奈何～

1 客户看到的问题

好了，回归正题吧。

是这样子，前阵子，客户丢过来一个Excel，其中录入了一个bug，名称为：百分比加起来不等于100%，而且还特别着重给字体增加了红色（我这里为了展示对客户的尊重以及事实真相的还原，便也把上述字体标记为了红色）。

“这怎么可能呢？”嘴上不承认，心理犯嘀咕，这就不是开发应该背锅，无论背锅还是甩锅，先解决问题。

（此时）我是一名做数据分析的工程师，主要给客户展示一下2023年广东数字产业集群生产总值情况（2024接近尾声，2024的数据图表也即将出来了）。为了先切入正题，那么先给看一下这个图，便一目了然。

2 我拿到原始数据

原始数据是从数据工程师这里借调过来的，准确些应该是从工程师的excel中CV过来的。

备注⚠️：数据为公开数据，不存在隐私、安全等问题。

3 处理原始数据

处理数据是为了更好的做对比，广东数字产业集群生产总值，我从Excel中使用函数也做了一下处理，首先将所有数据求和，在合计列计算出来2023年广东数字产业集群生产总值情况；再在后面增加了一列——为占比，占比是每个区域生产总值除以总数后乘以100，再保留两位小数，最后将数据同百分号（%）使用拼接字符串的方式拼接起来。最后我将占比和占比（保留整数）分别罗列了下。在Excel中使用函数计算，计算方式如下：

// 占比（保留两位小数，目的想要做四舍五入）
=CONCAT(ROUND(I3/$I$8*100,2),"%")

// 占比（保留整数，目的想要做四舍五入）
=CONCAT(ROUND(I3/$I$8*100,0),"%")

4 问题分析

在使用组件展示时，我做了相应的测试，而且这个也是通过测试组测试通过的需求。在返回来继续查阅代码时，我发现饼图的 label 中通过 formatter 设置的百分比相加的确会有不等于 100% 这一个情况的出现，这通常是由于数据精度问题或格式化过程中的舍入误差导致的。组件在计算百分比时是基于每个扇区的值除以所有扇区值的总和，如果在这个过程中存在精度损失，就可能导致百分比总和不是精确的 100%，在Excel中亦如此。最简单的测试方法就是把数值最后一位相加起来后看下个位数是否为0，为0则大体准确，不为0则肯定不准确。

……省略代码
series: [ 
    {
      name: '',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2 
      },
      label: {
        show: true,
        position: 'inside',
        formatter: '{b}: {c} ({d}%)'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
  ……省略代码

5 数据分析

5.1 分析有问题的数据

例如我这里的数值，个位相加起来最终的结果测试如下：

15.2%	
13.06%
12.47%
31.05%
28.22%
// 加起来和为30，个位数字为0
0 + 6 + 7 + 5 + 2 = 20 

15%
13%
12%
31%
28%
// 加起来和为30，个位数字为9
5 + 3 + 2 + 1 + 8 = 19

5.2 对比另外一组数据

另外一组数据，我在测试时发现，无论是保留两位还是保留整数，都是正常，如下：

27.54%
31.4%
3.84%
12.05%
5.12%
10.38%
3.49%
3.65%
2.53%
// 加起来和为40，个位数字为0
4 + 0 + 4 + 5 + 2 + 8 + 9 + 5 + 3 = 40

28%
31%
4%
12%
5%
10%
3%
4%
3%
// 加起来和为30，个位数字为0
8 + 1 + 4 + 2 + 5 + 0 + 3 + 4 + 3 = 30

6 代码处理

解决方法有很多种，这里提供我自己的一种方式。

由于四舍五入或显示精度的限制，饼图上的百分比可能不会精确到100%。在使用工具时处理不当，有没有更好的办法来处理呢？我当时唯一能想到的办法就是循环判定，直到最后一个数据时，直接使用单位1 减去上述所有占比之和，剩下就是最后一个的百分比，我这么做的目的只是想让客户知道，这里可以做到数值只和为100。具体代码如下：

    ……此处省略代码

    let config = {
      label,
      num: value[index].value,
      percent: ((value[index].value / sum) * 100).toFixed(2),
      firm: value[index].firm,
    };
    // 重点代码处理
    if (index != legend.length - 1 && total < 100) {
      total += Number(((value[index].value / sum) * 100).toFixed(2));
      config.percent = config.percent;
    } else {
      config.percent = (100 - total).toFixed(2);
    }
    ……此处省略代码