如何才能100%的还原

可以根据需求定制几个参数 https://codepen.io/Ariex/pen/...

这种类型的可视化图形用哪个js库实现最能达到效果呢

图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Circle Percent</title>
    <style type="text/css">
    body {background-color:#000;}
    .box {position:relative;margin:100px;width:256px;height:256px;border-radius:150px;box-shadow:0 0 2px 0 #6EE2CB;overflow:hidden;}
    .box .layer {position:absolute;top:50%;left:50%;border-radius:50%;overflow:hidden;transform:translate(-50%, -50%);}
    .box .layer-pie .pie {position:absolute;bottom:50%;left:50%;width:50%;height:50%;
        box-sizing:border-box;
        -webkit-transform-origin: left bottom;
        -moz-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
        -o-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: skewY(-82deg);
        -moz-transform: skewY(-82deg);
        -ms-transform: skewY(-82deg);
        -o-transform: skewY(-82deg);
        transform: skewY(-82deg);
    }
    .box .layer-pie-9 {width:98%;height:98%;background-color:#000;}
    .box .layer-pie-9  .pie {border:2px solid #000;background-color:#6EE2CB;}

    .box .layer-over-9 {width:96%;height:96%;background-color:#000;}

    .box .layer-pie-45 {width:94%;height:94%;background-color:#000;}
    .box .layer-pie-45 .pie {border:1px solid #000;background-color:#000;}

    .box .layer-over-45 {width:63%;height:63%;background-color:#000;}

    .box .layer-label {width:60%;height:60%;box-shadow:0 0 0 1px #6EE2CB;background-color:#000;}
    .box .layer-label .label {position:absolute;top:50%;left:50%;color:#FFF;text-align:center;font-size:48px;transform:translate(-50%, -50%);}
    </style>
    <script>
    document.addEventListener('DOMContentLoaded', function(){
        let domBox = document.querySelector('.box');

        let i, cntPie, degPie;
        let domLayerPie, dom;

        domLayerPie = document.querySelector('.layer-pie-9');
        cntPie = 9;
        degPie = 360 / cntPie;
        for(i=0; i<cntPie; i++)
        {
            dom = document.createElement('DIV');
            dom.className = 'pie pie-'+cntPie;
            dom.style.transform = 'rotate('+(i*degPie)+'deg) skewY('+(degPie - 90)+'deg)';

            domLayerPie.appendChild(dom);
        }

        domLayerPie = document.querySelector('.layer-pie-45');
        cntPie = 45;
        degPie = 360 / cntPie;
        for(i=0; i<cntPie; i++)
        {
            dom = document.createElement('DIV');
            dom.className = 'pie pie-'+cntPie;
            dom.style.transform = 'rotate('+(i*degPie)+'deg) skewY('+(degPie - 90)+'deg)';

            domLayerPie.appendChild(dom);
        }

        domLayerPie = document.querySelector('.box .layer-pie-45');
        let arrDomPie = Array.prototype.slice.call(domLayerPie.querySelectorAll('.pie'));
        let domLabel = document.querySelector('.box .layer-label .label');

        function render($percent)
        {
            let cntPie = 45;
            let idxMax = Math.floor(cntPie * $percent / 100);

            let i, alpha;
            let dom;
            for(i=0; i<arrDomPie.length; i++)
            {
                if(i === 0 && idxMax === 0)
                    alpha = 1;
                else if(i < idxMax)
                    alpha = i / (idxMax - 1);
                else
                    alpha = 0;

                dom = arrDomPie[i];
                dom.style.backgroundColor = 'rgba(1,235,238,'+alpha+')';
            }

            domLabel.innerHTML = $percent + '%';
        }

        function run($percent)
        {
            render($percent);

            $percent = $percent + 1;
            if($percent > 100)
                $percent = 0;

            setTimeout(function(){
                run($percent);
            },50);
        }

        run(0);
    });
    </script>
</head>
<body>
<div class="box">
    <div class="layer layer-pie layer-pie-9"></div>
    <div class="layer layer-over-9"></div>
    <div class="layer layer-pie layer-pie-45"></div>
    <div class="layer layer-over-45"></div>
    <div class="layer layer-label">
        <div class="label"></div>
    </div>
</div>
</body>
</html>

指示圆点：这个贴里我的回复有

这种类型的可视化图形用哪个js库实现最能达到效果呢

扁平化数组转换成树形?

省市区街道数据在哪里可以下载？

两个promise问题？

Vue项目一个报错无法找到原因?

如何在JavaScript中从外部中断for循环的执行？

Quartz如何根据cron表达式计算任务开始前发送通知的时间？

前端有没有办法实现页面截图？