js柱状图带数字

最新推荐文章于 2023-06-14 12:38:59 发布

杨杨得亿~

最新推荐文章于 2023-06-14 12:38:59 发布

阅读量271

点赞数

文章标签：百分比布局柱状图数字定位 Flexbox CSS样式

本文链接：https://blog.csdn.net/ys_dd/article/details/120017339

版权

效果图：

主要是数字，处理的不好容易占每一列柱形的高度。

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .mask-per-up {
            height: 200px;
            width: 445px;
            display: flex;
            align-items: flex-end;
            margin-top: 200px;
        }

        .every-per {
            width: 60px;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            position: relative;
            margin-right: 20px;
        }

        .pernum {
            color: #59d3ff;
            font-size: 22px;
            position: absolute;
            left: 50%;
            top: -30px;
            transform: translateX(-50%);
        }

        .pernum em {
            font-style: normal;
            font-size: 13px;
        }

        .every-per-real {
            width: 58px;
            height: 100%;
            border: 1px solid #59d3ff;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            border-bottom: none;
            display: flex;
            justify-content: flex-end;
            align-items: flex-end;
        }

        .every-per-real::after {
            width: 90%;
            height: 98%;
            background-color: #dbf1f9;
            display: block;
            content: '';
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }
    </style>
</head>

<body>
    <div class="mask-per-up">
        <div class="every-per" style="height: 70%;">
            <div class="pernum">70<em>%</em></div>
            <div class="every-per-real"></div>
        </div>
        <div class="every-per" style="height: 20%;">
            <div class="pernum">20<em>%</em></div>
            <div class="every-per-real"></div>
        </div>
        <div class="every-per" style="height: 90%;">
            <div class="pernum">90<em>%</em></div>
            <div class="every-per-real"></div>
        </div>
        <div class="every-per">
            <div class="pernum">100<em>%</em></div>
            <div class="every-per-real"></div>
        </div>
    </div>
</body>

</html>

主要让每一行的高度都是动态的，即.every-per的高度，高度等于百分比，再让数字脱离标准文档流，数字就不会占位置了。