漏斗图如何自定义显示文字内容?-灵析社区

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) > ![image.png](https://wmprod.oss-cn-> shanghai.aliyuncs.com/images/20250106/cbd91f2ab6f23f65fdef87609ecff897.png) ### 可以使用`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) > ![image.png](https://wmprod.oss-cn-> shanghai.aliyuncs.com/images/20250106/7e7e669e91e79466c7f6c428a3acc105.png) 然后调整`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) ### 另一个类似问题回答 >

阅读量:1

点赞量:0

问AI