echarts 饼图中间的文字设置居中为什么没有居中

 // 饼图
    drawPieChart() {
      var that = this;
      if (this.echarts && this.echarts.length > 0) {
        var money = 0;
        this.echarts.forEach((item) => {
          if (item.invoiceType == "004") {
            that.invoiceTableData.push({
              value: parseFloat(item.invoiceAmount.replace("-", "")).toFixed(2),
              // name: "增值税专用发票(张)",
              name: "专       票",
              itemStyle: {
                color: "#1BE1B2",
              },
            });
          } else if (item.invoiceType == "007") {
            // 增值税普通发票
            that.invoiceTableData.push({
              value: parseFloat(item.invoiceAmount.replace("-", "")).toFixed(2),
              // name: "增值税普通发票(张)",
              name: "普       票",
              itemStyle: {
                color: "#F3B72A",
              },
            });
          } else if (item.invoiceType == "026") {
            // 增值税普通发票
            that.invoiceTableData.push({
              value: parseFloat(item.invoiceAmount.replace("-", "")).toFixed(2),
              // name: "增值税普通发票(张)",
              name: "电子普票",
              itemStyle: {
                color: "#0DD2E1",
              },
            });
          } else if (item.invoiceType == "028") {
            // 增值税普通发票
            that.invoiceTableData.push({
              value: parseFloat(item.invoiceAmount.replace("-", "")).toFixed(2),
              // name: "增值税普通发票(张)",
              name: "电子专票",
              itemStyle: {
                color: "#0D54F4",
              },
            });
          }
        });
        this.invoiceTableData.forEach((i) => {
          money +=  parseFloat(i.value);
        });
        
      } else {
        this.invoiceTableData = [
          { value: 335, name: "电子专票", isTrue: 1 },
          { value: 310, name: "专       票", isTrue: 1 },
          { value: 234, name: "电子普票", isTrue: 1 },
          { value: 135, name: "普       票", isTrue: 1 },
        ];
      }
      var _dataList = this.invoiceTableData;
      var echarts = require("echarts");

      var myChart = echarts.init(document.getElementById("echarts"));
      var totalMoney = 0,
        totalMoneyText = "";
      var l  = "0%";
       
      var ccc = money
      if (ccc > 0) {
        // console.log(ccc,"数字");
        totalMoney = ccc.toFixed(2);
        totalMoneyText = "总金额";
      } else {
        totalMoneyText = "";
        totalMoney = null;
      }

  //    var tmp = totalMoney.length ;
  //    console.log(bfb);

      myChart.setOption({
        tooltips: {
          trigger: "item",
          position: ["50%", "60%"],
        },
        title: {
          show: false,
        },
        legend: {
          orient: "vertical",
          icon: "circle",
          color: ["#0D54F4", "#1BE1B2", "#0DD2E1", "#F3B72A"],
          itemHeight: 10,
          left: "45%", //图例距离左的距离
          y: "15%",
          selectedMode: false,
          textStyle: {
            fontSize: 12,
            rich: {
              textColor: {
                color: "rgba(0,0,0,0.5)",
                opactiy: 0.5,
                fontFamily: "PingFangSC-Light, PingFang SC",
                // fontSize: 12,
              },
              moneyColor: {
                color: "rgba(0, 0, 0, 0.8)",
                fontFamily: "ARMOUREx-Bold, ARMOUREx",
                fontWeight: 700,
              },
            },
          },
          formatter: function (name) {
            var res = "";
            var html;
            _dataList.forEach((item) => {
              if (item.name == name) {
                res = that.thousandBitSeparator(item.value);
                if (item.name == "专       票") {
                  if (item.isTrue == 1) {
                    html = `{textColor|${name + "    "}}`;
                  } else {
                    html = `{textColor|${
                      name + "    "
                    }} |   {moneyColor|${res}}`;
                  }
                } else if (item.name == "普       票") {
                  if (item.isTrue == 1) {
                    html = `{textColor|${name + "    "}}`;
                  } else {
                    html = `{textColor|${
                      name + "    "
                    }} |   {moneyColor|${res}}`;
                  }
                } else if (item.name == "电子专票") {
                  if (item.isTrue == 1) {
                    html = `{textColor|${name + "    "}}`;
                  } else {
                    html = `{textColor|${
                      name + "    "
                    }} |   {moneyColor|${res}}`;
                  }
                } else if (item.name == "电子普票") {
                  if (item.isTrue == 1) {
                    html = `{textColor|${name + "    "}}`;
                  } else {
                    html = `{textColor|${
                      name + "    "
                    }} |   {moneyColor|${res}}`;
                  }
                }
              }
            });
            return html;
          },
        },
        graphic: [
          {
            //环形图中间添加文字
            type: "text", //通过不同top值可以设置上下显示
            left: "center",
            top: "32%",
            
            style: {
               text: totalMoney,
              textAlign: "center",
              fill: "#000", //文字的颜色
              width: 100,
              height: 30,
              fontSize: "14",
              color: "#4d4f5c",
              fontFamily: "Microsoft YaHei",
            },
          },
          {
            type: "text",
            left: "center",
            top: "48%",
            style: {
              text: totalMoneyText,
              textAlign: "center",
              fill: "#9D9D9D",
              width: 30,
              height: 30,
              fontSize: 12,
            },
          },
        ], //-------------环形中间添加文字
        series: [
          {
            type: "pie",
            radius: ["83%", "65%"],
            center: ["21%", "42%"],
            avoidLabelOverlap: true,
            hoverAnimation: true,
            label: {
              show: false,
              position: "center",
            },
            color: ["#0D54F4", "#1BE1B2", "#0DD2E1", "#F3B72A"],
            emphasis: {
              label: {
                show: false,
                fontSize: "14",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },

            data: _dataList,
          },
        ],
      });
     
 window.onresize = function () {

       myChart.resize()
 }
    },

其中这段代码不就是居中的吗为什么没有居中呢

  graphic: [
          {
            //环形图中间添加文字
            type: "text", //通过不同top值可以设置上下显示
            left: "center",
            top: "32%",
            
            style: {
               text: totalMoney,
              textAlign: "center",
              fill: "#000", //文字的颜色
              width: 100,
              height: 30,
              fontSize: "14",
              color: "#4d4f5c",
              fontFamily: "Microsoft YaHei",
            },
          },
          {
            type: "text",
            left: "center",
            top: "48%",
            style: {
              text: totalMoneyText,
              textAlign: "center",
              fill: "#9D9D9D",
              width: 30,
              height: 30,
              fontSize: 12,
            },
          },
        ], //-------------环形中间添加文字

想知道为什么没有居中，看了一下午还没解决

             //环形图中间添加文字
            type: "text", //通过不同top值可以设置上下显示
            left: "21%", // 这个值改成这个
            top: "32%",

有帮助望采纳！！