利用CSS和jquery 实现圆环统计图

最新推荐文章于 2021-08-03 23:16:40 发布

gaoming0208

最新推荐文章于 2021-08-03 23:16:40 发布

阅读量898

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/gaoming0208/article/details/82789807

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
    <title>圆环统计图</title>
    <script src="js/jquery-1.7.1.min.js"></script>
    <style>
        .circlewrap {
            position: relative;
            display: inline-block;
        }

        .hugecircle {
            width: 8rem;
            height: 8rem;
            box-shadow: 0px 0px 12px #ccc;
            border-radius: 50%;
        }


        .circlebg,
        .leftcircle,
        .rightcircle,
        .circlebgtop,
        .number {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            z-index: 20;
            border-radius: 50%;
        }

        .circlebg {
            width: 100%;
            height: 100%;
            background-color: #e6e6e6;
        }

        .circlebgtop {
            z-index: 30;
            background-color: #e6e6e6;
        }

        .leftcircle,
        .rightcircle,
        .circletop {
            height: 100%;
            width: 100%;
        }

        .hugecircle .leftcircle,
        .hugecircle .circlebgtop,
        .hugecircle .rightcircle {
            clip: rect(0, 4rem, 8rem, 0);
        }

        .number {
            z-index: 40;
            background-color: #fff;
            text-align: center;
        }


        .mt12 {
            margin-top: 0.75rem;
        }

        .hugecircle .number {
            height: 7rem;
            width: 7rem;
            font-size: 1.6rem;
            line-height: 4.5;
        }


        .circle {
            -webkit-transform-origin: center;
        }
    </style>
</head>


<body>

<div class="circlewrap hugecircle">
    <div class="circlebg"></div>
    <div class="circlebgtop"></div>
    <div class="leftcircle circle"></div>
    <div class="rightcircle"></div>
    <div class="number " data-val="0.5">
        50%
    </div>
</div>


<script>
    /*画圆弧统计图*/
    /*调用方式，多种颜色 $(select).drawCircle(true);*/
    /*调用方式，单种颜色 $(select).drawCircle(false,'green');*/
    $.fn.drawCircle = function(i, c) {
        var multicolor = i;
        var color = c
        return $(this).each(function() {
            $(this).find('.circlebgtop').css({
                'opacity': '1'
            })
            $(this).find('.rightcircle').css({
                '-webkit-transform': 'rotate(0)',
                'transform': 'rotate(0deg)',
            })
            $(this).find('.leftcircle').css({
                '-webkit-transform': 'rotate(0)',
                'transform': 'rotate(0deg)',
            })
            var val = $(this).find('.number').attr('data-val');
            if(val > 0.50000 || val == 1) {
                var deg = 360 * val + 'deg';
                $(this).find('.rightcircle').css({
                    '-webkit-transform': 'rotate(180)',
                    'transform': 'rotate(180deg)',
                    '-webkit-transition-duration':'1s',
                    'transition-duration':'1s',
                    '-webkit-transition-timing-function': 'linear',
                    '-webkit-animation-fill-mode': 'forwards'
                });
                $(this).find('.circlebgtop').css({
                    '-webkit-transition-duration':'1s',
                    'transition-duration':'1s',
                    '-webkit-transition-delay': '0.5s',
                    'opacity': '0'
                })
                $(this).find('.leftcircle').css({
                    '-webkit-transition-duration':'1s',
                    'transition-duration':'1s',
                    '-webkit-transition-timing-function': 'linear',
                    '-webkit-animation-fill-mode': 'forwards',
                    '-webkit-transform': 'rotate(' + deg + ')',
                    'transform': 'rotate(' + deg + ')'
                })
            } else if(val < 0.5000 || val == 0.50000) {
//console.log(360*val);
                var deg = 360 * val + 'deg';
                $(this).find('.rightcircle').css({
                    '-webkit-transform': 'rotate(' + deg + ')',
                    'transform': 'rotate(' + deg + ')',
                    '-webkit-transition-duration':'1s',
                    'transition-duration':'1s',
                    '-webkit-transition-timing-function': 'linear',
                    '-webkit-animation-fill-mode': 'forwards'
                });
            }
            if(multicolor) {
                if(val == 0) {
                    $(this).find('.number').css({
                        'color': '#999'
                    })
                } else if(val > 0 && val < 0.5999) {
                    $(this).find('.rightcircle').css({
                        'background-color': '#ff7068'
                    });
                    $(this).find('.leftcircle').css({
                        'background-color': '#ff7068'
                    });
                    $(this).find('.number').css({
                        'color': '#ff7068'
                    })
                } else if(val > 0.5999 && val < 0.6999) {
                    $(this).find('.rightcircle').css({
                        'background-color': '#ff9900'
                    });
                    $(this).find('.leftcircle').css({
                        'background-color': '#ff9900'
                    });
                    $(this).find('.number').css({
                        'color': '#ff9900'
                    })
                } else if(val > 0.6999 && val < 0.8499) {
                    $(this).find('.rightcircle').css({
                        'background-color': '#4fc1e9'
                    });


                    $(this).find('.leftcircle').css({
                        'background-color': '#4fc1e9'


                    });
                    $(this).find('.number').css({
                        'color': '#4fc1e9'
                    })
                } else if(val > 0.8499) {
                    $(this).find('.rightcircle').css({
                        'background-color': '#48cfad'
                    });
                    $(this).find('.leftcircle').css({
                        'background-color': '#48cfad'
                    });
                    $(this).find('.number').css({
                        'color': '#48cfad'
                    })
                } else if(val == null || val == '') {
                    $(this).find('.number').css({
                        'background-color': '#e6e6e6',
                        'color': '#aaa'
                    }).text('--')
                }
            } else {
                $(this).find('.rightcircle').css({
                    'background-color': color
                });
                $(this).find('.leftcircle').css({
                    'background-color': color
                });
                $(this).find('.number').css({
                    'color': color
                });
                $(this).find('.number').css({
                    'color': color
                });
            }


        })
    }
    setTimeout(function(){
        $('.hugecircle').drawCircle(true);
    },50)

</script>
</body>


</html>

gaoming0208

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
利用CSS和jquery 实现圆环统计图

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;圆环统计图&lt;/title&gt; &lt;script src="js/jquery-1.7.1.min.js"&gt;&lt;/s
复制链接

扫一扫