petite-vue实现可编辑的网站指标圆环图表效果代码-html代码-BFW代码库

petite-vue实现可编辑的网站指标圆环图表效果代码

代码语言：html

所属分类：图表

代码描述：petite-vue实现可编辑的网站指标圆环图表效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        :root {
          --light:#F5F5F5;
          --dark:#212121;
          --brown:#372F25;
          --red:#FD3E3E;
          --orange:#FFAA48;
          --green:#27C86D;
        }
        
        *, *::before, *::after {
          box-sizing: border-box;
        }
        
        body {
          margin: 0;
          background-color: var(--dark);
          color: var(--light);
          font-family: Helvetica, Arial, sans-serif;
        }
        
        .app {
          text-align: center;
          display: grid;
          place-items: center;
          min-height: 100vh;
        }
        
        .metric-group {
          display: flex;
        }
        
        .metric {
          margin: 10px;
          max-width: 90px;
          display: grid;
          gap: 16px;
          place-items: center;
        }
        .metric .label {
          font-weight: 700;
          font-size: 0.9rem;
        }
        
        .circle-chart {
          --selected-color: var(--green);
          color: var(--selected-color);
          width: 75px;
          display: grid;
          place-items: center;
        }
        .circle-chart > * {
          grid-column: 1/-1;
          grid-row: 1/-1;
        }
        .circle-chart .circle-bg {
          fill: var(--brown);
          stroke: var(--brown);
          stroke-width: 2.8;
        }
        .circle-chart .circle {
          fill: none;
          stroke: var(--selected-color);
          stroke-width: 2.8;
          stroke-linecap: round;
          animation: progress 1.2s ease-in-out forwards;
        }
        .circle-chart .percentage {
          font-family: Monaco, monospace;
          font-weight: bold;
          font-size: 1.4rem;
        }
        
        .app-editor {
          align-self: end;
          margin-bottom: 50px;
        }
        
        @keyframes progress {
          0% {
            stroke-dasharray: 0 100;
          }
        }
        input, button {
          font-size: 1.2rem;
          font-weight: 700;
          padding: 12px;
          background-color: var(--brown);
          color: var(--light);
          border: none;
          margin: 5px 2px;
        }
        
        button {
          background-color: var(--brown);
          border-radius: 100px;
          aspect-ratio: 1;
          width: 45px;
        }
        button:hover, button:focus, button:active {
          background-color: var(--red);
          cursor: pointer;
        }
    </style>




</head>

<body>
    <main class="app" v-scope="app()">
        <.........完整代码请登录后点击上方下载按钮下载查看