用div+css手动封装一个3D柱状图

关忆北_

已于 2023-10-09 09:41:19 修改

阅读量967

点赞数 3

分类专栏：封装文章标签： css 3d 前端

于 2022-12-02 12:08:41 首次发布

本文链接：https://blog.csdn.net/notagoodwriter/article/details/128145708

版权

封装专栏收录该内容

6 篇文章 0 订阅

订阅专栏

碰到一个需求 3D柱状图正常来说这块地方是一张图片但是leader说死图片不能很好的反应效果我就去找了一下其他的发现threejs可以做但是还要下载其他东西找不到资源（主要是要花钱）心一横直接自己封装一个

我的逻辑如下：

将这种有背景的拆分成两个大块：背景块（也就是背后透明的那部分）和填充块

每大块分为这四个小块下方就称为填充块1，填充块2，填充块3，填充块4（背景块同）

效果如下

基础展示封装代码如下

html

<!-- 手绘柱状图 y开头为背后阴影 f为填充色区域 -->
<!-- 背景块3的颜色直接给在主题区域 -->
<div class="fzt" style="background: rgba(70, 171, 218, 0.2);">
    <!-- 填充块1 -->
    <div class="fhead" style="bottom:3vh;border: 6px solid #4FB3DD;"></div>
    <!-- 填充块2 -->
    <div class="fbody" style="bottom:calc(3vh - 16px);border: 8px solid #4FB3DD;"></div>
    <!-- 填充块4 -->
    <div class="ffoot" style="border: 6px solid #6CCDE5;"></div>
    <!-- 填充块3 -->
    <div class="fmain" style="height: 3vh;background-image: linear-gradient(#44A9DA, #6CCCE5);"></div>
    <!-- 背景块1 -->
    <div class="yhead" style="border: 6px solid rgba(70, 171, 218, 0.34);"></div>
    <!-- 背景块2 -->
    <div class="ybody" style="border: 8px solid rgba(70, 171, 218, 0.2);"></div>
    <!-- 背景块4 -->
    <div class="yfoot" style="border: 6px solid rgba(70, 171, 218, 0.2);"></div>
</div>

css

.fzt {
    height: 6vh;
    width: 40px;
    position: relative;
}

.fmain {
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 10;
}

.yhead {
    height: 0;
    width: 0;
    border-right: 20px solid transparent !important;
    border-left: 20px solid transparent !important;
    border-top: 6px solid transparent !important;
    position: absolute;
    top: -12px;
    z-index: 1;
}

.fhead {
    height: 0;
    width: 0;
    border-right: 20px solid transparent !important;
    border-left: 20px solid transparent !important;
    border-top: 6px solid transparent !important;
    position: absolute;
    z-index: 10;
}

.ybody {
    height: 0;
    width: 0;
    border-right: 20px solid transparent !important;
    border-left: 20px solid transparent !important;
    border-bottom-color: transparent !important;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.fbody {
    height: 0;
    width: 0;
    border-right: 20px solid transparent !important;
    border-left: 20px solid transparent !important;
    border-bottom-color: transparent !important;
    position: absolute;
    left: 0;
    z-index: 100;
}

.yfoot {
    height: 0;
    width: 0;
    border-right: 20px solid transparent !important;
    border-left: 20px solid transparent !important;
    border-bottom-color: transparent !important;
    position: absolute;
    bottom: -12px;
    z-index: 1;
}

.ffoot {
    height: 0;
    width: 0;
    border-right: 20px solid transparent !important;
    border-left: 20px solid transparent !important;
    border-bottom-color: transparent !important;
    position: absolute;
    bottom: -12px;
    z-index: 10;
}

复制代码就可以直接使用了

高度，颜色的在html行内里计算更改就好了

进阶代码

高亮

为了让别人感觉我们封装的不是死的类似于图片这样的我们得加高亮

首先在html里加入这个css

然后css里添加红框框起来的几个这样高亮我们就添加好了

效果如下

鼠标滑到上面之前

鼠标滑到上面之后

这样我们的高亮就搞定了

弹框

css添加

.dialogs {
    border: 1px solid #cccccc;
    background-color: rgba(0, 0, 0, 0.4);
    position: absolute;
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 1000;
}

html添加

js添加

let that = this
let fzt = document.getElementsByClassName("fzt")
for (let i = 0; i < fzt.length; i++) {
    // 鼠标进入时  弹框显示
    fzt[i].addEventListener("mouseover", function (e) {
        if (i == 0) {
            that.isOne = "block"
        } else if (i == 1) {
            that.isTwo = "block"
        } else if (i == 2) {
            that.isThree = "block"
        }

    })
    // 鼠标滑动时  弹框跟着变化
    fzt[i].addEventListener("mousemove", function (e) {
        if (i == 0) {
            that.oneTop = e.layerY - 20 + 'px'
            that.oneLeft = e.layerX + 20 + 'px'
        } else if (i == 1) {
            that.twoTop = e.layerY - 20 + 'px'
            that.twoLeft = e.layerX + 20 + 'px'
        } else if (i == 2) {
            that.threeTop = e.layerY - 20 + 'px'
            that.threeLeft = e.layerX + 20 + 'px'
        }
    })
    // 鼠标移除时  弹框消失
    fzt[i].addEventListener("mouseout", function (e) {
        if (i == 0) {
            that.isOne = "none"
        } else if (i == 1) {
            that.isTwo = "none"
        } else if (i == 2) {
            that.isThree = "none"
        }
    })
}

这样就完成啦！