echarts圆环图

 <div id="chart-container" style="width: 100%;height: 25vh"></div>


 loadChart() {
      var dom = document.getElementById("chart-container");
      let eChartsType = echarts.init(dom);

      var datas =this.getConSumRatioObj.priceData
      this.totals =  this.getConSumRatioObj.totalPrice
      var duleDatas = this.dulePieData( datas,this.color)

      var color = this.color
      var legendData = Object.keys(datas).map(function (index) {
        return {
          name: datas[index].name,
          textStyle: { color: color[index],fontSize:0.18+'rem' }
        };
      });
      let option = {
        color: this.color,
        legend: {
          orient: 'vertical',
          top: '22%',
          left: "55%",
          icon: 'rect',
          itemGap: 15,
          itemWidth: 10,
          itemHeight: 10,
          data: legendData,
          formatter: this.formatter,
          selectedMode: false,
          triggerEvent: true,
          textStyle: {
            rich: {
              a: {
                color: '#d5f0ff',
                width: 70,
                padding: [2, 10, 0, 0],

                fontSize:0.16+'rem'
              }
            }
          }
        },

        tooltip: {
          formatter: '{b} : {c}'
        },

        series: [
          {
            name: '',
            type: 'pie',
            top: '10%',
            left: '10%',
            radius: ['48%', '60%'],

            minAngle: 25,
            center: ['20%', '35%'],
            avoidLabelOverlap: false,
            label: {
                show: true,
                position: 'center',
                color:'#4c4a4a',
                formatter: '{total|' + this.totals +'}'+ '\n\r' + '{active|消费总额}',
                rich: {
                  total:{
                    // fontSize:15,
                    padding:[20,0,0,0],
                    fontSize: 0.282+"rem",
                    fontFamily : "微软雅黑",
                    color:'#d5f0ff'
                  },
                  active: {
                    fontFamily : "微软雅黑",
                    fontSize:  0.19+'rem',
                    // fontSize: 11,
                    color:'#A1B7C3',
                    lineHeight:30,
                  },
              },
              emphasis: {//中间文字显示
                show: true,
              }
            },
            emphasis: {
              scale: false,//鼠标划上不展示高亮放大效果
              label: {
                show: false,
              }
            },
            labelLine: {
              show: false
            },
            data:  this.getConSumRatioObj.priceData
          },
          {
            name: '',
            type: 'pie',
            top: '10%',
            left: '10%',
            radius: ['48%', '75%'],
            minAngle: 25,
            center: ['20%', '35%'],
            avoidLabelOverlap: false,

            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              scale: false,//鼠标划上不展示高亮放大效果
              label: {
                show: false,
              }
            },
            labelLine: {
              show: false
            },
            data: duleDatas

          },
        ]
      }
   
      option && eChartsType.setOption(option);
      window.addEventListener("resize", function () {
        eChartsType.resize();
      });
    },