【基于react的立体柱状图的实现】_react 立体柱状图

基于react实现立体柱状图：

代码如下：

假设需要展示的数据如下

const data = [
  {
    a: [1, 2, 3],
    b: [1, 1],
    c: [1, 2]
  },
  {
    a: [1, 2, 3],
    b: [1, 4, 5],
    c: [1, 1]
  },
];

 以下是jsx代码

<div
            className="host-data"
          >
            {
              data.map((v, i) => {
                return (
                  <div
                    key={i}
                    className="cuboid"
                    style={{ height: maxHeight * 30 + 15 > 250 ? maxHeight * 30 + 15 : 250, width: 127 }}
                  >
                    <div
                      className="front"
                      style={{ height: (v.a.length + v.b.length + v.c.length) < 3 ? (v.a.length + v.b.length + v.c.length) * 30 + 8 : (v.a.length + v.b.length + v.c.length) * 30 }}
                    >
                      {
                        Array.from({ length: v.a.length }).map((item, index) => {
                          return (
                            <span
                              key={index}
                              style={{ backgroundColor: 'rgba(222,222,228)' }}
                            >
                              <span style={{ width: 8, height: 8, borderRadius: 8, backgroundColor: '#5E9DF8', marginLeft: 65, marginTop: 0 }} />
                            </span>
                          );
                        })
                      }
                      {
                        Array.from({ length: v.b.length }).map((item, index) => {
                          return (
                            <span
                              key={index}
                              style={{ backgroundColor: 'rgba(220,222,228,.8)' }}
                            >
                              <span style={{ width: 8, height: 8, borderRadius: 8, backgroundColor: '#5E9DF8', marginLeft: 65, marginTop: 0 }} />
                            </span>
                          );
                        })
                      }
                      {
                        Array.from({ length: v.c.length }).map((item, index) => {
                          return (
                            <span
                              key={index}
                            >
                              <span style={{ width: 8, height: 8, borderRadius: 8, backgroundColor: '#5E9DF8', marginLeft: 65, marginTop: 0 }} />
                            </span>
                          );
                        })
                      }
                    </div>
                    <div
                      className="back"
                      style={{ height: (v.a.length + v.b.length + v.c.length) < 3 ? (v.a.length + v.b.length + v.c.length) * 30 + 8 : (v.a.length + v.b.length + v.c.length) * 30 }}
                    />
                    <div
                      className="left"
                      style={{ height: (v.a.length + v.b.length + v.c.length) < 3 ? (v.a.length + v.b.length + v.c.length) * 30 + 8 : (v.a.length + v.b.length + v.c.length) * 30 }}
                    />
                    <div
                      className="right"
                      style={{ height: (v.a.length + v.b.length + v.c.length) < 3 ? (v.a.length + v.b.length + v.c.length) * 30 + 8 : (v.a.length + v.b.length + v.c.length) * 30 }}
                    />
                    <div
                      className="top"
                      style={{ top: maxHeight * 30 + 15 > 250 ? (v.a.length + v.b.length + v.c.length) < 3 ? (maxHeight * 30 - 55) - 30 * (v.a.length + v.b.length + v.c.length) : (maxHeight * 30 - 47) - 30 * (v.a.length + v.b.length + v.c.length) : (v.a.length + v.b.length + v.c.length) < 3 ? 180 - 30 * (v.a.length + v.b.length + v.c.length) : 188 - 30 * (v.a.length + v.b.length + v.c.length) }}
                    />
                  </div>
                );
              })
            }
          </div>

其中，展示的数据data中a，b，c的长度加起来最长就等于maxHeight

而控制外层cuboid的div的高度是为了实现滚动条的效果（根据实际情况而定）

 less文件

.host-data{
            position: relative;
            display: flex;
            width: 1232px;
            height: 250px;
            padding-left: 48px;
            overflow-y: scroll;
            & .cuboid {
              z-index: 1;
              width: 127px;
              vertical-align: baseline;
              transform: rotateX(-8deg) rotateY(-8deg);
              transform-style: preserve-3d;
              & div {
                position: absolute;
                bottom: 5px;
                z-index: 3;
                width: 100px;
                cursor: pointer;
              }
              & .front {
                height: 200px;
                background: rgba(163,218,255,.2);
                border-top: 6px solid #296AD9;
                transform: translateZ(50px);
                & span{
                  display: inline-block;
                  width: 80px;
                  height: 20px;
                  margin: 8px 8px 0 8px;
                  background: #F0F8FF;
                }
              }
              & .back {
                height: 200px;
                background: #5E9DF8;
                transform: translateZ(-50px) rotateY(180deg);
              }
              & .left {
                height: 200px;
                background: #8FC3FF;
                transform: rotateY(-90deg) translateZ(50px);
              }
              & .right {
                height: 200px;
                background: #8FC3FF;
                transform: rotateY(90deg) translateZ(50px);
              }
              & .top {
                height: 100px;
                background: #E0F1FF;
                transform: rotateX(90deg) translateX(-19px);
              }
            }
          }

结果图：

具体思路是：用css的3d视觉 将多个div拼接成一个立体的柱状图，柱子的高度：分别由前、后、左、右四个div的高度决定，而这四个div的高度由需要展示的数据的多少决定，立体柱状图的顶部，也需要计算出来，前面的小方块分别代表a，b或者c中的数据条数，这里只是使用了数字作代替，根据实际情况而定，通常是一个对象，然后鼠标移到不同的块块上显示不同对象的内容（这就是另外一个功能了，感兴趣的可以自己研究一下，类似于echarts的tooltip功能）。尝试修改transform，可以获得不同角度的柱状图。