H5 Svg 半圆圆环占比图

news2024/9/23 9:21:18

效果图
在这里插入图片描述
主逻辑

/* 虚线长度 */
stroke-dasharray  
/* 偏移 */
stroke-dashoffset

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./assets/global.css">

    <style>
        .circle-progress-bar {
            --width: 300px;
            --stroke-width: 12px;
            --height: calc((var(--width) + var(--stroke-width)) / 2);
            width: var(--width);
            height: var(--height);

            overflow: hidden;
            position: relative;
        }

        .circle-progress-bar .circle-progress-text {
            font-size: 30px;
            position: absolute;
            bottom: 0px;
            width: 100%;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
        }

        .circle-progress-bar .circle-progress-svg {
            width: var(--width);
            height: var(--width);
            transform: rotate(180deg);
        }

        .circle-progress-bar .circle-progress-circle {
            /* 周长 */
            stroke-dasharray: 628;
            /* 偏移 */
            stroke-dashoffset: 333;
        }
    </style>
</head>

<body>
    <div class="circle-progress-bar">
        <svg class="circle-progress-svg">
            <circle class="circle-progress-circle-back" stroke-linecap="round" cx="150" cy="150" r="144"
                fill="transparent" stroke-width="12" stroke="grey" />
            <circle class="circle-progress-circle" stroke-linecap="round" cx="150" cy="150" r="144" fill="transparent"
                stroke-width="12" stroke="grey" />
        </svg>
        <div class="circle-progress-text">60%</div>
    </div>

    <script type="module">
        let circleProgressBarDom = document.querySelector('.circle-progress-bar')               // 整体的容器
        let circleProgressCircleDom = document.querySelector('.circle-progress-circle')         // 前面弧线DOM
        let circleProgressCircleBackDom = document.querySelector('.circle-progress-circle-back')// 后面弧线DOM
        let circleProgressTextDom = document.querySelector('.circle-progress-text')             // 文字DOM
        let width = 200;                            // 盒子宽度
        let strokeWidth = 20                        // 线宽
        let r = width / 2 - strokeWidth / 2         // 半径
        let perimeter = (r * 2 * Math.PI).toFixed(0)// 周长
        let ratio = .66;                            // 占比 小数
        let backgroundColor = 'rgb(168, 168, 168)'  // 后面弧线的颜色
        let color = 'rgb(255, 181, 54)'             // 前面弧线的颜色

        // 设置宽度、线宽
        circleProgressBarDom.setAttribute('style', `--width: ${width}px; --stroke-width: ${strokeWidth}px`)
        // 设置中心点、半径、线宽、占比、颜色
        circleProgressCircleBackDom.setAttribute('cx', width / 2)
        circleProgressCircleBackDom.setAttribute('cy', width / 2)
        circleProgressCircleBackDom.setAttribute('r', r)
        circleProgressCircleBackDom.setAttribute('stroke-width', strokeWidth)
        circleProgressCircleBackDom.setAttribute('style', `stroke-dasharray: ${perimeter};stroke-dashoffset: ${perimeter / 2 * 0 + perimeter / 2}`)
        circleProgressCircleBackDom.setAttribute('stroke', backgroundColor)
        // 设置中心点、半径、线宽、占比、颜色
        circleProgressCircleDom.setAttribute('cx', width / 2)
        circleProgressCircleDom.setAttribute('cy', width / 2)
        circleProgressCircleDom.setAttribute('r', r)
        circleProgressCircleDom.setAttribute('stroke-width', strokeWidth)
        circleProgressCircleDom.setAttribute('style', `stroke-dasharray: ${perimeter};stroke-dashoffset: ${perimeter / 2 * (1 - ratio) + perimeter / 2}`)
        circleProgressCircleDom.setAttribute('stroke', color)
        // 设置文字
        circleProgressTextDom.textContent = ratio * 100 + '%'

    </script>

</body>

</html>