Echarts双环饼状图

Echarts双环饼状图
Echarts官网：https://www.echartsjs.com/examples/zh/index.html

<template>
  <div :id="id" :style="chartSize" ref="chart"></div>
</template>
<script>
// eslint-disable-next-line
/* eslint-disable */
import echarts from "echarts";
export default {
  name: "hzyhChart",
  props: {
    className: {
      type: String,
      default: "chart"
    },
    id: {
      type: String
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "400px"
    },
     tzhyList:{
    },
    
  },
  data() {
      
    return {
      chartSize: {},
    };
  },
  created() {
    this.chartSize = {
      width: this.width,
      height: this.height
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
    //   this.chart = echarts.init(document.getElementById(this.id));
      this.chart = echarts.init(this.$refs.chart);
      let option = {
          tooltip: {
              trigger: 'item',
              formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          legend: {
              orient: 'vertical', //horizontal 
              // backgroundColor:'#fff',
              color: '#fff',
              //bottom: '0%',
              x: 'right',
              data: ['data1', 'data2', 'data3']
          },
          series: [
              //内圈
              {
                  name: '单位数',
                  type: 'pie',
                  roseType: 'area', //area比例缩放 ，radius
                  radius: ['20%', '40%'],
                  center: ['50%', '55%'], //位置
                  color: [ '#078686', '#00d0d0', '#034079', '#6f81da', '#00ffb4'],
                  avoidLabelOverlap: false,
                  label: {
                      normal: {
                          show: true,
                          position: 'inner', //center 
                          formatter: '{d}%', //{d} 
                          textStyle: {
                              color: '#fff',
                              fontWeight: 'bold',
                              fontSize: 14
                          }
                      },
                      emphasis: {
                          show: true,
                          textStyle: {
                              fontSize: '30',
                              fontWeight: 'bold'
                          }
                      }
                  },
                  labelLine: {
                      normal: {
                          show: false
                      }
                  },

                  data: [{
                      value: 11100,
                      name: '物业服务'
                  }, {
                      value: 2220,
                      name: '机关团体'
                  }, {
                      value: 3303,
                      name: '事业单位'
                  }, {
                      value: 4404,
                      name: '企业单位'
                  }]
              }, //外圈
              {
                  name: '人员数',
                  type: 'pie',
                  radius: ['50%', '80%'], 
                  avoidLabelOverlap: false,
                  label: {
                      normal: {
                          show: true,
                          position: 'inner', //center  
                          formatter: function(param) {
                              return param.name + ':\n' + Math.round(param.percent) + '%';
                          },
                          textStyle: {
                              color: '#fff',
                              fontWeight: 'bold',
                              fontSize: 14
                          }
                      },

                      emphasis: {
                          show: false,
                      }
                  },
                  labelLine: {
                      normal: {
                          smooth: true,
                          lineStyle: {
                              width: 2
                          }
                      }
                  },
                  itemStyle: {
                      normal: {
                          shadowBlur: 30,
                          shadowColor: 'rgba(0, 0, 0, 0.4)'
                      }
                  },

                  data: [{
                      value: 21321,
                      name: '物业服务'
                  }, {
                      value: 1212,
                      name: '机关团体'
                  }, {
                      value: 121,
                      name: '事业单位'
                  }, {
                      value: 1212,
                      name: '企业单位'
                  }]
              }
              
          ]
      };
      this.chart.setOption(option);
    }
  }
};
</script>
<style scoped>
div {
  margin: 0 auto;
}
</style>