label偶尔显示不全

[Sharang-heng]

问题描述

import { nextTick, onUnmounted, ref, watch } from 'vue';
import { Chart } from '@antv/g2';
import { useAppStore } from '@/assets/scripts/stores/app';
import api from '@/assets/scripts/api';
import type { ChartItemData } from '@/assets/scripts/types';
import { useRequest } from 'vue-hooks-plus';
import { storeToRefs } from 'pinia';

export default defineComponent({
  setup() {
    const chartId = 'age-chart';
    const colors = [
      '#42cdff',
      '#1ec1b0',
      '#22cc6e',
      '#7638ff',
      '#fda600',
      '#ef3737'
    ];
    let chart: Chart;
    const appStore = useAppStore();
    const { appId } = storeToRefs(appStore);
    const chartData = ref<ChartItemData[]>([]);
    const { runAsync, loading } = useRequest(api.getAgeDistUsingGet, {
      manual: true
    });
    const renderChart = () => {
      chart = new Chart({
        container: chartId,
        height: 300,
        autoFit: true
      });
      chart.coordinate({ type: 'polar', innerRadius: 0.4 });
      chart
        .interval()
        .data(chartData.value)
        .encode('x', 'value')
        .encode('y', 'percent')
        .axis(false)
        .encode('color', 'name')
        .scale('color', { range: colors })
        .legend('color', {
          position: 'bottom',
          layout: { justifyContent: 'center' }
        })
        .label({
          position: 'outside',
          text: (data: ChartItemData) => `${(data.percent * 100).toFixed(2)}%`
        })
        .tooltip((data: ChartItemData) => ({
          name: data.name,
          value: data.value,
          title: null
        }))
        .animate('enter', { type: 'waveIn' });
      chart.render();
    };
    const stop = watch(
      appId,
      async (id) => {
        try {
          const result = (await runAsync({ appId: id })).data ;
          chartData.value = result ;
          await nextTick();
          renderChart();
        } catch (error) {
          chartData.value = [];
          chart.destroy();
        }
      },
      {
        immediate: true
      }
    );
    onUnmounted(() => {
      chart.destroy();
      stop();
    });

    return { chartData, chartId, loading };
  },
  render() {
    return (
      <a-spin spinning={this.loading}>
        {this.chartData.length > 0 ? (
          <div id={this.chartId} />
        ) : (
          <div h-300px flex-xy-center>
            <a-empty />
          </div>
        )}
      </a-spin>
    );
  }
});

切换页面偶尔会变成 刷新一下浏览器就正常了

重现链接

No response

重现步骤

No response

预期行为

No response

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[pearmini]

可以提供一下复现 demo 吗？

[Sharang-heng]

可以提供一下复现 demo 吗？

https://github.com/Sharang-heng/vue3-issue 通过点击测试1和测试2来回切换时，label会显示不全 经过验证，在只有一个chart时就不会出现这种情况，不确定是不是多个图间存在影响

另外请教一下，我该如何才不显示这个title？，我已经设title为null了，翻了文档也问了ai没找到解决方案，打扰了