css+svg实现雷达饼状图效果代码-html代码-BFW代码库

css+svg实现雷达饼状图效果代码

代码语言：html

所属分类：图表

代码描述：css+svg实现雷达饼状图效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        html {
          --page-background: #fff;
          --graph-background: #eee;
        }
        
        .one {
          --color: blue;
          --value: 3;
          --max: 4;
        }
        
        .two {
          --color: teal;
          --value: 4;
          --max: 6;
        }
        
        .three {
          --color: rebeccapurple;
          --value: 6;
          --max: 7;
        }
        
        .four {
          --color: green;
          --value: 30;
          --max: 100;
        }
        
        .five {
          --color: orange;
          --value: 4;
          --max: 10;
        }
        
        .six {
          --color: orangered;
          --value: 7;
          --max: 10;
        }
        
        body {
          margin: 0;
          display: grid;
          place-content: center;
          height: 100vh;
          background: var(--page-background, white);
        }
        
        svg {
          width: 90vmin;
          height: 90vmin;
          transform: rotate(12deg);
          border-radius: 50%;
          background: radial-gradient(var(--page-background), var(--graph-background));
        }
        
        circle {
          fill: none;
          stroke: var(--color, red);
          stroke-width: calc(50px * (var(--value, 0) / var(--max, 100)));
          stroke-dasharray: 1 6;
          r: calc(25px * (var(--value) / var(--max)));
          -webkit-animation: circle 0.75s linear both;
                  animation: circle 0.75s linear both;
        }
        circle:last-child {
          stroke-dasharray: 1.2 6;
        }
        
        @-webkit-keyframes circle {
          0% {
            opacity: 0;
            stroke-width: 0;
            stroke-dasharray: 0 6;
          }
        }
        
   .........完整代码请登录后点击上方下载按钮下载查看