简单的封装一个柱状图组件
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)
}