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

来源：互联网发布：免费的office for mac 编辑：程序博客网时间：2024/05/29 02:43

效果图

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>圆环统计图</title>
<script src="https://code.jquery.com/jquery-3.1.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%;
}

.bigcircle {
width: 6rem;
height: 6rem;
}

.middlecircle {
/*height: 4.4rem;
width:4.4rem;*/
height: 70px;
width: 70px;
}

.minicircle {
/*height:3.4rem;
width:3.4rem;*/
height: 54px;
width: 54px;
}

.smallcircle {
/*height:2.2rem;
width:2.2rem*/
height: 36px;
width: 36px
}

.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);
}

.bigcircle .leftcircle,
.bigcircle .circlebgtop,
.bigcircle .rightcircle {
clip: rect(0, 3rem, 6rem, 0);
}

.middlecircle .leftcircle,
.middlecircle .circlebgtop,
.middlecircle .rightcircle {
/*clip:rect(0,2.2rem,4.4rem,0)*/
clip: rect(0, 36px, 70px, 0)
}

.minicircle .leftcircle,
.minicircle .circlebgtop,
.minicircle .rightcircle {
/*clip:rect(0,1.7rem,3.4rem,0)*/
clip: rect(0, 27px, 54px, 0)
}

.smallcircle .leftcircle,
.smallcircle .circlebgtop,
.smallcircle .rightcircle {
/*clip:rect(0,1.1rem,2.2rem,0)*/
clip: rect(0, 18px, 36px, 0)
}

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

.bigcircle .number {
height: 5.4rem;
width: 5.4rem;
font-size: 1.2rem;
line-height: 4.2
}

.mt12 {
margin-top: 0.75rem;
}

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

.middlecircle .number {
font-size: 1rem;
line-height: 1.2rem;
width: 62px;
height: 62px;
}

.minicircle .number {
width: 48px;
height: 48px;
/*font-size:1.5rem;*/
line-height: 3;
}

.smallcircle .number {
font-size: 1rem;
line-height: 2rem;
width: 32px;
height: 32px;
font-size: 11px;
}

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

<body>

<div class="circlewrap smallcircle">
<div class="circlebg"></div>
<div class="circlebgtop"></div>
<div class="leftcircle circle"></div>
<div class="rightcircle"></div>
<div class="number " data-val="0.91">
91%
</div>
</div>
<div class="circlewrap smallcircle">
<div class="circlebg"></div>
<div class="circlebgtop"></div>
<div class="leftcircle circle"></div>
<div class="rightcircle"></div>
<div class="number " data-val="0.52">
52%
</div>
</div>
<div class="circlewrap minicircle">
<div class="circlebg"></div>
<div class="circlebgtop"></div>
<div class="leftcircle circle"></div>
<div class="rightcircle"></div>
<div class="number " data-val="0.6">
60%
</div>
</div>
<div class="circlewrap bigcircle">
<div class="circlebg"></div>
<div class="circlebgtop"></div>
<div class="leftcircle circle"></div>
<div class="rightcircle"></div>
<div class="number " data-val="0.82">
82%
</div>
</div>
<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.96">
96%
</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(){
$('.minicircle').drawCircle(true);
$('.bigcircle').drawCircle(true);
$('.smallcircle').drawCircle(true);
$('.hugecircle').drawCircle(true);
},50)

</script>
</body>

</html>

阅读全文

0 0