css画饼图

 

<template slot-scope="scope">

          <div class="pie" :style="{'--p': scope.row.rate}" style="--p:10;--b:10px;--c:#FFAB79;">

            <!--

              --p：这个变量应该包含百分比值作为一个数字（不带%符号）。它应该与内容相同。

              --b：这个变量将定义边框的粗细。

              --c：这个变量将定义主要颜色。

            -->

            <!-- 60% -->

          </div>

          <!-- <el-progress

            type="circle"

            :percentage="scope.row.rate"

            :width="40"

            :show-text="false"

          ></el-progress> -->

        </template>

<style lang="scss" scoped>

  .pie {

   --w:50px;

   width: var(--w);

   aspect-ratio: 1; // aspect-ratio: 1用来确保元素保持方形

   position: relative;

   display: inline-grid;

   place-content: center;

   margin: 5px;

   font-size: 12px;

   font-weight: bold;

   font-family: sans-serif;

 }

 .pie:before {

   content: "";

   position: absolute;

   border-radius: 50%;

   inset: 0;

   background: conic-gradient(var(--c) calc(var(--p)*1%),rgba(28, 157, 255, 1) 0);

  //  -webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));

  //          mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));

 }

</style>

 参考文章：手把手教你使用CSS制作动态饼图（附代码）(点晴免费OA系统(国内永久免费OA协同办公管理软件)最好的官网下载)