Echarts饼图百分比算法利用Java实现

问题:在开发中有这样的问题,就是需要在其他地方展示百分比,但是自己计算的百分比通过四舍五入后,与饼图里面的百分比不一致的问题,要想解决这个问题,那么必须要使用echarts源码中的计算方式。当存在四舍五入的时候,Echarts的百分比算法和自己写的百分比算法不同,导致相加后不等于100%.

如下图:数据不一致的问题

Echarts饼图百分比算法利用Java实现_第1张图片

 百分比算法源码地址:https://github.com/apache/echarts/blob/HEAD/src/util/number.ts

Java方式解决:

public class DemoTest {
    /**
     * 数组
     *
     * @param arr       数组
     * @param sum       总数
     * @param idx       索引
     * @param precision 精度
     */
    public static double getPercentValue(int[] arr, double sum, int idx, int precision) {
        if ((arr.length - 1) < idx) {
            return 0;
        }
        //求和
        if (sum <= 0) {
            for (int j : arr) {
                sum += j;
            }
        }
        //10的2次幂是100,用于计算精度。
        double digits = Math.pow(10, precision);
        //扩大比例100
        double[] votesPerQuota = new double[arr.length];
        for (int i = 0; i < arr.length; i++) {
            double val = arr[i] / sum * digits * 100;
            votesPerQuota[i] = val;
        }
        //总数,扩大比例意味的总数要扩大
        double targetSeats = digits * 100;
        //再向下取值,组成数组
        double[] seats = new double[arr.length];
        for (int i = 0; i < votesPerQuota.length; i++) {
            seats[i] = Math.floor(votesPerQuota[i]);
        }
        //再新计算合计,用于判断与总数量是否相同,相同则占比会100%
        double currentSum = 0;
        for (double seat : seats) {
            currentSum += seat;
        }
        //余数部分的数组:原先数组减去向下取值的数组,得到余数部分的数组
        double[] remainder = new double[arr.length];
        for (int i = 0; i < seats.length; i++) {
            remainder[i] = votesPerQuota[i] - seats[i];
        }
        while (currentSum < targetSeats) {
            double max = 0;
            int maxId = 0;
            int len = 0;
            for (int i = 0; i < remainder.length; ++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;
    }

    public static void main(String[] args) {
        int[] arr = new int[]{12, 1, 1, 1, 1, 1, 1};
        for (int i = 0; i < arr.length; i++) {
            System.out.println("值:" + getPercentValue(arr, 18, i, 2));
        }
    }
}

结果如下:

Echarts饼图百分比算法利用Java实现_第2张图片

 开发中从后端计算好即可解决问题。如下

Echarts饼图百分比算法利用Java实现_第3张图片

 文章参考:https://blog.csdn.net/qq_16438883/article/details/102953597

你可能感兴趣的:(vue,echarts,前端,javascript)