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: bol.........完整代码请登录后点击上方下载按钮下载查看