原生js实现圆环饼状图表效果代码-html代码-BFW代码库

原生js实现圆环饼状图表效果代码

代码语言：html

所属分类：图表

代码描述：原生js实现圆环饼状图表效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>
  <meta charset="UTF-8">
  


  
  
<style>
*{
    cursor:default
}
html,body{
height: 100%;
margin: 0;    
}

body{
font-size: 16px;
font-family: sans-serif;
display:flex;
align-items: center;
justify-content:center;
height: 100%;    
min-height: 300px;
background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' stroke='black' stroke-width='1'><line x1='0' y1='0' x2='32' y2='32' /><line x1='0' y1='32' x2='32' y2='0' /></svg>");
background-size:16px 16px;
background-position: center center;
}
svg{
width: 90vmin;
height: 90vmin;
border:1px solid  darkgray; 
}
#sectors circle{
stroke-width: 57.29;
fill:none;
stroke-opacity: .5;
transform-origin: center center;
transition:.4s;
cx:100px;
cy:100px;
r:57.29px; /* With this radius, the length of the circumference is 360, which saves mathematical operations. */    
}
#base{
transform-origin: center center;
transition:1s ease-out;
}
#ahadow{
filter: drop-shadow(3px 3px 3px black);
}
#textPercent text{
transform-origin:  100px 100px;
fill:white;
transition:.5s ease-out;
stroke-width:.2;
font-size: 10px;
font-weight: bold;   
x:100;
}
#textPercent textPath{
text-anchor:middle;
}
#maximun{
opacity: 0;    
}
</style>

  
  
</head>

<body >
  <svg viewBox="0 0 200 200">
    <defs>
        <path id="semicircle" d="M40,100 a 60,60 0,0,1 120,0"/>
        <path id="semicircle_1" d="M29,100 a 60,60 0,0,1 142,0"/>
    </defs>
    <g id="ahadow">
        <g id="base">
            <g id="sectors">
                <circle/><circle/><circle/><circle/><circle/><circle/>
            </g>
            <g id="textPercent">
                <text></text><text></text><text></text><text></text><text></text><text></text>
            </g>
        </g>
    </g> 
    <circle cx="100" cy="100" r="86" stroke-width="3" stroke="white" fill="none"/>
    <circle cx="100" cy="100" r="28.5" stroke-width="3" stroke="white" fill="none"/>
    <g id="maximun" fill="white">
        <text x="55%" text-anchor="middle" font-size="8">
            <textPath href="#semicircle_1"> maximum value </textPath>
        </text>    
        &l.........完整代码请登录后点击上方下载按钮下载查看