漏斗图标签在重复渲染后，最后一行的标签显示会被遮挡

[xiao15934831580]

• G2 Version:4.0.12
• Platform:
• Mini Showcase(like screenshots):
• CodePen Link:

使用 chart.annotation().text（）绘制在漏斗图funnel上边的content，在切换标签显示后，最后一行的interval 上边显示的content被半透明遮挡，怎么解决

[xiaobindebingo]

把你可以复现这个bug的demo贴出来？

[xiao15934831580]

const { DataView } = DataSet;
const dv = new DataView().source([
{ action: '浏览网站', pv: 50000 },
{ action: '放入购物车', pv: 35000 },
{ action: '生成订单', pv: 25000 },
{ action: '支付订单', pv: 15000 },
{ action: '完成交易', pv: 8000 },
]);
dv.transform({
type: 'map',
callback(row) {
row.percent = row.pv / 50000;
return row;
},
});
const data = dv.rows;
chart.annotation().clear(true);
data.forEach((value) => {
let contentValue: string = '';
let displayData = value.pv;
for (let setting of this.chartStyle.seriesSetting) {
if (setting.measureModel == value.action) {
switch (this.chartStyle.labelDisplay) {
case '度量值':
contentValue = displayData;
break;
case '转化率+度量值':
contentValue = displayData + ' ' + displayData*100 + '%';
break;
}
// 重新配置辅助文本
chart.annotation().text({
top: true,
position: {
action: value.action,
percent: 'median',
},
content: setting.measureAlias + ':' + contentValue, // 显示的文本内容
style: {
stroke: null,
fill: "#fff",
fontSize: '12',
textAlign: 'center',
shadowBlur: 2,
shadowColor: 'rgba(0,0,0,0.2)',
},
});
}
}
});
chart.render();

[xiaobindebingo]

const { DataView } = DataSet;
const dv = new DataView().source([
{ action: '浏览网站', pv: 50000 },
{ action: '放入购物车', pv: 35000 },
{ action: '生成订单', pv: 25000 },
{ action: '支付订单', pv: 15000 },
{ action: '完成交易', pv: 8000 },
]);
dv.transform({
type: 'map',
callback(row) {
row.percent = row.pv / 50000;
return row;
},
});
const data = dv.rows;
chart.annotation().clear(true);
data.forEach((value) => {
let contentValue: string = '';
let displayData = value.pv;
for (let setting of this.chartStyle.seriesSetting) {
if (setting.measureModel == value.action) {
switch (this.chartStyle.labelDisplay) {
case '度量值':
contentValue = displayData;
break;
case '转化率+度量值':
contentValue = displayData + ' ' + displayData*100 + '%';
break;
}
// 重新配置辅助文本
chart.annotation().text({
top: true,
position: {
action: value.action,
percent: 'median',
},
content: setting.measureAlias + ':' + contentValue, // 显示的文本内容
style: {
stroke: null,
fill: "#fff",
fontSize: '12',
textAlign: 'center',
shadowBlur: 2,
shadowColor: 'rgba(0,0,0,0.2)',
},
});
}
}
});
chart.render();

你的chart实例化也贴出来吧

[xiao15934831580]

https://codepen.io/leungwensen/pen/WXJgox
但是在demo中没有复现出来，在实际项目中出现最后一条content被遮挡

[xiao15934831580]

demo链接 https://codepen.io/xiao15934831580/pen/dyGELLb

[xiaobindebingo]

demo链接 https://codepen.io/xiao15934831580/pen/dyGELLb

什么也看不到呢

[xiao15934831580]

这个链接 https://codepen.io/xiao15934831580/pen/dyGELLb

[xiaobindebingo]

这个链接 https://codepen.io/xiao15934831580/pen/dyGELLb

能否将你在项目中被覆盖的效果图贴出来，如果复现不了，是不是有可能是你自己布局的问题？

[hustcc]

@xiao15934831580 可以波给出最简的 bug 复现 demo。

@xiaobindebingo 心累