ECharts使用问题记录--legend图例样式问题

使用饼图时，设置图例，由于图例中包含的文字数量不同，想要设置统一标准的文字块，代码如下

this.pieOptions = {
        legend: {
          left: "center",
          top: "bottom",
          formatter: name => {
            const textContent = _this.userAge.find(item => {
              return item.name == name;
            });
            return [
              `{textWidth|${textContent.name} ${textContent.value + "%"}}`,
            ].join("");
          },
          icon: "circle",
          itemWidth: 10 // 设置了icon图标的大小
        },
        textStyle: {
          rich: {
            textWidth: {
              color: "#fff",
              fontSize: 12,
              width: 50
            },
          }
        },

这样设置后，width属性并没有生效。
修改为一下代码后，width属性生效

this.pieOptions = {
        legend: {
          left: "center",
          top: "bottom",
          formatter: name => {
            const textContent = _this.userAge.find(item => {
              return item.name == name;
            });
            return [
              `{textWidth|${textContent.name}}`,
              `{textValue|${textContent.value + "%"}}`
            ].join("");
          },
          icon: "circle",
          itemWidth: 10 // 设置了icon图标的大小
        },
        textStyle: {
          rich: {
            textWidth: {
              color: "#fff",
              fontSize: 12,
              width: 50
            },
            textValue: {
              color: "#fff",
              fontSize: 12,
              width: 50,
              align: "right"
            }
          }
        },

虽然问题解决了，但是不理解为啥，希望有大佬能解答一下疑惑