IssueHuntDo you want to work on this issue?
You can request for a bounty in order to promote it!
多个漏斗图同时渲染时，其中1个或者两个都会，渲染之后又消失掉 #6347
Miss-An posted onGitHub
问题描述
一个页面中有多个图同时渲染时，漏斗图有可能渲染之后又消失了
每次渲染的数据的都是一样的
重现链接
No response
重现步骤
https://github.com/antvis/G2/assets/19668959/b6abb60d-4948-4b7e-8166-3191b9d23696
预期行为
正常渲染
平台
- 操作系统: [macOS, Windows, Linux, React Native ...]
- 网页浏览器: [Google Chrome, Safari, Firefox]
屏幕截图或视频（可选）
No response
补充说明（可选）
No response
这个能提供一下复现 demo 吗？或者看看有没有报错。
<script lang="ts">
import { defineComponent, nextTick, onMounted, reactive, toRefs } from 'vue';
import { Chart } from '@antv/g2v5';
import { ObjectType } from '@/types/global';
import { Empty } from 'ant-design-vue';
import { getForumStudentInteractionData, getForumContentInteractionData } from '@/api/trainingDataReport';
import { separateNumber } from '@/utils/common';
import { ResDataType } from '@/types/api';
export default defineComponent({
name: 'CommunityInteraction',
setup() {
let searchParams = {
selectType: 1,
showType: 0,
startTime: "2024-07-01",
endTime: "2024-07-04",
rangeType: 1,
workingStatusType: 0,
assessmentStatusType: 0,
validatingStatusType: 0,
positionIds: [
139,
144
]
} as ObjectType;
const state = reactive({
communityMemberInteractLoading: false,
communityContentInteractLoading: false,
emptyMemberInteract: false,
emptyContentInteract: false
});
const chartObjList = {
communityMemberInteract: {
id: 'community-member-interact',
data: [] as ObjectType[],
chart: null as ObjectType | null,
searchData: function() {
state.communityMemberInteractLoading = true;
getForumStudentInteractionData(searchParams).then((res: ResDataType) => {
if (res.errorCode === 0 && res.data) {
let hasData = false;
this.data = Object.keys(res.data).map((key) => {
hasData = hasData || !!res.data[key];
return {
action: {
visitNum: '访问人数',
visitTopicNum: '阅读人数',
favorNum: '点赞人数',
commentNum: '评论人数',
newTopicNum: '发帖人数'
}[key],
count: res.data[key] || 0
};
});
if (!hasData) {
state.emptyMemberInteract = true;
} else {
state.emptyMemberInteract = false;
renderFunnel('communityMemberInteract', this.data);
}
}
}).finally(() => {
state.communityMemberInteractLoading = false;
});
}
},
communityContentInteract: {
id: 'community-content-interact',
data: [] as ObjectType[],
chart: null as ObjectType | null,
searchData: function() {
state.communityContentInteractLoading = true;
getForumContentInteractionData(searchParams).then((res: ResDataType) => {
if (res.errorCode === 0 && res.data) {
let hasData = false;
this.data = Object.keys(res.data).map((key) => {
hasData = hasData || !!res.data[key];
return {
action: {
visitNum: '访问量',
visitTopicNum: '阅读量',
favorNum: '点赞量',
commentNum: '评论量',
newTopicNum: '发帖量'
}[key],
count: res.data[key] || 0
};
});
if (!hasData) {
state.emptyContentInteract = true;
} else {
state.emptyContentInteract = false;
renderFunnel('communityContentInteract', this.data);
}
}
}).finally(() => {
state.communityContentInteractLoading = false;
});
}
}
};
const renderFunnel = (type: string, data: ObjectType[]) => {
const chartObj = chartObjList[type];
const domId = chartObj.id;
chartObj.chart && chartObj.chart.destroy();
const ele = document.getElementById(domId);
ele && (ele.innerHTML = '');
// if (chartObj.chart) {
// chartObj.chart.changeData(data);
// return;
// }
const chart = chartObj.chart = new Chart({
container: domId,
autoFit: true,
paddingLeft: 10,
paddingRight: 10,
paddingTop: 0
});
chart.data(data);
chart.coordinate({
transform: [{ type: 'transpose' }]
});
chart
.interval()
.encode('x', 'action')
.encode('y', 'count')
.encode('color', 'action')
.encode('shape', 'pyramid')
.transform({ type: 'symmetryY' })
.scale('x', { padding: 0 })
.animate('enter', { type: 'fadeIn' })
.label({
text: (d: ObjectType) =>${d.action},
fontSize: 12,
fill: '#2C2C2C',
position: 'inside'
})
.legend(false)
.axis(false)
.tooltip({ title: false })
.tooltip((
d: ObjectType, // 每一个数据项
index: number, // 索引
data: ObjectType, // 完整数据
column: ObjectType // 通道
) => {
return {
name: d.action,
value: d.count < 10000 ? separateNumber(d.count) :${separateNumber(Math.round(d.count * 10 / 10000) / 10)}w};
});
chart.scale('color', {
range: ['#5591FF', '#66BBFE', '#45D2CD', '#FFD046', '#FF7554']
});
chart.render();
};
const searchData = () => {
for (const key in chartObjList) {
chartObjList[key].searchData();
}
};
onMounted(() => {
searchData();
});
return {
...toRefs(state),
simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
searchData,
};
}
});
</script>
这里每次渲染之前 如果chart存在时要先destroy的，这样问题比较好重现。因为首次渲染的时候页面如果还有其它类型的图表也可能出现一个不出来的情况