Echarts最大余额法使饼图各项相加的占比为100%。

项目中测试妹子报个bug:为什么饼图加起来不是100%;没办法只要去找方法,原本之前的项目是把剩余部分加到最大占比的地方,这次项目比较赶没做这方面的考虑,刚好饼图用Echarts发现他们相加刚好为100%,经过度娘,发现他们用的是最大余额法,就有了下面的方法,方法网上应该能搜到,只是加了自己的注释。感觉之后会用到,所以记录下。

   // 传入参数(数组数据,数组下标,精度),底下有例子调用
    var getPercentValue = function (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
    }

例子:

var arr= [3,4,5]
document.write( getPercentValue(arr,0,2) + "<br />")
document.write( getPercentValue(arr,1,2) + "<br />")
document.write( getPercentValue(arr,2,2) + "<br />")
结果
25
33.33
41.67

项目图
在这里插入图片描述

如有错误,欢迎大佬的点评。

ECharts是一个强大的JavaScript图表库,它支持创建各种类型的图表,包括饼图。如果你想在饼图上实现Legend(图例)的切换,并在切换时动态更新饼图比,你可以这样做: 1. 首先,你需要在初始化饼图时设置`legend`配置,包括`show`属性以及`data`数组,对应每个系列。 ```javascript var option = { legend: { show: true, data: ['系列A', '系列B'] // 根据需要自定义图例项 }, series: [ { name: '系列A', type: 'pie', data: [数值A, 数值B] // 每个系列的数据 }, { name: '系列B', type: 'pie', data: [数值C, 数值D] } ] }; ``` 2. 当用户点击图例项时,你可以通过监听`legend`的`select`事件来触发数据更新。在这个事件处理函数中,根据选中的系列名称,更新对应的`series`数据,然后调用`setOption`方法刷新图表: ```javascript echarts.getInstanceByDom(document.getElementById('yourChartId')).on('legend.select', function (params) { var selectedSeriesName = params.name; // 获取当前选中的系列名 var newData = [0, 0]; // 初始化新数据 // 更新相应系列的数据 if (selectedSeriesName === '系列A') { newData = [新的数值A, 新的数值B]; } else if (selectedSeriesName === '系列B') { newData = [新的数值C, 新的数值D]; } // 刷新图表 option.series[0].data = newData; echarts.util.callback(option, 'option', this); }); ``` 请注意,以上代码示例假设你已经有一个ECharts实例并绑定了到HTML元素。将`document.getElementById('yourChartId')`替换为你实际的图表容器ID。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值