前端中解决百分比不等于1的问题

• 做项目的时候发现,计算百分比的时候有时候不能相加等于百分之百，但发现echarts的饼图不管如何都是百分之百,从网上百度了方法
• 平常自己计算的时候一般就是 数/总数.toFixed(2),此时强制保留2位小数,toFixed也会进行四舍五入，总是相加不等于百分百比如0.
• Echarts最大余额法使饼图各项相加的占比为100%
• 在utils中新建percent.js文件

export function   getPercentValue (valueList, idx, precision) {
    // 判断是否为空
    if (!valueList[idx]) {
        return 0;
    }
    // 求和
    var sum = valueList.reduce(function (acc, val) {
        return acc + (isNaN(val) ? 0 : val);
    }, 0)
    if (sum === 0) {
        return 0;
    }
    // 10的2次幂是100，用于计算精度。
    var digits = Math.pow(10, precision);
    // 扩大比例100，
    var votesPerQuota = valueList.map(function (val) {
        return (isNaN(val) ? 0 : val) / sum * digits * 100;
    })
    // 总数，扩大比例意味的总数要扩大
    var targetSeats = digits * 100;
    // 再向下取值，组成数组
    var seats = votesPerQuota.map(function (votes) {
        return Math.floor(votes);
    })
    // 再新计算合计，用于判断与总数量是否相同，相同则占比会100%
    var currentSum = seats.reduce(function (acc, val) {
        return acc + val;
    }, 0)
    // 余数部分的数组：原先数组减去向下取值的数组，得到余数部分的数组
    var remainder = votesPerQuota.map(function (votes, idx) {
        return votes - seats[idx];
    })
    // 给最大最大的余额加1，凑个占比100%；
    while (currentSum < targetSeats) {
        //  找到下一个最大的余额，给其加1
        var max = Number.NEGATIVE_INFINITY;
        var maxId = null;
        for (var i = 0, len = remainder.length; i < len; ++i) {
            if (remainder[i] > max) {
                max = remainder[i];
                maxId = i;
            }
        }
        // 对最大项余额加1
        ++seats[maxId];
        // 已经增加最大余数加1，则下次判断就可以不需要再判断这个余额数。
        remainder[maxId] = 0;
        // 总的也要加1，为了判断是否总数是否相同，跳出循环。
        ++currentSum;
    }
    // 这时候的seats就会总数占比会100%
    return seats[idx] / digits
}

• 在需要计算百分比的文件中引入新建的文件

import {getPercentValue} from '@/utils/percent.js'

• 使用

getPercentValue(arrTaxiDir,index,2)

• 参数1:是要计算百分比的数组
• 参数2：是数组的下标
• 参数3:要保留几位小数