js最大余额法求百分比(echarts中的饼图自动求百分比底层原理)

js最大余额法求百分比(类似echarts中的饼图自动求百分比)

//valueList要计算的数组
//idx要计算数组中值的下表
//precision百分比保留几位小数
getPercentValue: function(valueList, idx, precision) {
    // 判断是否为空
    if (!valueList[idx]) {
        return 0;
    }
    // 求和
    let sum = valueList.reduce(function(acc, val) {
        return acc + (isNaN(val) ? 0 : val);
    }, 0);
    if (sum === 0) {
        return 0;
    }
    // 10的2次幂是100,用于计算精度。
    let digits = Math.pow(10, precision);
    // 扩大比例100,
    let votesPerQuota = valueList.map(function(val) {
        return (isNaN(val) ? 0 : val) / sum * digits * 100;
    });
    // 总数,扩大比例意味的总数要扩大
    let targetSeats = digits * 100;
    // 再向下取值,组成数组
    let seats = votesPerQuota.map(function(votes) {
        return Math.floor(votes);
    });
    // 再新计算合计,用于判断与总数量是否相同,相同则占比会100%
    let currentSum = seats.reduce(function(acc, val) {
        return acc + val;
    }, 0);
    // 余数部分的数组:原先数组减去向下取值的数组,得到余数部分的数组
    let remainder = votesPerQuota.map(function(votes, idx) {
        return votes - seats[idx];
    });
    // 给最大最大的余额加1,凑个占比100%;
    while (currentSum < targetSeats) {
        //  找到下一个最大的余额,给其加1
        let max = Number.NEGATIVE_INFINITY;
        let maxId = null;
        for (let 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;
}

var arr= [3,4,5]
getPercentValue(arr,0,2);//25
getPercentValue(arr,1,2);//33.33
getPercentValue(arr,2,2);//41.67
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
ECharts 绘制饼图需要以下步骤: 1. 引入 EChartsJavaScript 文件。 2. 在 HTML 创建一个用于显示图表的 DOM 元素。 3. 使用 ECharts 的 API 初始化图表。 4. 配置图表的基本信息,如标题、提示框等。 5. 配置饼图的数据和样式,如饼图的半径、颜色、标签等。 下面是一个简单的示例代码: ```html <!DOCTYPE html> <html> <head> <title>ECharts 饼图示例</title> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script> </head> <body> <div id="chart" style="width: 600px; height: 400px;"></div> <script> // 初始化图表 var chart = echarts.init(document.getElementById('chart')); // 配置基本信息 chart.setOption({ title: { text: '年龄分布', left: 'center' }, tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' }, legend: { orient: 'vertical', left: 'left', data: ['20岁以下', '20-30岁', '30-40岁', '40岁以上'] }, series: [{ name: '年龄分布', type: 'pie', radius: '55%', center: ['50%', '60%'], data: [ {value: 20, name: '20岁以下'}, {value: 35, name: '20-30岁'}, {value: 25, name: '30-40岁'}, {value: 20, name: '40岁以上'} ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }] }); </script> </body> </html> ``` 在上述代码,我们使用 ECharts 的 `init` 方法初始化了一个图表,并使用 `setOption` 方法配置了饼图的基本信息和数据。其,`series` 属性的 `type` 属性指定了图表类型为饼图,`data` 属性指定了饼图的数据,`itemStyle` 属性指定了饼图的样式。 需要注意的是,上述代码ECharts 版本为 5.1.2,如果你使用的是其他版本的 ECharts,可能会有些许差异。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值