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协同办公管理软件)最好的官网下载)