echarts中如何使用饼图

echarts对饼图的封装

<template>
  <div class="pie" :style="{ border: `1px dashed ${color}` }" :id="`${id}main`"></div>
</template>
  
  <script>
import * as echarts from "echarts";
export default {
  name: "App",
  props: {
    color: {
      require: true,
      type: String,
    },
    number: {
      require: true,
      type: Number,
    },
    textbox: {
      require: true,
      type: String,
    },
    id: {
      require: true,
      type: Number,
    },
  },
  created() {},
  mounted() {
    var myChart = echarts.init(document.getElementById(`${this.id}main`));

    window.addEventListener('resize', function () {
          // 让我们的图表调用 resize这个方法，进行一个适配适配
          myChart.resize();
        });
    myChart.setOption({
 //圆环里面标题的一个配置
      title: [
        {
          text: this.number,
          subtext: this.textbox,
          subtextStyle: {
            color: '#fff',
            fontSize: 9,
          },
          textAlign: "center",
          left: "49%",
          top: "25%",
          textStyle: {
            color: this.color,
            fontSize: 9,
          },
        },
      ],
 //多个圆环进行的一个嵌套
      series: [
        {
      
          type: "pie",
          radius: ["76%", "77%"],
          labelLine: {
            show: false,
          },
          emphasis: {
            disabled: true,
          },
          itemStyle: {
            color: this.color,
          },
          data: [
            {
              value: 100,
            },
          ],
        },
        {
   
          type: "pie",
          zlevel: 1,
          //起始角度
          startAngle: -90,
          radius: ["67%", "80%"],
          avoidLabelOverlap: false,

          labelLine: {
            show: false,
          },
          emphasis: {
            disabled: true,
          },
          data: [
            {
              value: 500,
              itemStyle: {
                color: this.color,
              },
              label: {
                show: false,
              },
            },
            {
              name: "",
              label: {
                show: false,
              },
              itemStyle: {
                color: "rgba(0,0,0,0)",
              },
              value: 500,
            },
          ],
        },
      ],
    });
  },
  methods: {},
};
</script>
  
  <style scoped>
.pie {
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
  border: 1px dashed red;
  color: aliceblue;
}
</style>