[JavaScript知识库]echarts双环渐变饼图

        <div id="circleEchart" ref="circleEchart" style="margin:0 auto;width:420px;height:400px;"></div>
 // 超标率
    initMyCircle() {
      let myChart = this.$echarts.init(this.$refs.circleEchart)
      myChart.setOption(this.optionMyCircle)
    },

使用计算属性设置配置项

   computed: {
    // 超标率
    optionMyCircle() {
      let option = {
        title: {
          text: this.cbl,
          x: 'center',
          y: 'center',
          textStyle: {
            fontSize: 36,
            color: '#fff',
          },
        },
        series: [
          {
            type: 'pie',
            radius: [0, '45%'],
            center: ['50%', '50%'],
            label: {
              position: 'inner',
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: 1,
              },
            ],
            itemStyle: {
              normal: {
                color: this.colorStart,
              },
            },
          },
          {
            type: 'pie',
            radius: ['45%', '70%'],
            center: ['50%', '50%'],
            itemStyle: {
              normal: {
                color: this.colorEnd,
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: 1,
              },
            ],
          },
        ],
      }
      return option
    },
  },

methods中方法

 getOStandardRate() {
      let searchParam = JSON.parse(JSON.stringify(this.searchParam))
      // console.log(searchParam,'报错');
    
      const fd = new FormData()
      fd.append('searchParam', JSON.stringify(this.timeFormat14pm(searchParam)))

      getOStandardRate(fd).then(res => {
        //避免接口数据为0时 显示绿色
        this.colorStart = new this.$echarts.graphic.RadialGradient(0, 0, 1, [
          {
            offset: 0,
            color: '#dc7e0f',
          },
          {
            offset: 1,
            color: '#ff9e2e',
          },
        ])
        this.colorEnd = new this.$echarts.graphic.RadialGradient(0, 0, 1, [
          {
            offset: 0,
            color: '#ff9e2e',
          },
          {
            offset: 1,
            color: '#dc7e0f',
          },
        ])
        if (res.data.success) {
          //真数据有问题 涛哥现改为假数据
          if (searchParam.hasOwnProperty('org')) {
            this.cbl = '0.03%' 
          }
          this.$nextTick(() => {
            // 超标率
            this.initMyCircle()
          })
        }
      })
    },