使用方法添加分割的环形图，记录原因（不使用方法的会依赖背景色，背景框透明情况下会出现问题）

首先来看效果图：

代码如下：

<template>
  <div id="yiCdzEcharts" style="width: 130px; height: 230px;"></div>
</template>

<script>
export default {
  props: ["echartsData"],
  data() {
    return {
      pieData: [],
    };
  },
  mounted() {
    this.myecharts();
    this.WidthAdaptive();
  },
  watch: {
    echartsData(n, o) {
      this.myecharts();
    },
  },
  methods: {
    WidthAdaptive(res) {
      var windth = window.screen.width;

      let fontSize = windth / 1920;
      return fontSize * res;
    },
    myecharts() {
      let myChart = this.$echarts.init(document.getElementById("yiCdzEcharts"));
      myChart.clear();

      // mock 数据
      const dataArray = [
        {
          name: "监控类",
          value: 10,
        },
        {
          name: "楼宇自控",
          value: 15,
        },
        {
          name: "空调类",
          value: 12,
        },
        {
          name: "消防类",
          value: 8,
        },
        {
          name: "其他",
          value: 14,
        },
      ];

      // 计算总数
      const list = [];
      let total = dataArray.reduce((p, v) => {
        list.push(v.value);
        return p + v.value;
      }, 0);

      const color = ["#165DFF", "#45A2FF", "#8CBFF9", "#FAF252", "#FFAD0E"];

      var labelshow = true;
      var centerimg = true;
      var lineshow = false;
      let color1 = [];
      // 设置每层圆环颜色和添加间隔的透明色
      color.forEach((item) => {
        color1.push(item, "transparent");
      });
      let data1 = [];
      let sum = 0;
      // 根据总值设置间隔值大小
      dataArray.forEach((item) => {
        sum += Number(item.value);
      });

      //图表数据
      const countOccurences = (arr, value) =>
        arr.reduce((a, v) => (v === value ? a + 1 : a + 0), 0);
      const nums = countOccurences(list, 0);

      // 给每个数据后添加特定的透明的数据形成间隔
      if (nums < 1) {
        dataArray.forEach((item, index) => {
          if (item.value !== 0) {
            data1.push(item, {
              name: "",
              value: sum / 90,
              labelLine: {
                show: false,
                lineStyle: {
                  color: "transparent",
                },
              },
              itemStyle: {
                color: "transparent",
              },
            });
          } else if (item.value == 0) {
            data1.push(item);
          }
        });
      } else {
        dataArray.forEach((item, index) => {
          data1.push(item);
        });
      }

      //title
      const title = {
        text: "{a|" + total + "}\n{b|设备总数}",
        top: "50%",
        left: "32.5%",
        textStyle: {
          fontSize: this.WidthAdaptive(14),
          color: "#C9E5FF",
          fontFamily: "OPPOSans",
          fontWeight: "500",
          lineHeight: this.WidthAdaptive(20),
          rich: {
            a: {
              fontColor: "#3BCEFF",
              fontSize: this.WidthAdaptive(24),
              fontFamily: "Alimama ShuHeiTi",
              fontWeight: "normal",
              align: "center",
            },
            b: {
              fontSize: this.WidthAdaptive(12),
              fontColor: "#C9E5FF",
              fontFamily: "Source Han Sans CN",
              align: "center",
            },
          },
        },
      };

      const graphic = {
        elements: [
          {
            type: "image",
            style: {
              image: require("../img/pie.png"),
              width: this.WidthAdaptive(74),
              height: this.WidthAdaptive(74),
            },
            top: "44%",
            left: "27%",
            silent: true,
          },
        ],
      };

      // series itemStyle
      const items = {
        normal: {
          color: (params) => {
            if (params.data.name == dataArray[0].name) {
              return color[0];
            } else if (params.data.name == dataArray[1].name) {
              return color[1];
            } else if (params.data.name == dataArray[2].name) {
              return color[2];
            } else {
              return color1[params.dataIndex];
            }
          },
        },
      };

      // series
      const series = [
        {
          type: "pie",
          radius: ["64%", "75%"],
          center: ["55%", "60%"],
          hoverAnimation: false,
          itemStyle: items,
          label: {
            show: false,
          },
          data: data1,
        },
      ];

      // 渲染
      var option = {
        title,
        graphic,
        series,
        color,
      };
      myChart.setOption(option, true);

      window.onresize = myChart.resize;
    },
  },
};
</script>

<style scoped></style>