js3d四边金字塔

领导要求在页面总览中心放个3d金字塔图形展示五个层级数据,我觉得大概应该可能这个样子:

然而翻完echarts的我发现问题没这么简单,echarts只有2d漏斗图,明显跟领导要求的不一样.于是我搜哪个能做3d金字塔的图,查到了:

emmmm…这是3d金字塔??我读书少你不要骗我…话说你这title都写的3d漏斗图是怎么回事…
于是我上网查了下埃及金字塔到底什么样:

我没有理解错,那既然没有现成的,只能手写了,于是网上搜了下js3d金字塔,果然发现了先行者:原生JS实现立体金字塔
但是发现一个问题,这金字塔只能正对着面旋转,也就是这个写法出来后,只有正视图:

既然它可以垂直转,那自然也可以水平转,我只要在它80度时水平转就行:

emmm…好家伙,这玩意水平转始终是以顶为中心转,跟你当前垂直转多少没关系,怪不得那个博主只展示后空翻…
机智的我很快就想到了解决方法,既然方向不对,那我在外面再套一个框,让外层再转:

这下就好了,好了?emmm…总感觉看不出来是个3d金字塔啊,根本看不出来棱好么…
但是机智如我自然可以有想法——加上阴影遮罩不就好了吗,虽然不会写,但我可以试啊:
于是在不断尝试(写bug)下,终于出来了:

我添加了样式,每个色层属于同一样式,方便通过样式书写交互方法,至于领导的需求我加几个标签就完事了,所以剩下的你们自己发挥吧:

源码:

<template>
  <div class="bd_sun">
    <div class="map" id="map">
      <div id="jzt"></div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {

      }
    },
    methods: {
      drow(){
        let div = document.getElementById("jzt"),
            h = 300,
            p = h / 5;
        for (let i = 0; i < h; i++) {
          let o = document.createElement("div");
          o.style.width = (h - i)+'px';
          o.style.height = (h - i)+'px';
          o.style.position = 'absolute';
          o.style.left = '0';
          o.style.top = '0';
          o.style.right = '0';
          o.style.bottom = '0';
          o.style.margin = 'auto';
          o.style.transform = 'translateZ('+i+'px)';
          let n = Math.round(Math.max(i+p/2,1)/p);
          o.className = 'tc'+n;
          let to = document.createElement("div");
          to.className = 'to';
          div.append(o);
          o.append(to);
        }
        // var reg = 0;
        // setInterval(function ( ) {
        //   reg += 0.4;
        //   div.style.transform = 'perspective(800px) rotateY('+reg+'deg)';
        // },50)
        div.style.transform = 'perspective(999999px) rotateX(50deg) rotateY(54deg)';
        let map = document.getElementById("map");
        map.style.transform = 'rotate(296deg)';
      },
    },
    created: function() {
      this.$nextTick(function () {
        this.drow();
      })
    },
  }
</script>
<style scoped>
  .bd_sun{
    background: #034395;
  }
  .bd_sun /deep/ .map{
    height: 100%
  }
  #jzt{
    width: 300px;
    height: 300px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -100px 0 0 -100px;
    background: #00000000;
    transform-style: preserve-3d;
  }
  /deep/ .to{
    width: 500px;
    height: 500px;
    position: absolute;
    left: -6px;
    transform-origin: 0 0;
    transform: rotateY(89deg);
    background: #00000030;
  }
  /deep/ .tc1{
    background:#ff7600;
    overflow: hidden;
  }
  /deep/ .tc2{
    background: #ebf308;
    overflow: hidden;
  }
  /deep/ .tc3{
    background: #59fd00;
    overflow: hidden;
  }
  /deep/ .tc4{
    background: #02a2fa;
    overflow: hidden;
  }
  /deep/ .tc5{
    background: #ffffff;
    overflow: hidden;
  }
</style>