HTML百分比饼图加弯曲文字效果 | SVG简易应用
使用animation绘制圆形饼图,SVG绘制曲线形文字
demo:http://jsbin.com/kiguxan
HTML:
<div class="container-pie">
<div class="container">
<div class="outbox outbox1">
<!--–饼图–-->
<div class="pie">
53.8%
</div>
<!--–饼图内文字,tspan内的百分比根据实际百分比手动修改–-->
<div>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<path d="M-4,101 a1,1 0 0,1 166,0" id="myTextPath">
</path>
</defs>
<defs>
<path d="M-3,40 a1,1 0 0,0 160,0" id="myTextPath2">
</path>
</defs>
<text style="text-anchor:start;font-size: 12px; fill:white;word-spacing: 0.5px;" y="100">
<textpath xlink:href="#myTextPath">
<tspan x="100">
城镇人口
</tspan>
<tspan dy="15" x="110">
53.8%
</tspan>
</textpath>
<textpath xlink:href="#myTextPath2">
<tspan x="100">
乡村人口
</tspan>
<tspan dy="15" x="110">
46.2%
</tspan>
</textpath>
</text>
</svg>
</div>
<div class="center-txt">
<div>
<span class="orangefont">
A城总人口
</span>
</div>
</div>
</div>
</div>
<div class="container">
<div class="outbox outbox2">
<!--–饼图–-->
<div class="pie">
34.56%
</div>
<!--–饼图内文字,tspan内的百分比根据实际百分比手动修改–-->
<div>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<path d="M-4,101 a1,1 0 0,1 166,0" id="myTextPath">
</path>
</defs>
<text style="text-anchor:start;font-size: 12px; fill:white;letter-spacing: 0.5px;" y="100">
<textpath xlink:href="#myTextPath">
<tspan x="100">
鲜果类占比
</tspan>
<tspan dy="15" x="110">
34.56%
</tspan>
</textpath>
</text>
</svg>
</div>
<div class="center-txt">
<div>
<span>
市场农副产品消费总额
</span>
</div>
</div>
</div>
</div>
</div>
CSS:
.orangefont{color:#F96E3E;}
.pie{
border-radius:50%;
}
.outbox1 .pie{background: #FFBD5C;background-image:linear-gradient(to right,transparent 50%,#F96E3E 0);}
.outbox2 .pie{background: #31BD48;background-image:linear-gradient(to right,transparent 50%,#FFBD5C 0);}
.pie::before{
content:";
display: block;
margin-left: 50%;
height:100%;
border-radius:0 100% 100% 0 / 50%;
background-color:inherit;
transform-origin:left;
animation:spin 50s linear infinite,
bg 100s step-end infinite;
animation-play-state: paused;
animation-delay:inherit;
}
.outbox1 .pie::before{animation:spin 50s linear infinite,
bg1 100s step-end infinite;
animation-play-state: paused;
animation-delay:inherit;}
@keyframes spin{
to{transform: rotate(.5turn);}
}
@keyframes bg{
50%{background: #FFBD5C;}
}
@keyframes bg1{
50%{background: #F96E3E;}
}
.outbox{position: relative;}
.outbox>div{position: absolute;left:0;right:0;}
.outbox>div,svg{width:160px;height:160px;}
.center-txt{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content:center;
align-items:center;
}
.center-txt>div{
width:80px;
height:80px;
background:#fff;
border-radius:50%;
color:#31BD48;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content:center;
align-items:center;
text-align: center;
}
.container-pie{overflow: hidden;display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content:space-around;
align-content:space-around;
}
.container{width:160px;height:160px;float:left;margin:0 0%;}
JS :
function $$(selector, context) {
context = context || document;
var elements = context.querySelectorAll(selector);
return Array.prototype.slice.call(elements);
}
$$('.pie').forEach(function(pie) {
var p = pie.textContent;
var pf = parseFloat(p) / 100;
var pr = pf * 360 / 2;
console.log(pr);
pie.style.transform = "rotateZ(-" + pr +"deg)";
pie.style.animationDelay = '-' + parseFloat(p) + 's';
pie.textContent = "";
});