数据重复更新会导致数据轴 label 重复绘制

[hahaiwin]

版本：5.0.7
示例

import React, { useEffect, useRef } from 'react';
import classnames from 'classnames';
import { CnChartProps } from './types';
import './index.scss';
import { Chart } from '@antv/g2';

const clsPrefix = 'cn-chart';

/**
 * CnPieChart 组件
 * @param {*} props
 * @returns
 */
export function CnChart(props: CnChartProps) {
  const { theme = 'classic', autoFit, className, containerStyle, width, height, data } = props;
  const container = useRef<HTMLDivElement>(null);
  const chartInstance = useRef<Chart>();

  useEffect(() => {
    if (!container.current) {
      return;
    }

    if (!chartInstance.current) {
      const chart = new Chart({
        container: container.current,
        theme,
        autoFit,
        width,
        height,
      });
      chartInstance.current = chart;
      chartInstance.current.options({ ...props });
      chartInstance.current.render();
      return;
    }
    chartInstance.current.changeData(data);
  }, [data]);
  return (
    <div ref={container} className={classnames(clsPrefix, className)} style={containerStyle} />
  );
}

export const 数据更新 = () => {
  const [data, setData] = React.useState('1');
  React.useEffect(() => {
    setInterval(() => {
      setData(data === '1' ? '2' : '1');
    }, 5000);
  });
  const data1 = [
    { name: '图例1', value: 37 },
    { name: '图例2', value: 49 },
    { name: '图例3', value: 14 },
  ];
  const data2 = [
    { name: '图例1', value: 37 },
    { name: '图例2', value: 49 },
    { name: '图例3', value: 14 },
  ];

  return (
    <div>
      <Row>
        <CnAsyncSelect
          mode="single"
          onChange={(val) => {
            setData(val);
          }}
          hasClear
          value={data}
          dataSource={[
            { label: '数据1', value: '1' },
            { label: '数据2', value: '2' },
          ]}
        />
      </Row>
      <Row>
        <div style={{ width: '100%', height: '500px' }}>
          <CnChart
            type="interval"
            autoFit
            encode={{
              x: 'name', // 编码 x 通道
              y: 'value', // 编码 y 通道
            }}
            data={data === '1' ? data1 : data2}
          />
        </div>
      </Row>
    </div>
  );
};