封装组件_有封装过哪些组件-CSDN博客

本文链接：https://blog.csdn.net/weixin_43894722/article/details/84946501

简单的封装一个柱状图组件

html和js分开写：
第一部分
html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>封装柱状图组件</title>
</head>
<body>
<div id="container"></div>
</body>
<script src="../js/Demo02.js"></script>
<script>
    var obj = {
        id: "container", /*容器的id（必填）*/
        borderType: 1, /*1：全包  2：半包  3：没有包裹*/
        borderColor: "red",
        barWidth: 40,
        width: 500, /*容器的宽度*/
        height: 300, /*容器的高度*/
        line: 4, /*分隔线的数量*/
        lineColor: "red", /*分隔线的颜色*/
        lineHeight: 1,
        lineTipColor: "red", /*分割线数据的颜色*/
        title: "GDP对比", /*显示的标题*/
        titleColor: "red", /*标题的颜色*/
        data: [/*源数据（必填）*/
            {
                lable: "威海",
                num: 100,
                color: "blue",
                lableColor: "blue"
            },
            {
                lable: "青岛",
                num: 260,
                color: "red",
                lableColor: "red"
            },
            {
                lable: "烟台",
                num: 180,
                color: "green",
                lableColor: "green"
            }
        ]
    };
    drawBar(obj);
</script>
</html>

第二部分
js

function drawBar(obj) {
    var id = obj.id;
    var borderColor = obj.borderColor || "red";
    var borderType = obj.borderType || 1;
    var width = obj.width || 500;
    var height = obj.height || 300;
    var barWidth = obj.barWidth || 40;
    var lines = obj.line || 4;
    var lineColor = obj.lineColor || "red";
    var lineHeight = obj.lineHeight || "1px";
    var lineTipColor = obj.lineTipColor || "red";
    var titles = obj.title || "";
    var titleColor = obj.titleColor || "red";
    var data = obj.data;
    var container = document.getElementById(id);
    container.style.width = width + "px";
    container.style.height = height + "px";
    container.style.position = "relative";
    container.style.left = "50px";
    container.style.top = "50px";
    if (borderType === 1) {
        container.style.border = "1px solid " + borderColor;
    } else if (borderType === 2) {
        container.style.borderBottom = "1px solid " + borderColor;
        container.style.borderLeft = "1px solid " + borderColor;
    }
    var dateLength = data.length;
    var maxNum = 0;
    for (var i = 0; i < dateLength; i++) {
        if (data[i].num >= maxNum) {
            maxNum = data[i].num;
        }
    }
    maxNum = maxNum * 1.1;
    var perHeight = height / maxNum;
    var barSpace = (width - barWidth * dateLength) / (dateLength + 1);
    for (i = 0; i < dateLength; i++) {
        var lable = document.createElement("div");
        lable.style.color = data[i].lableColor;
        lable.style.position = "absolute";
        lable.innerText = data[i].lable;
        lable.style.width = barWidth + "px";
        lable.style.bottom = "-21px";
        lable.style.textAlign = "center";
        var num = document.createElement("div");
        num.style.color = data[i].color;
        num.style.position = "absolute";
        num.innerText = data[i].num;
        num.style.width = barWidth + "px";
        num.style.top = "-21px";
        num.style.textAlign = "center";
        var bar = document.createElement("div");
        bar.style.width = barWidth + "px";
        bar.style.height = "0px";
        bar.style.backgroundColor = data[i].color;
        bar.style.position = "absolute";
        bar.style.transition = "all ease 1s";
        bar.style.bottom = "0px";
        bar.style.left = (barSpace * (i + 1) + i * barWidth) + "px";
        bar.className = "bar";
        bar.appendChild(lable);
        bar.appendChild(num);
        container.appendChild(bar);
    }
    /*画线*/
    var lineSpace = height / (lines + 1);
    for (var i = 0; i < lines; i++) {
        var line = document.createElement("div");
        line.style.height = lineHeight + "px";
        line.style.width = "500px";
        line.style.zIndex = -1;
        line.style.position = "absolute";
        line.style.backgroundColor = lineColor;
        line.style.bottom = (lineSpace * (i + 1) + i * lineHeight) + "px";
        container.appendChild(line);
    }
    for (i = 0; i < (lines + 2); i++) {
        var tip = document.createElement("div");
        tip.style.width = "40px";
        tip.style.position = "absolute";
        tip.style.color = lineTipColor;
        tip.style.bottom = (lineSpace * i - 10) + "px";
        tip.style.left = "-40px";
        tip.style.transform = "rotate(40deg)";
        var tipSpace = maxNum / (lines + 1);
        tip.innerText = Math.round((tipSpace * i) * 100) / 100;
        container.appendChild(tip);
    }
    var title = document.createElement("div");
    title.style.color = titleColor;
    title.innerText = titles;
    title.style.position = "absolute";
    title.style.right = "10px";
    title.style.top = "-30px";
    container.appendChild(title);
    /*动画效果*/
    var bars = document.getElementsByClassName("bar");
    setTimeout(function () {
        for (i = 0; i < dateLength; i++) {
            bars[i].style.height = perHeight * data[i].num + "px";
        }
    }, 500)
}