问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像头饰
trust2018
    1.1k24126188

    如何才能100%的还原

    javascript可视化
    阅读 2.5k
    2 个回答
    得票最新
    头像
    Xeira
      4.1k2717
      ✓ 已被采纳
      头像
      Fractal
        5.5k22331

        图片描述

        <!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>

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

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        被 2 篇内容引用
        推荐问题
        宣传栏