element ui 环形进度条修改，自定义随机颜色

<!--进度条组件-->
<template>
  <div class="circular_progress_box">
    <div class="circular_progress_item" v-for="(item, index) in circularProgress" :key="index">
      <div class="circular_progress_title">{{item.title}}</div>
      <div class="circular_progress">
        <el-progress
          type="circle"
          :color="colorCut"
          :show-text="false"
          :width=90
          :percentage="(item.number/10)">
        </el-progress>
        <div class="circleCenter">
          <div>{{ item.number }}</div>
          <div>占比{{(item.number)/10}}%</div>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
// import * as echarts from 'echarts';
export default {
    props: {
      circularProgress: {
         type: Array,
         default:() => []
    }
},
  computed: {
    colorCut(){
     return 'rgb('+Math.round(Math.random()*255)+','+Math.round(Math.random()*255)+','+Math.round(Math.random()*255)+')';
    }
  },
}
</script>
<style scoped>
.circular_progress_box{
  height: 2.5rem;
  display: flex;
  justify-content: space-evenly;
}
.circular_progress_item{
  height: 100%;
  position: relative;
  /*margin-right: 10px;*/
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}
.circleCenter {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 1.3rem;
  left: 0;
  font-size: 0.15rem;
  color: #808080;
}
.circleCenter div:first-child{
  font-size: 0.2rem;
  color: #ffffff;
}

.center {
  position: absolute;
  width: 50%;
  height: 80%;
  box-shadow: 1px 2px 10px 0 rgba(6, 25, 52, 0.9);
  border-radius: 10px;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}
.el-progress /deep/ path:first-child {
  stroke: rgba(114, 119, 124, 0.4);
}

.el-progress__text{
  color:#ffffff !important;
}
</style>