echarts/自定义 环形进度条，源码+图片 复制运行 自取

进度图1：

<!--
 * @FilePath: index.vue
 * @Author: 是十九呐
 * @Date: 2024-06-26 17:56:34
 * @LastEditTime: 2024-06-28 11:17:50
-->
<template>
  <div class="pieChartProgress-container">
    <div class="pieChartProgress-chart" :id="chartId"></div>
    <img v-for="(item, index) of 3" :key="index" class="img"
      :class="[index == 1 ? 'img2' : '', index == 2 ? 'img3' : '']"
      :style="{ 'width': `${width}%`, 'height': `${height}%`, 'left': `${left}%`, 'top': `${top}%`, ...imgOpacity }"
      :src="require(`@/assets/pieChartProgress/icon_pieChartProgress_${imgType}bg${index + 1}.png`)" />
  </div>
</template>

<script>
export default {
  data() {
    return {

    }
  },
  computed: {
    imgOpacity() {
      return { opacity: this.imgType == 'green' ? 0.4 : 1 }
    }
  },
  props: {
    chartId: {
      type: String,
      default: "pieChartProgress"
    },
    progressValue: {
      type: Number,
      default: 0
    },
    bgcolor: {
      type: String,
      default: "rgba(50, 90, 92,0.4)"
    },
    pgcolor1: {
      type: String,
      default: "rgba(20, 227, 229, 1)"
    },
    pgcolor2: {
      type: String,
      default: "rgba(50, 90, 92, 0)"
    },
    imgType: {
      type: String,
      default: "blue"
    },
    width: {
      type: Number,
      default: 79
    },
    height: {
      type: Number,
      default: 61.2
    },
    left: {
      type: Number,
      default: 12
    },
    top: {
      type: Number,
      default: 19.5
    }
  },
  mounted() {
    this.myEcharts()
  },
  methods: {
    myEcharts() {
      let myChart = this.$echarts.init(document.getElementById(`${this.chartId}`));
      const that = this;

      let option = {
        title: [
          {
            text: `${this.progressValue}%`,
            x: 'center',
            y: 'center',
            textStyle: {
              fontSize: 28,
              color: '#fff',
              fontFamily: 'DINAlternate-Bold, DINAlternate'
            },
          },
        ],
        polar: {
          radius: ['75%', '95%'],
          center: ['50%', '50%'],
        },
        angleAxis: {
          max: 100,
          show: false,
        },
        radiusAxis: {
          type: 'category',
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: '',
            type: 'bar',
            roundCap: true,
            barWidth: 30,
            showBackground: true,
            backgroundStyle: {
              color: this.bgcolor,
            },
            data: [this.progressValue],
            coordinateSystem: 'polar',
            itemStyle: {
              normal: {
                color: that.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: this.pgcolor1,
                  },
                  {
                    offset: 1,
                    color: this.pgcolor2,
                  },
                ]),
              },
            },
          },
        ],
      }
      myChart.setOption(option);
      window.addEventListener('resize', function () {
        myChart.resize();
      });

    }
  }
}
</script>

<style lang="scss" scope>
.pieChartProgress-container {
  width: 100%;
  height: 100%;
  position: relative;

  .pieChartProgress-chart {
    width: 100%;
    height: 100%;
  }

  .img {
    // width: 59%;
    // height: 46.2%;
    position: absolute;
    top: 27%;
    left: 20.8%;
    animation: rotate 7s linear infinite;
  }

  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  .img2 {
    animation: rotate-right-to-left 5s linear infinite;
    opacity: 0.5;
  }

  .img3 {
    animation: rotate-right-to-left 4s linear infinite;
    filter: brightness(1.3);
  }

  @keyframes rotate-right-to-left {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(-360deg);
    }
  }
}
</style>

         style这个地方 可以写计算属性 或者是用props接受的时候用Object => [String , Object] 这种方式接收

        用的时候👇 用的时候自己优化优化

<div>
          <pieChartProgress class="track-chart" chartId="progressSaleTaskCompletion2" :progressValue="57"
            bgcolor="rgba(54,222,193,0.4)" pgcolor1="rgba(54,222,193, 1)" pgcolor2="rgba(50, 90, 92, 0)"
            :width="pieProgressSize.width" :height="pieProgressSize.height" :left="pieProgressSize.left"
            :top="pieProgressSize.top" imgType="green">
          </pieChartProgress>
</div>

---

 进度图2： 

<template>
  <div class="rotating-circle">
    <div class="circle-img" />
    <div class="circle-img" />
    <div class="circle-img" />
    <div class="circle-text">
      <p class="title">{{ progress }}%</p>
      <p class="desc">进度</p>
    </div>
  </div>
</template>
<script>
export default {
  name: 'rotating-circle',
  props: {
    progress: {
      type: String
    }
  },
  data() {
    return {}
  }
}
</script>
<style lang="scss" scoped>
.rotating-circle {
  width: 100%;
  height: 100%;

  .circle-img {
    width: 180px;
    height: 180px;
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100% 100%;

    &:nth-child(1) {
      z-index: 1;
      background-image: url("~@/assets/economyoperationcontrolplatform/echorw8z5a_1631696624800_jzaj32sdn7.png");
      animation: rotate 5s linear infinite;
    }

    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    &:nth-child(2) {
      z-index: 2;
      background-image: url("~@/assets/economyoperationcontrolplatform/thl1477aj9_1631696858413_mzuotzvq0i.png");
      animation: rotate-right-to-left 5s linear infinite;
    }

    @keyframes rotate-right-to-left {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(-360deg);
      }
    }

    &:nth-child(3) {
      z-index: 3;
      background-image: url("~@/assets/economyoperationcontrolplatform/nvtbk6by7m_1631696227177_yy23creoen.png");
      filter: brightness(1.3);
    }
  }

  .circle-text {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    text-align: center;

    .title {
      width: 100%;
      font-family: "Title";
      font-size: 25px;
      z-index: 4;
    }

    .desc {
      width: 100%;
      font-size: 14px;
    }
  }
}
</style>

图片素材:

 

有问题留言......