不利用百度Echarts实现一个环形图-web建站教程在线编辑器

源代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>不利用百度Echarts实现一个环形图实例</title>
	<script src="/js/jquery-1.9.0.min.js"></script>
	<style>
	.main{
	   display: flex;
           justify-content: center;
           align-items: center;
           height: 100vh;
	}

.demost {
            width: 500px;
            height: 500px;
        }

.demost .percentage {
            width: 420px;
            height: 420px;
        }
        .panClip {
            width: 400px;
            height: 400px;
            background-color: #ccc;
            border-radius: 50%;
            position: relative;
            overflow: hidden;
        }

.panClip .percentage {
            width: 300px;
            height: 300px;
            font-size: 50px;
            color: #333;
            background-color: #fff;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            transform: translate(-50%, -50%);
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 5;
        }

.panClip .clipBox {
            width: 100%;
            height: 100%;
            position: absolute;
            border-radius: 50%;
            clip-path: polygon(50% 0%, 50% 100%, 100% 100%, 100% 0%);
        }

.panClip .clipBox .clipLeft,
        .panClip .clipBox .clipRight {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #156fff;
            position: absolute;
            top: 0px;
            left: 0px;
        }

.panClip .clipBox .clipLeft {
            clip-path: polygon(0% 0%, 0% 100%, 50% 100%, 50% 0%);
        }

.panClip .clipBox .clipRight {
            clip-path: polygon(50% 0%, 50% 100%, 100% 100%, 100% 0%);
        }

.width-none {
            width: 0 !important;
        }

.clip_none {
            clip-path: none !important;
        }

.panClip .circular {
            display: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #156fff;
            transform: translateX(-50%);
            position: absolute;
            top: 0px;
            left: 50%;
            z-index: 3;
        }

.panClip .corest {
            width: 100%;
            height: 100%;
            transition: transform 2s;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="main">
       <div class="panClip demost">
           <div class="clipBox">
               <div class="clipLeft"></div>
               <div class="clipRight width-none"></div>
           </div>
           <div class="percentage">0%</div>
           <div class="circular"></div>
           <div class="corest">
           <div class="circular"></div>
          </div>
       </div>
    </div>
    <script type="text/javascript">
        let demost = $('.demost').eq(0);
        setTimeout(() => {
            panClip(demost, 80);
        }, 500);
        function panClip(el, percentagest = 0, colort = '#156fff', callback) {
            let clipst = el.children('.clipBox'),
                circular = el.find('.circular'),
                percentage = el.children('.percentage'),
                corest = el.children('.corest'),
                clipLeft = clipst.children('.clipLeft'),
                clipRight = clipst.children('.clipRight');
            let sizet = (el.width() - percentage.width()) / 2 + 'px';
            clipLeft.css('background-color', colort);
            circular.css({ width: sizet, height: sizet, 'background-color': colort });
            if (percentagest >= 100) {
                percentagest = 0;
                clipRight.addClass("width-none");
                clipst.removeClass("clip_none");
            } else if (percentagest > 50) {
                setTimeout(() => {
                    clipRight.removeClass("width-none");
                    clipst.addClass("clip_none");
                }, 700);
            }
            if (percentagest > 0) circular.show();
            clipLeft.css({ transition: '2s', transform: `rotate(${3.6 * percentagest}deg` });
            corest.css({ transform: `rotate(${3.6 * percentagest}deg` });
            percentage.html(`${percentagest}%`);
            if (callback) callback();
        }
    </script>
</body>
</html>

源代码：点击运行 》

运行结果：

源代码：