自定义环形电量图

<template>
  <div class="ring-data">
    <div class="loading">
      <div class="left" ref="left" :style="style"></div>
      <div class="right" ref="right" :style="style"></div>
      <div class="progress">{{ data.percentage }}%</div>
    </div>
    <div class="unit">{{ data.type }}</div>
    <div class="number" :style="textColor">{{ data.number }}</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      style: {
        '--bg-color': '#1c9fe5',
        '--left': `rotateZ(180deg)`,
        '--right': `rotateZ(180deg)`
      }
    }
  },
  props: {
    data: {
      type: Object,
      default () {
        return {}
      },
      require: true
    }
  },
  created: function () {
    this.changeStyle()
  },
  methods: {
    changeStyle () {
      // 改变环形比例
      if (this.data.percentage < 50) {
        this.style['--left'] = `rotateZ(${180 -
          (this.data.percentage / 100) * 180}deg)`
      } else if (this.data.percentage === 50) {
        this.style['--left'] = `rotateZ(0deg)`
      } else if (this.data.percentage < 100) {
        this.style['--left'] = `rotateZ(0deg)`
        this.style['--right'] = `rotateZ(${180 -
          ((this.data.percentage - 50) / 100) * 180}deg)`
      } else if (this.data.percentage === 100) {
        this.style['--left'] = `rotateZ(0deg)`
        this.style['--right'] = `rotateZ(0deg)`
      }
      // 改变环形颜色
      if (this.data.percentage <= 10) {
        this.style['--bg-color'] = '#F55C5C'
      } else if (this.data.percentage > 10 && this.data.percentage <= 45) {
        this.style['--bg-color'] = '#FF9352'
      } else if (this.data.percentage > 45 && this.data.percentage <= 70) {
        this.style['--bg-color'] = '#6985F2'
      } else {
        this.style['--bgColor'] = '#49D999'
      }
    }
  },
  computed: {
     textColor() {
       if (this.data.type === '审计企业') {
         return { color: '#1c9fe5' }
      } else if (this.data.type === '询证企业') {
         return { color: '#17bc29' }
       } else if (this.data.type === '两者') {
        return { color: '#f9d11d' }
       }
     }
  }
}
</script>

<style scoped lang="scss">
.ring-data {
  font-size: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;

  .loading {
    margin-top: 20px;
    // font-size: 10px;
  }

  .unit {
    margin-top: 30px;
    color: #606266;
    text-align: center;
  }

  .number {
    margin-top: 10px;
    font-size: 24px;
    font-weight: bold;
    color: #1c9fe5;
    text-align: center;
  }
}

.loading {
  // margin: 100px auto;
  width: 8em;
  height: 8em;
  position: relative;
}

.loading .progress {
  position: absolute;
  width: 6em;
  height: 6em;
  font-weight: bold;
  background-color: white;
  border-radius: 50%;
  left: 1em;
  top: 1em;
  line-height: 6em;
  text-align: center;
}

.left,
.right {
  width: 4em;
  height: 8em;
  overflow: hidden;
  position: relative;
  float: left;
  background-color: rgb(243, 241, 241);
}

.left {
  border-radius: 8em 0 0 8em;
}

.right {
  border-radius: 0 8em 8em 0;
}

.left:after,
.right:after {
  content: '';
  position: absolute;
  display: block;
  width: 4em;
  height: 8em;
  background-color: white;
  border-radius: 8em 0 0 8em;
  background-color: var(--bg-color);
}

.right:after {
  content: '';
  position: absolute;
  display: block;
  border-radius: 0 8em 8em 0;
}

.left:after {
  transform-origin: right center;
  // 0%-50%左侧
  transform: var(--left);
}

.right:after {
  transform-origin: left center;
  // 50%-100%右侧
  transform: var(--right);
}
</style>

效果如图：

但是uniapp的小程序暂未生效，考虑是css的var写法原因，暂未找到解决方法。