echart label右侧显示数值

新需求是在环状图的图例右边要出现相应的值

我查了一些资料文献之后，发现可以实现

代码如下

const option = {
    title: [
      {
        text: "类型占比分析",
        textStyle: {
          fontSize: 16,
          color: "black",
        },
        left: "2%",
      },
      {
        text: "项目总量",
        subtext: projectNum + "个",
        textStyle: {
          fontSize: 20,
          color: "black",
        },
        subtextStyle: {
          fontSize: 20,
          color: "black",
        },
        textAlign: "center",
        x: "34.5%",
        y: "44%",
      },
    ],
    tooltip: {
      trigger: "item",
      formatter: "{b}: {c}宗({d}%)",
    },
    legend: {
      type: "scroll",
      orient: "vertical",
      left: "75%",
      align: "left",
      top: "middle",
      textStyle: {
        color: "#8C8C8C",
      },
      height: 250,
      itemGap: 30,

      formatter: function (name) {
        // 遍历数据，找到对应图例项的数值
        for (var i = 0; i < typeList.length; i++) {
          if (typeList[i].name === name) {
            return name + " " + typeList[i].value + "种"; // 返回名称和数值的字符串
          }
        }
        return name; // 如果没有找到，则只返回名称（理论上这种情况不会发生，除非数据有误）
      },
    },

    series: {
      name: "标题",
      type: "pie",
      center: ["35%", "50%"],
      radius: ["40%", "65%"],
      clockwise: true, //饼图的扇区是否是顺时针排布
      avoidLabelOverlap: false,

      labelLine: {
        normal: {
          length: 5,
          length2: 3,
          smooth: true,
        },
      },
      data: typeList,
    },
  };

关键点在于对legend进行修改

效果如下