vue遍历环形进度条渐变颜色，轮播效果

<el-carousel :interval="5000" arrow="never" class="mt-20" height="200px">
       <el-carousel-item v-for="(group, groupIndex) in chunkedProgressList" :key="groupIndex">
       <el-row :gutter="20">
           <el-col v-for="(item, index) in group" :key="index" :span="8">
           <div class="custom-progress">
               <!-- 为每个进度条定义独立的渐变 -->
               <svg width="0" height="0" style="position: absolute;">
               <defs>
                   <linearGradient :id="`progressGradient${groupIndex}${index}`" x1="0%" y1="0%" x2="100%" y2="0%">
                   <stop offset="0%" :stop-color="item.gradient[0]" />
                   <stop offset="50%" :stop-color="item.gradient[1]" />
                   <stop offset="100%" :stop-color="item.gradient[2]" />
                   </linearGradient>
               </defs>
               </svg>
               <el-progress 
               type="circle" 
               :percentage="item.progress" 
               :show-text="false"
               :color="`url(#progressGradient${groupIndex}${index})`"
               >
               </el-progress>
               <div class="pernum" :style="{ color: item.textColor }">{{ item.progress }}%</div>
               <div class="text-center">{{ item.workOrderId }}</div>
           </div>
           </el-col>
       </el-row>
       </el-carousel-item>
   </el-carousel>

progressList: [
                {
                    workOrderId: "工单编号01",
                    progress: 25,
                    textColor: '#6a11cb', // 文字颜色
                    gradient: ["#6a11cb", "#2575fc", "#8e2de2"]//渐变颜色
                },
                {
                    workOrderId: "工单编号02",
                    progress: 50,
                    textColor: '#00ff9d', // 文字颜色
                    gradient: ["#4facfe", "#00f2fe", "#00ff9d"]
                },
                {
                    workOrderId: "工单编号03",
                    progress: 75,
                    textColor: '#ff758c', // 文字颜色
                    gradient: ["#ff758c", "#ff7eb3", "#ff8e53"]
                },
                {
                    workOrderId: "工单编号04",
                    progress: 62,
                    textColor: '#6a11cb', // 文字颜色
                    gradient: ["#6a11cb", "#2575fc", "#8e2de2"]
                },
            ]

 computed: {
    chunkedProgressList() {
        const chunkSize = 3;
        const result = [];
        for (let i = 0; i < this.progressList.length; i += chunkSize) {
            result.push(this.progressList.slice(i, i + chunkSize));
        }
        return result;
        }
    },

  .defs-only {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    }

    .custom-progress {
    position: relative;
    margin-bottom: 10px;
    }
    .pernum{
        position: absolute;
        top: 25%;
        font-size: 30px;
        left: 27%;
    }
 

    /* 统一设置轨道颜色 */
    .el-progress-circle__track {
        stroke: #0d2d3b;;
    }