为什么ECharts中Markpoint标题在数字末尾时verticalAlign失效？

Question

在使用echarts5.0以上版本自定义Markpoint标注时，当标题包含数字并且正好是第一行的末尾，verticalAlign: "middle" 设置不生效，文本依然无法垂直居中

 markPoint: {
        ...
        symbolSize: [178, 62],
        symbolKeepAspect: true,
        label: {
          position: "inside", // 设置 label 位置为内部
          distance: 0, // 设置 label 与图形的距离
          verticalAlign: "middle",
          show: true,
          lineHeight: 21,
          rich: {
            a: {
               color: "#000",
              fontSize: phone ? "12" : "14",
              baseline: 'middle', // 强制基线对齐
              verticalAlign: 'middle'
            }
          },
          formatter: function(val) {
            let name = getLittleName(val.data.value);
            return "{a|"+getNewline(name)+"}";
          },
        },
        data: markPointData
      }

Answer 1

通过设置 baseline 属性为 'middle' 来强制文本基线对齐
试试这种方法

markPoint: {
    ...
    label: {
        ...
        rich: {
            a: {
                color: "#000",
                fontSize: phone ? "12" : "14",
                baseline: 'middle', // 强制基线对齐
                verticalAlign: 'middle'
            }
        },
        ...
    },
    ...
}