echarts饼图显示为环形图，以及将某一项的数值显示在环形正中央

1、效果：

实现关键： radius: [‘30%’, ‘45%’], // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 45% 长度。
30%为内圈大小，45%为外圈，中间15%就是环形图大小
该配置项是写在series:[{radius: [‘30%’, ‘45%’]}]里

2、

<div class="card1" id="pie" style="width: 150px; height: 150px"></div>

pieChart() {
      let myChart = this.$echarts.init(document.getElementById("pie"));
      myChart.setOption({
        series: [
          {
            name: "品级比例",
            type: "pie", // 设置图表类型为饼图
            hoverAnimation: false,//关闭鼠标放上去时的动画效果
            radius: ["80%", "90%"], // 环形图的关键。90%为外半径，80%为内半径，中间10%即环形的宽度
            //center: ['50%', '50%'], //调整饼图位置
            data: [
              {
                name: "已使用",
                value: 6,
                label: { show: true, fontSize: "18", fontWeight: "bold" },//单独显示某一项值的关键
              },
              { name: "未使用", value: 2 },
            ],
            itemStyle: {
              //图形样式设置
              normal: {
                color: function (params) {
                  //自定义饼图各板块颜色
                  var colorList = ["#2D84FB", "#cccccc"];
                  return colorList[params.dataIndex];
                },
              },
            },
            label: {
              //文本样式
              normal: {
                textStyle: {
                  fontSize: 12, // 改变标示文字的大小
                  color: "#2D84FB",
                },
                formatter: "{d}% \r\n {b}", //提示文本内容 d代表百分比，b代表name文本
                position: "center",//控制文字显示的位置，center居中显示
                show: false,//由于要单独显示（已使用）的数值，所以得先隐藏label
              },
            },
          },
        ],
      });
      window.addEventListener("resize", () => {
        if (myChart) {
          myChart.resize();
        }
      });
    },

总结：
1、radius: [“80%”, “90%”] 实现环形图;
2、label{show:false} 隐藏label显示;
3、在data里的某一项添加label:{show:true},即 {name: “已使用”, value: 6, label: { show: true, fontSize: “18”, fontWeight: “bold” } },
以上就是效果图二的实现方法