label偶尔显示不全
- Dominant language
- TypeScript
- Stars
- 12.6k
- Forks
- 1.7k
- PR merge metrics
- No merged PRs in 30d
Description
### 问题描述
```
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([]);
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 (
{this.chartData.length > 0 ? (
) : (
)}
);
}
});
```
切换页面偶尔会变成

刷新一下浏览器就正常了

### 重现链接
_No response_
### 重现步骤
_No response_
### 预期行为
_No response_
### 平台
- 操作系统: [macOS, Windows, Linux, React Native ...]
- 网页浏览器: [Google Chrome, Safari, Firefox]
### 屏幕截图或视频(可选)
_No response_
### 补充说明(可选)
_No response_
Contributor guide
Research direction
Start with the supplied renderChart example, especially the label configuration and the chart lifecycle around page switches. Reproduce the intermittent truncated labels with the provided data and screenshots, then trace label layout during rerendering. Done means labels render completely and consistently after navigation without requiring a browser refresh.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- data-visualization, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100