label偶尔显示不全 #6339

Sharang-heng posted onGitHub

问题描述

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>
    );
  }
});

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