[v5] position by 'spider' should make the label be overlap #4682

可以增加 label.transform 为 [{ type: 'overlapDodgeY' }] 解决问题。

<img src="https://github.com/antvis/G2/assets/49330279/822b4d43-fc64-4a98-b235-1f435f514216" width=480 />

/**
 * A recreation of this demo: https://nivo.rocks/pie/
 */
import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
  width: 500,
  height: 400,
  paddingLeft: 50,
  theme: 'classic',
});

chart.coordinate({ type: 'theta', innerRadius: 0.25, outerRadius: 0.8 });

chart
  .interval()
  .data([
    { id: 'c23423', value: 526 },
    { id: '32324', value: 220 },
    { id: '32332', value: 325 },
    { id: 'elixir', value: 561 },
    { id: '3333', value: 54 },
    { id: 'dasdasd', value: 54 },
    { id: 'd23', value: 54 },
    { id: 'rust', value: 54 },
    { id: 'rust', value: 54 },
  ])
  .transform({ type: 'stackY' })
  .encode('y', 'value')
  .encode('color', 'id')
  .scale('color', {
    range: ['#e8c1a0', '#f47560', '#f1e15b', '#e8a838', '#61cdbb'],
  })
  .label({
    text: 'value',
    style: {
      fontWeight: 'bold',
      offset: 14,
    },
  })
  .label({
    text: 'id',
    position: 'spider',
    connectorDistance: 0,
    style: {
      fontWeight: 'bold',
      textBaseline: 'bottom',
      textAlign: (d) => (['c', 'sass'].includes(d.id) ? 'end' : 'start'),
      dy: -4,
    },
    transform: [{ type: 'overlapDodgeY' }], // 这一行
  })
  .style('radius', 4)
  .style('stroke', '#fff')
  .style('lineWidth', 2)
  .animate('enterType', 'waveIn')
  .legend(false);

chart.render();