1、引入computerd和reactive

import { computed, reactive} from 'vue'

2、

const data = reactive({
      //进度
      percent: '30%',
      // 底色
      chartColor: '#EFF1F4',
      // 进度色
      chartProgressColor: '#3D73F5',
      // 进度宽度
      progressWidth: '112px'
})
const style = computed({
  get(){
    
    return{
        '--percent': data.percent,
        '--chartColor': data.chartColor,
        '--chartProgressColor': data.chartProgressColor,
        '--progressWidth': data.progressWidth
    }
  }
  
})

3、css样式

.circular1 {
  border-radius: 100%;
  width: 112px;
  height: 112px;
  display: inline-block;
  // border-radius: 100px 100px 100px 100px;
  opacity: 1;
  // 实现饼状图
  background-image: conic-gradient(
    var(--chartProgressColor) var(--percent),
    var(--chartColor) var(--percent)
  );
  // background: conic-gradient(deeppink 0 30%, yellowgreen 0 70%, red 0 80%, teal 0 100%);
  // 实现环形图
  &::after {
    // 获取template中声明的变量
    content: attr(data-percent);
    background: #fff;
    width: calc(200px - var(--progressWidth));
    height: calc(200px - var(--progressWidth));
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
  }
}

4vue3样式

<div
class="circular1"
:style="style"
:data-percent="data.percent"
></div>