环形

如图

1651734429(1).png

init() {
      let num = '177'

      let option = {
        title: [
          {
            text: '',
            left: 'center',
            top: 24,
            textStyle: {
              fontSize: 16,
              fontWight: '400',
              color: '#fff'
            }
          },
          {
            text: this.count,
            left: 'center',
            top: '39%',
            textStyle: {
              fontSize: 30,
              fontWight: '600',
              color: '#fff'
            }
          }
        ],
        animation: true,
        series: [
          {
            type: 'gauge', // 仪表盘图
            startAngle: 90,
            endAngle: -270,
            min: 0,
            max: 1,
            radius: '80%',
            center: ['50%', '46%'],
            progress: {
              // 进度环
              // roundCap: 'true',
              show: true,
              width: 14,
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      //进度环的渐变色
                      offset: 0,
                      color: this.colors[0] // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: this.colors[1] // 100% 处的颜色
                    }
                  ]
                }
              }
            },
            axisLine: {
              // 背景环
              roundCap: 'true',
              lineStyle: {
                width: 14,
                color: [
                  [0, this.colors[0]],
                  [1, this.colors[1]]
                ]
              }
            },
            pointer: { show: false },
            axisTick: { show: false },
            splitLine: { show: false },
            axisLabel: { show: false },
            detail: { show: false },
            data: [
              {
                value: 1 // 进度值，最高为1
              }
            ]
          },
          {
            type: 'pie',
            radius: ['55%', '56%'],
            center: ['50%', '46%'],
            hoverAnimation: false,
            clockWise: false,
            itemStyle: {
              normal: {}
            },
            label: {
              show: false
            },
            data: this.dashed()
          }
        ]
      }
      this.chart.setOption(option)
    }

dashed() {
      let dataArr = []
      for (var i = 0; i < 100; i++) {
        if (i % 2 === 0) {
          dataArr.push({
            name: (i + 1).toString(),
            value: 20,
            itemStyle: {
              normal: {
                color: 'rgb(0,255,255,.3)'
              }
            }
          })
        } else {
          dataArr.push({
            name: (i + 1).toString(),
            value: 20,
            itemStyle: {
              normal: {
                color: 'rgb(0,0,0,0)',
                borderWidth: 1,
                // borderColor: 'rgba(0,255,255,1)',

                borderColor: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      //进度环的渐变色
                      offset: 0,
                      color: this.colors[0] // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: this.colors[1] // 100% 处的颜色
                    }
                  ]
                }
              }
            }
          })
        }
      }
      return dataArr
    },

  props: {
    count: {
      type: Number,
      default: 0
    },
    title: {
      type: String,
      default: ''
    },
    colors: {// ['#53EEF0', '#07A2F9'],
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    count() {
      this.init()
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.chart = echarts.init(this.$refs.chart)
      this.init()
    })
  },