前端中解决百分比不等于1的问题
这里写自定义目录标题做项目的时候发现,计算百分比的时候有时候不能相加等于百分之百,但发现echarts的饼图不管如何都是百分之百,从网上百度了方法平常自己计算的时候一般就是 数/总数.toFixed(2),此时强制保留2位小数,toFixed也会进行四舍五入,总是相加不等于百分百比如0.Echarts最大余额法使饼图各项相加的占比为100%在utils中新建percent.js文件e...
·
这里写自定义目录标题
- 做项目的时候发现,计算百分比的时候有时候不能相加等于百分之百,但发现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:要保留几位小数
更多推荐
所有评论(0)