3d漏斗图的技术尝试和失败后的问题

Question

3d漏斗图

老板要我做一个这样的

漏斗图但是我只能做到

这样的始终没有办法做到分层的效果，圆柱一直贴在一起

我的解答思路和尝试过的方法

试过echarts，但是echarts有漏斗图但是没有3d的或者做不出来相对应的效果

我想要达到的结果

有没有同僚们有做过类似的前端3D漏斗图？麻烦推荐一下可以做到的技术，或者给我一个技术帖子的地址,可以运行的代码或者dome都行

Answer 1

用ECharts做的

具体思路就是用EChart的 type: 'pictorialBar', 然后设置了一些参数实现的
那四个圆台状的东东我是用PPT作出来的，改了下颜色然后生成的图片，图片要是png格式的，然后代码里记得改图片路径

option = {
            
            grid: {
            // containLabel: true,
            left: '10%',
            top: "19%",
            bottom: "15%",
        },
        xAxis: {
            show: false,
            data: [
                '1',
                '2',
                '3',
                '4'
            ],
        },
        yAxis: {
            show: false,
        },
        series: [{
            type: 'pictorialBar',
            data: [{
                z: 100,
                value: 100,
                symbolSize: ['335%', '33%'],
                symbolPosition: 'center',
                symbolOffset: ['70%', '-70%'],
                symbol: "第一张图片路径"
            }, {
                z: 90,
                value: 80,
                symbolSize: ['240%', '33%'],
                symbolPosition: 'center',
                symbolOffset: ['36%', '-30%'],
                 symbol: "第二张图片路径"
            }, {
                z: 80,
                value: 60,
                symbolSize: ['175%', '33%'],
                symbolPosition: 'center',
                symbolOffset: ['-34%', '10%'],
                 symbol: "第三张图片路径"
            }, {
                z: 70,
                value: 40,
                symbolSize: ['125%', '33%'],
                symbolPosition: 'center',
                symbolOffset: ['-164%', '45%'],
                symbol: "第四张图片路径"
            }]
        }]
}