echarts的简易饼图

最近有个产品需求要实现饼图的效果，如下图所示：

 

下面是实现过程

   <div style="height: 25vh">
      <pie style="width: 15vw; height: 100%" :pieData="pieData"></pie>
  </div>

data(){
    return{
      pieData: [
        {
          value: 45,
          name: "医师",
        },
        {
          value: 25,
          name: "护师",
        },
        {
          value: 15,
          name: "技师",
        },
        {
          value: 8,
          name: "药师",
        },
      ],
  }
}

<template>
  <div class="echart" ref="mychart" :style="myChartStyle"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "gauge",
  props: {
    pieData: {
      type: [Array, Object],
    },
  },
  data() {
    return {
      myChartStyle: { float: "center", width: "auto", height: "100%" },
    };
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      const option = {
        tooltip: {
          show: true,
          trigger: "item",
          textStyle: {
            fontSize: 12,
          },
        },
//图例文字的调整
        legend: {
          x: "-2%",
          y: "74%",
          data: ["医师", "护师", "技师", "药师"],
          icon: "circle",
//自定义图例前面的的形状，宽高
          itemWidth: 10,
          itemHeight: 10,
        },
//图表的整体布局
        grid: {
          containLabel: true,
          left: "0",
          right: "0",
          top: "0",
          bottom: "0",
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: "70%",  //饼图的大小
            center: ["30%", "36%"],  //位置
            clockwise: false,
            data: this.pieData,
            labelLine: {
              normal: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                borderWidth: 1,   //白色分割线
                borderColor: "#ffffff",
                label: {
                  show: false,
                },
                labelLine: {  
                  show: true,
                },
              },
            },
          },
        ],
        color: ["#4ecb73", "#36cbcb", "#3aa0ff", "#fad337"],
        backgroundColor: "#fff",
      };
      let myChart = echarts.init(this.$refs.mychart);
      option && myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>

<style scoped></style>