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

3d漏斗图

老板要我做一个这样的

img


漏斗图但是我只能做到

img


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

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

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

我想要达到的结果

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

img


用ECharts做的

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

img

img

img

img

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: "第四张图片路径"
            }]
        }]
}

https://github.com/jakezatecky/d3-funnel
d3-funnel

heightecharts 有个3d的 应该也可以 设置分开吧 echarts 可以设置分开 它应该也可以
https://www.isqqw.com/echartsdetail?id=16588