三种方法: ### 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' }], })  ### 也可以用`VChart`: 配置 outerLabel: { position: 'right', visible: true },  > [https://www.visactor.io/vchart/demo/funnel-chart/basic-> funnel](https://link.segmentfault.com/?enc=%2BXCkQJ4iJ6WsCVqKPqYdAA%3D%3D.sa4%2FO7C5phYHYO1MnHajERTPN6CbwNZQ9cxZqVkIPRlvbZjeXpilhUxJ%2FdpwUTidDFwFLIF5%2Fm827UomjQRp6A%3D%3D) ### 另一个类似问题回答 >