fix(axis): custom axis tags disappear when the page is zoomed

[BENcorry]

Checklist

• npm test passes
• benchmarks are included
• commit message follows commit guidelines
• documents are updated

Description of change

解决问题

BUG: 自定义轴标签在缩放页面时消失#5826

解决办法：
导致问题产生的核心问题是由于异步渲染的问题，将animate的动画在axis组件渲染后，runtime的时候关闭掉更新的动画渲染。

DEMO: 访问官网示例 https://g2.antv.antgroup.com/examples/component/axis/#axis

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
  autoFit: true,
});

chart.data([
  {
    pos: 1,
    no: 1,
    driver: 'Max Verstappen',
    car: 'RED BULL RACING HONDA RBPT',
    laps: 57,
    time: '1:33:56.736',
    pts: 25,
  },
  {
    pos: 2,
    no: 11,
    driver: 'Sergio Perez',
    car: 'RED BULL RACING HONDA RBPT',
    laps: 57,
    time: '+11.987s',
    pts: 18,
  },
  {
    pos: 3,
    no: 14,
    driver: 'Fernando Alonso',
    car: 'ASTON MARTIN ARAMCO MERCEDES',
    laps: 57,
    time: '+38.637s',
    pts: 15,
  },
  {
    pos: 4,
    no: 55,
    driver: 'Carlos Sainz',
    car: 'FERRARI',
    laps: 57,
    time: '+48.052s',
    pts: 12,
  },
  {
    pos: 5,
    no: 44,
    driver: 'Lewis Hamilton',
    car: 'MERCEDES',
    laps: 57,
    time: '+50.977s',
    pts: 10,
  },
]);

function medal(ranking) {
  if (ranking > 2) return `第${ranking + 1}名`;
  const { document } = chart.getContext().canvas!;
  const group = document.createElement('g', {});
  const size = ranking === 0 ? 20 : 15;
  const icon = document.createElement('image', {
    style: {
      src: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*1NiMRKb2sfMAAAAAAAAAAAAADmJ7AQ/original',
      width: size,
      height: size,
      anchor: '0.5 0.5',
    },
  });
  const text = ['冠军🏆', '亚军🥈', '季军🥉'][ranking];
  const label = document.createElement('text', {
    style: {
      text,
      fill: 'gray',
      textAlign: 'center',
      transform: `translate(0, 35)`,
    },
  });

  group.appendChild(icon);
  group.appendChild(label);
  return group;
}

chart
  .interval()
  .encode('x', 'pos')
  .encode('y', 'pts')
  .encode('color', 'pts')
  .axis({
    x: {
      title: 'FORMULA 1 GULF AIR BAHRAIN GRAND PRIX 2023 - RACE RESULT',
      size: 80,
      labelFormatter: (datum, index) => medal(index),
    },
    y: false,
  })
  .label({
    text: 'driver',
    transform: [{ type: 'contrastReverse' }],
  })
  .label({
    text: 'time',
    transform: [{ type: 'contrastReverse' }],
    dy: 20,
    fontStyle: 'italic',
  })
  .tooltip({ title: 'car' })
  .legend(false);

chart.render();

修复前

resize视口导致g group组件丢失

修复后