echarts饼图中间插入文字、legend右边数字实现右对齐、legend左边插入自定义图片

实现效果如图：

 

饼图中间插入文字看series里面的label；插入图片和右对齐看legend：

let optionKindergarten = {
        tooltip: {//点击饼图显示的提示框
          extraCssText: "z-index:88",
          formatter: e => {//提示框文字格式
            return `${e.marker}${e.name.replace("数量", "")}<br>
                    人数：${e.data.value}<br>
                    占比：${e.data.peopleNum}`;
          }
        },
        title: {//标题
          text: this.chartTitle,//:幼儿园疫苗接种情况
          padding: [16, 0, 0, 0],
          textStyle: {
            fontSize: 14,
            color: "#687F96",
            fontWeight: 200
          }
        },
        legend: {//右边图例
          top: "32%",//距上
          right: "8%",//距右
          orient: "vertical",//纵向排列
          itemWidth: 13,//图片宽(针头)
          itemHeight: 13,//图片高
          itemGap: 10,//间隙
          data: [//给legend左边插入自定义图片,firstImg为变量要引入
            {
              name: "第一针",
              icon: "image://" + firstImg + ""
            },
            {
              name: "第二针",
              icon: "image://" + secondImg + ""
            },
            {
              name: "第三针",
              icon: "image://" + thirdImg + ""
            },
            {
              name: "未接种",
              icon: "image://" + forthImg + ""
            },
          ],
          textStyle: {
            color: "#687F96",
            rich: {
              name: {//legend左边的文字:第一针、第二针...
                fontSize: 10,
                padding: [3, 10, 0, 0]//1.左边的文字添加右边距10(可自己调整)
              },
              value: {//legend右边的值:10.09%、59.62%...
                fontSize:12,
                color: "#182F41",
                backgroundColor: "transparent",//2.右边的值添加背景色
                align: "right",//3.右对齐
                padding: [5, -100, 0, 0],//4.设置右边距为-100(-70/-80..可自己调整)
              }
            }
          },

          formatter(name) {//右边文本块的格式
            let value;
            let dataList = optionKindergarten.series[0].data;
            for (var i = 0; i < dataList.length; i++) {
              if (dataList[i].name == name) {
                value = dataList[i].peopleNum;
              }
            }
            var v = value;//一定要重新赋值
            return [`{name|${name}}` + `{value|${v}}`].join("");
          },
        color: ["#B5D8FF", "#6BB1FF", "#0F81FF", "#FF7D62"],
        series: [
          {
            type: "pie",
            radius: ["46%", "56%"], //大小半径
            center: ["25%", "56%"], //饼图横纵坐标
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 2
            },
            labelLine: {
              show: false
            },
            label: {//饼图中间插入文字
              show: true,
              position: "center",//居中
              formatter:
                "{value|" + this.nucleicAcidNum.toLocaleString() +"}" +
                "\n\r" +
                "{total|总人数}",
              rich: {
                value: {//value格式
                  fontSize: 20,
                  fontFamily: 'PingFangSC-Semibold, sans-serif',
                  color: "#182F41",
                  lineHeight: 40,
                  fontWeight: 600,
                  padding:[-2,0,0,0]

                },
                total: {//总人数格式
                  fontFamily: 'PingFangSC-Regular, sans-serif',
                  fontSize: 12,
                  color: "#7B8997",
                  lineHeight: 14
                }
              }
            },
            emphasis: {
              disabled: true//点击图例时是否关闭高亮效果
            },
            data: this.nucleicList
          }
        ]
       }