[Bug] Tooltip's item is not vertical center

[kkxxkk2019]

Version

lastest

Link to Minimal Reproduction

none

Steps to Reproduce

Since 1.13.0，tooltip 的内容项没有垂直居中

Current Behavior

Expected Behavior

垂直居中

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

[xile611]

方案一： 通过text实现，缺点是text和value 不支持不同的样式展示

const spec = {
  type: 'pie',
  width: 800,
  height: 500,
  background: 'pink',
  region: [
    {
      style: {
        fill: 'yellow',
        stroke: '#000',
        lineWidth: 1
      }
    }
  ],
  data: [
    {
      id: 'id0',
      values: [
        { type: 'This is a long Auto-Wrap Category Text for Category1', value: 24 },
        { type: 'This is a long Auto-Wrap Category Text for Category2', value: 20 },
        { type: 'This is a long Auto-Wrap Category Text for Category3', value: 18 },
        { type: 'This is a long Auto-Wrap Category Text for Category4', value: 18 },
        { type: 'This is a long Auto-Wrap Category Text for Category5', value: 16 },
        {
          type: 'This is a long Auto-Wrap Category Text for Category6. This is a long Auto-Wrap Category Text for Category6',
          value: 14
        },
        {
          type: 'This is a long Auto-Wrap Category Text for Category7. This is a long Auto-Wrap Category Text for Category7',
          value: 10
        },
        {
          type: 'This is a long Auto-Wrap Category Text for Category8. This is a long Auto-Wrap Category Text for Category8',
          value: 10
        },
        {
          type: 'This is a long Auto-Wrap Category Text for Category9. This is a long Auto-Wrap Category Text for Category9',
          value: 5
        },
        {
          type: 'This is a long Auto-Wrap Category Text for Category10. This is a long Auto-Wrap Category Text for Category10',
          value: 5
        },
        {
          type: 'This is a long Auto-Wrap Category Text for Category11. This is a long Auto-Wrap Category Text for Category11',
          value: 4
        },
        {
          type: 'This is a long Auto-Wrap Category Text for Category12. This is a long Auto-Wrap Category Text for Category12',
          value: 3
        },
        {
          type: 'This is a long Auto-Wrap Category Text for Category13. This is a long Auto-Wrap Category Text for Category13',
          value: 3
        },
        {
          type: 'This is a long Auto-Wrap Category Text for Category14. This is a long Auto-Wrap Category Text for Category14',
          value: 3
        }
      ]
    }
  ],
  outerRadius: 0.8,
  innerRadius: 0.5,
  padAngle: 0.6,
  valueField: 'value',
  categoryField: 'type',
  pie: {
    style: {
      cornerRadius: 10
    },
    state: {
      hover: {
        outerRadius: 0.85,
        stroke: '#000',
        lineWidth: 1
      },
      selected: {
        outerRadius: 0.85,
        stroke: '#000',
        lineWidth: 1
      }
    }
  },
  legends: {
    visible: true,
    item: {
      background: {
        visible: true,
        style: {
          fill: 'green'
        }
      }
    }
  },
  label: {
    visible: true,
    formatMethod: (label, data) => {
      return [
        data.type,
        `${data.value}%`
      ];
    },

    onAfterOverlapping: (labels, getRelatedGraphic, getRelatedPoint) => {
      labels.forEach(label => {
        const { text: originalText, x, points } = label.attribute;
        const sign = points[2].x - points[0].x > 0 ? 1 : -1;
        const prevWidth = label.AABBBounds.width();
        if (!label.cliped) {
          console.log(label);
          label.setAttribute('text', originalText.join(' '));

          if (label.cliped) {
            label.setAttribute('text', originalText);
          } else {
            const newWidth = label.AABBBounds.width();

            label.setAttribute('x', x + (sign * (newWidth - prevWidth)) / 2);
          }
        } else {
          label.setAttributes(
            sign === 1
              ? {
                  textAlign: 'start',
                  x: x - prevWidth / 2
                }
              : {
                  textAlign: 'end',
                  x: x + prevWidth / 2
                }
          );
        }
      });
    }
  },
  tooltip: {
    mark: {
      content: [
        {
          key: datum => datum['type'],
          value: datum => datum['value'] + '%'
        }
      ]
    }
  }
};