封装组件

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

html和js分开写：
第一部分
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)
}