IssueHunt漏斗图中占比文字不能居中显示 #3400
Chemical-Romance posted onGitHub
import DataSet from '@antv/data-set'; import { Chart } from '@antv/g2';
const { DataView } = DataSet;
const dv = new DataView().source([
{ action: '浏览网站', pv: 8000 },
{ action: '放入购物车', pv: 5000 },
{ action: '生成订单', pv: 2500 },
{ action: '支付订单', pv: 2000 },
{ action: '完成交易', pv: 1000 },
]);
dv.transform({
type: 'map',
callback(row) {
row.percent = row.pv / 50000;
return row;
},
});
const data = dv.rows;
const chart = new Chart({
container: 'container',
autoFit: true,
height: 500,
padding: [20, 120, 95],
});
chart.data(data);
chart.axis(false);
chart.tooltip({
showTitle: false,
showMarkers: false,
itemTpl:
'<li style="margin-bottom:4px;list-style-type:none;padding: 0;">' +
'<span style="background-color:{color};" class="g2-tooltip-marker"></span>' +
'{name}<br/>' +
'<span style="padding-left: 16px;line-height: 16px;">浏览人数：{pv}</span><br/>' +
'<span style="padding-left: 16px;line-height: 16px;">占比：{percent}</span><br/>' +
'</li>',
});
chart
.coordinate('rect')
.transpose()
.scale(1, -1);
chart
.interval()
.adjust('symmetric')
.position('actionpercent')
.shape('funnel')
.color('action', ['#0050B3', '#1890FF', '#40A9FF', '#69C0FF', '#BAE7FF'])
.label(
'actionpv',
(action, pv) => {
return {
content: ${action} ${pv},
};
},
{
offset: 35,
labelLine: {
style: {
lineWidth: 1,
stroke: 'rgba(0, 0, 0, 0.15)',
},
},
}
)
.tooltip('actionpvpercent', (action, pv, percent) => {
return {
name: action,
percent: +percent * 100 + '%',
pv,
};
})
.animate({
appear: {
animation: 'fade-in'
},
update: {
annotation: 'fade-in'
}
});
chart.interaction('element-active');
chart.on('beforepaint', () => { chart.annotation().clear(true); const chartData = chart.getData(); // 中间标签文本 chartData.forEach((obj) => { chart.annotation().text({ top: true, position: { action: obj.action, percent: 'median', }, content: +obj.percent * 100 + '%', // 显示的文本内容 style: { stroke: null, fill: '#fff', textAlign: 'center', }, }); }); });
chart.render();
