option = {
  backgroundColor:'#030c2b',
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/> {b}: {c}",
    textStyle: {
      color: "#fff",
      fontStyle: "normal",
      fontFamily: "微软雅黑",
      fontSize: 17,
    },
  },
  series: [
    {
      type: "sunburst",
      name: "开发语言",
      radius: ["80%", "50%"],
      z: 2,
      data: [
        {
          name: "前端",
          value: 500,
          children: [
            {
              name: "vue",
              value: 200,
              children: [
                {
                  name: "vue3",
                  value: 100,
                },
              ],
            },
          ],
        },
        {
          name: "后端",
          value: 500,
          children: [
            {
              value: 500,
              name: "数据库",
              children: [{ name: "mysql", value: 400 }],
            },
          ],
        },
        {
          name: "产品经理",
          value: 500,
          children: [
            {
              value: 400,
              name: "思维导图",
              children: [
                {
                  name: "图一",
                  value: 200,
                },
              ],
            },
          ],
        },
      ],
      itemStyle: {
        borderWidth: 0,
        borderColor: "#030c2b",
      },
      label: {
        show: false,
        formatter: " {b} \n\n {c}",
      },
      levels: [
        {},
        {
          r0: "0",
          r: "40%",
          label: {
            show: true,
            rotate: 0,
            fontSize: 16,
            color: "#f1f1f1",
          },
          itemStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 1,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#81C2FF",
                },
                {
                  offset: 1,
                  color: "#3090EA",
                },
              ],
              global: false,
            },
            borderWidth: 5,
            borderColor: "#030c2b",
          },
        },
        {
          r0: "52%",
          r: "58%",
          itemStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 1,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#81C2FF", 
                },
                {
                  offset: 1,
                  color: "#3090EA", 
                },
              ],
              global: false,
            },
          },
        },
        {
          r0: "60%",
          r: "70%",
          itemStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 1,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#81C2FF", 
                },
                {
                  offset: 1,
                  color: "#3090EA", 
                },
              ],
              global: false, 
            },
          },
        },
      ],
    },
    {
      silent: true,
      type: "sunburst",
      z: 1,
      data: [
        {
          name: "vue",
          value: 500,
          children: [
            {
              value: 500,
              name: "",
              children: [
                {
                  value: 500,
                },
              ],
            },
          ],
        },
        {
          name: "数据库",
          value: 500,
          children: [
            {
              value: 500,
              name: "",
              children: [
                {
                  value: 500,
                },
              ],
            },
          ],
        },
        {
          name: "思维导图",
          value: 500,
          children: [
            {
              value: 500,
              name: "",
              children: [
                {
                  value: 500,
                },
              ],
            },
          ],
        },
      ],
      itemStyle: {
        borderWidth: 5,
        borderColor: "#030c2b",
      },
      label: {
        show: false,
      },
      levels: [
        {},
        {
          itemStyle: {
            color: "transparent",
          },
        },
        { r0: "52%", r: "59%", itemStyle: { color: "#33486C" } },
        {
          r0: "59%",
          r: "71%",
          itemStyle: {
            color: "#33486C",
          },
        },
      ],
    },
    {
      name: "",
      silent: true,
      type: "gauge",
      radius: "58%",
      center: ["50%", "50%"],
      z: 3,
      startAngle: 0,
      endAngle: 359.9,
      splitNumber: 24,
      hoverAnimation: true,
      axisTick: {
        show: false,
      },
      splitLine: {
        length: "26%",
        lineStyle: {
          width: 3,
          color: "#030c2b"
        },
      },
      axisLabel: {
        show: false,
      },
      pointer: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          opacity: 0,
        },
      },
      detail: {
        show: false,
      },
      data: [
        {
          value: 0,
          name: "",
        },
      ],
    },
  ],
}

点击运行 》