半環形進度條(vue+element)

<template>
  <div class="elCircle-progress">
    <el-progress
      class="progress-position"
      type="dashboard"
      :percentage="percentage"
      :color="colors"
    ></el-progress>
    <div :style="{'color':fontColor}" class="chaoji-po">{{describePer}}</div>
    <div>
      <el-button-group>
        <el-button type="success" icon="el-icon-minus" @click="decrease"></el-button>
        <el-button type="warning" icon="el-icon-plus" @click="increase"></el-button>
      </el-button-group>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      percentage: 10,
      colors: [
        { color: "#f56c6c", percentage: 20 },
        { color: "#e6a23c", percentage: 40 },
        { color: "#5cb87a", percentage: 60 },
        { color: "#1989fa", percentage: 80 },
        { color: "#6f7ad3", percentage: 100 }
      ],
      fontColor: "",
      describePer:'',
    };
  },
  mounted(){
    this.checkColor();
  },
  methods: {
    increase() {
      this.percentage += 10;
      if (this.percentage > 100) {
        this.percentage = 100;
      }
      this.checkColor();
    },
    checkColor(){
      if (this.percentage <= 100) {
        this.fontColor = "#6f7ad3";
        $('.el-progress__text').css('color','#6f7ad3');
        this.describePer = '超級棒';
      }
      if (this.percentage < 80) {
        this.fontColor = "#1989fa";
        $('.el-progress__text').css('color','#1989fa');
        this.describePer = '很棒';
      }
      if (this.percentage < 60) {
        this.fontColor = "#5cb87a";
        $('.el-progress__text').css('color','#5cb87a');
        this.describePer = '一般';
      }
      if (this.percentage < 40) {
        this.fontColor = "#e6a23c";
        $('.el-progress__text').css('color','#e6a23c');
        this.describePer = '差';
      }
      if (this.percentage <= 20) {
        this.fontColor = "#f56c6c";
        $('.el-progress__text').css('color','#f56c6c');
        this.describePer = '很差';
      }
      if (this.percentage <= 10) {
        this.fontColor = "red";
        $('.el-progress__text').css('color','red');
        this.describePer = '非常差';
      }
    },
    decrease() {
      this.percentage -= 10;
      if (this.percentage < 0) {
        this.percentage = 0;
      }
      this.checkColor();
    }
  }
};
</script>

<style lang="less">
.elCircle-progress {
  .el-progress--circle .el-progress__text,
  .el-progress--dashboard .el-progress__text {
    font-size: 30px !important;
    top: 40%;
  }
}
</style>
<style lang="less">
.elCircle-progress {
  .progress-position {
    margin: 200px 0 20px 0;
    position: relative;
  }
  .chaoji-po {
    position: relative;
    top: -70px;
    left: 0;
    color: red;
  }
}
</style>