漏斗图如何自定义显示文字内容？-灵析社区
练习代码二十年我正在绘制一个漏斗图，我希望能够每一个漏斗里头的标签能够自定义展示内容，显示两行不同的文字，同时右侧的标签也需要能够自定义内容。我应该怎么来实现这样的效果呢？ 类似下图中的效果： 
PX_13三种方法:
echart官方示例:
使用两个漏斗图进行叠加即可:
«"https://echarts.apache.org/examples/zh/editor.html?c=funnel-c..." (https://link.segmentfault.com/?enc=OmEH7H13neanz75ou9lxsA%3D%3D.TILEfySWECEL7PYC1DCEmqsAm%2Fb9LYHg5AMT%2BIE0UsExeDbRABCHsVlAUlWgCUB90cljVD7uSZCqyW38X626XDpsCaK8%2B7w%2BUbk1aAPcLwY%3D)
»
可以使用"G2":
«"https://g2.antv.antgroup.com/zh/examples/general/funnel/#pyramid" (https://link.segmentfault.com/?enc=9EyAJms%2BW2FZYRv1alWkhQ%3D%3D.4yRsA9%2Bn7ZJ%2BRrqlO1uTjLQuMXT8NK6i5efjRwRA%2FmYQoN9BrFOPFL%2FEp5U6h8%2F%2FljTVFsKrgJ%2FrgdrtKCPMNB80tS7ajSSuocPbDMz8KOQ%3D)
»
然后调整"label"就行:
«"https://g2.antv.antgroup.com/spec/label/overview" (https://link.segmentfault.com/?enc=9tsAtEzXxCMKMksanJ5sIg%3D%3D.N9N2qBO4FOh5Uhqt4Lenu%2Bd5rjg%2FaWc4zRdui1R0JXoNOOfdbLkXq3L3J2HS8f77WrHEuqseQjo5ymLtqOgqQg%3D%3D)»
比如:
.label({
text: (d) => `${d.action} ${d.pv}`,
textAlign: 'left',
})
.label({
text: (d) => `${d.action} ${d.pv}`,
textAlign: 'right',
position: 'left'
})
.label({
text: (d) => `${(d.rate * 100).toFixed(1)}%`,
position: 'inside',
transform: [{ type: 'contrastReverse' }],
})
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250106/290e9155a6f1b5ec3639b33ab91d23b5.png)
也可以用"VChart":
配置
outerLabel: {
position: 'right',
visible: true
},
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250106/dc01d2a36148ebe00d1d82f269c31965.png)
«"https://www.visactor.io/vchart/demo/funnel-chart/basic-> funnel" (https://link.segmentfault.com/?enc=%2BXCkQJ4iJ6WsCVqKPqYdAA%3D%3D.sa4%2FO7C5phYHYO1MnHajERTPN6CbwNZQ9cxZqVkIPRlvbZjeXpilhUxJ%2FdpwUTidDFwFLIF5%2Fm827UomjQRp6A%3D%3D)»
另一个类似问题回答
«"https://segmentfault.com/q/1010000044167713/a-1020000044168725" (https://segmentfault.com/q/1010000044167713/a-1020000044168725)»