js三级垂直组织结构图
页面是以3840*1080px的分辨率设计的，如果对设计宽度有要求的网友请自行修改样式，谢谢！
废话少说先上效果图：
HTML文件：
jiankangzhi_max.css文件：
* {
margin: 0;
padding: 0;
}
body {
color: #fff;
background: #161b38;
background-size: 100% 100%;
font-family: "ruiFont";
font-size: 2rem;
overflow:auto
}
li{
list-style: none
}
.topdata{
text-align:center;
border-bottom:2px solid #04a7f4;
padding-top: 4rem;
padding-bottom: 1rem;
}
.top-title{
border: 1px solid #04a7f4;
padding: 1rem 0;
border-radius: 5px;
width: 60rem;
margin: 0 auto;
}
.parentdata{
float: left;
text-align: center;
border-bottom:2px solid #04a7f4;
padding-bottom: 1rem;
}
.parentinfo{
position: relative;
}
.childdata{
float:left;
}
.childinfo{
position: relative;
width: 5rem;
border:1px solid #235882;
background:#091638;
text-align: center;
margin: 0 auto;
margin-top:2rem;
padding-top: 1rem;
}
.childinfo .child-title{
padding:0 1rem;
}
.childinfo .child-indicate{
padding:1rem 0;
color: #3bdb33
}
.childinfo .child-nums h3{
font-size: 1.4rem;
font-weight: normal;
background:#0d277e;
padding:.2rem 0;
}
.childinfo .child-nums p{
padding:1rem 0;
}
.childacrosstop{
position: absolute;
width: 2px;
height: 2rem;
background: #04a7f4;
top: -2rem;
left: 50%;;
}
.parent-title{
text-align: center;
white-space:nowrap;
}
.parentacrosstop{
position: absolute;
width: 2px;
height: 3rem;
background: #04a7f4;
top: -4rem;
left: 50%;
}
.dispose{
color: #ff2637
}
.disposeing{
color: #f8ee00
}
.undispose{
color: #d002e0
}
js文件： 0 25 126 12
$(function() {
var jiankangzhi = {
init:function() {
this.numData();
},
numData:function(typeid) {
//var address = urlConfig.getJcOverall;
var address = "js/jiankangzhi_max.json";
$.get(address, function(data) {
if (!data || data.retStatus != '000' || mining.isEmpty(data.retBody)) {
return false;
}
if (data) {
//数据处理
var arrData = data.retBody;
var treeData = {};
treeData.today = [];
treeData.thismonth = [];
treeData.history = [];
treeData.daymax = [];
treeData.typeName = [];
treeData.typechildname = [];
var dispose = data.dispose;
var disposeing = data.disposeing;
var undispose = data.undispose;
//获取最底层数据
for(var n=0; n
treeData.today.push(arrData[n].childNodes[i].today);
treeData.thismonth.push(arrData[n].childNodes[i].thismonth);
treeData.history.push(arrData[n].childNodes[i].history);
treeData.daymax.push(arrData[n].childNodes[i].daymax);
}
}
//计算子元素宽度
var childWidth = 100/treeData.typechildname.length;
//循环遍历最底层数据
for(var c=0; c
当日
本月
历史
日峰值
`
}
//获取顶层数据
for(var d=0; d
var parentWidth = (arrData[d].childNodes.length-1)*childWidth;
document.getElementById("dnp").innerHTML+=`
`
}
//显示最顶层数据
var topWidth = (treeData.typechildname.length - arrData[0].childNodes.length/2 - arrData[arrData.length-1].childNodes.length/2)*childWidth;
var topLeft = arrData[0].childNodes.length/2*childWidth;
document.getElementById("dnt").innerHTML+=`
`
}
});
}
};
jiankangzhi.init();
});
json文件：
{
"retBody": [{
"typeName": "类型一",
"childNodes": [{
"typechildname": "稽查超时预警",
"today": "12",
"thismonth": "32",
"history": "122",
"daymax": "12"
}, {
"typechildname": "稽查超时预警",
"today": "12",
"thismonth": "32",
"history": "122",
"daymax": "12"
}, {
"typechildname": "稽查超时预警",
"today": "12",
"thismonth": "32",
"history": "122",
"daymax": "12"
}, {
"typechildname": "稽查超时预警",
"today": "12",
"thismonth": "32",
"history": "122",
"daymax": "12"
}, {
"typechildname": "稽查超时预警",
"today": "12",
"thismonth": "32",
"history": "122",
"daymax": "12"
}, {
"typechildname": "稽查超时预警",
"today": "12",
"thismonth": "32",
"history": "122",
"daymax": "12"
}, {
"typechildname": "稽查超时预警",
"today": "12",
"thismonth": "32",
"history": "122",
"daymax": "12"
}, {
"typechildname": "稽查超时预警",
"today": "12",
"thismonth": "32",
"history": "122",
"daymax": "12"
}, {
"typechildname": "稽查超时预警",
"today": "12",
"thismonth": "32",
"history": "122",
"daymax": "12"
}, {
"typechildname": "稽查超时预警",
"today": "12",
"thismonth": "32",
"history": "122",
"daymax": "12"
}, {
"typechildname": "稽查超时预警",
"today": "12",
"thismonth": "32",
"history": "122",
"daymax": "12"
}]
}, {
"typeName": "类型二",
"childNodes": [{
"typechildname": "稽查超时预警",
"today": "12",
"thismonth": "32",
"history": "122",
"daymax": "12"
}, {
"typechildname": "稽查超时预警",
"today": "12",
"thismonth": "32",
"history": "122",
"daymax": "12"
}]
}, {
"typeName": "类型三",
"childNodes": [{
"typechildname": "稽查超时预警",
"today": "12",
"thismonth": "32",
"history": "122",
"daymax": "12"
}, {
"typechildname": "稽查超时预警",
"today": "12",
"thismonth": "32",
"history": "122",
"daymax": "12"
}, {
"typechildname": "稽查超时预警",
"today": "12",
"thismonth": "32",
"history": "122",
"daymax": "12"
}]
}, {
"typeName": "类型四",
"childNodes": [{
"typechildname": "稽查超时预警",
"today": "12",
"thismonth": "32",
"history": "122",
"daymax": "12"
}, {
"typechildname": "稽查超时预警",
"today": "12",
"thismonth": "32",
"history": "122",
"daymax": "12"
}, {
"typechildname": "稽查超时预警",
"today": "12",
"thismonth": "32",
"history": "122",
"daymax": "12"
}, {
"typechildname": "稽查超时预警",
"today": "12",
"thismonth": "32",
"history": "122",
"daymax": "12"
}, {
"typechildname": "稽查超时预警",
"today": "12",
"thismonth": "32",
"history": "122",
"daymax": "12"
}, {
"typechildname": "稽查超时预警",
"today": "12",
"thismonth": "32",
"history": "122",
"daymax": "12"
}, {
"typechildname": "稽查超时预警",
"today": "12",
"thismonth": "32",
"history": "122",
"daymax": "12"
}, {
"typechildname": "稽查超时预警",
"today": "12",
"thismonth": "32",
"history": "122",
"daymax": "12"
}, {
"typechildname": "稽查超时预警",
"today": "12",
"thismonth": "32",
"history": "122",
"daymax": "12"
}]
}, {
"typeName": "类型五",
"childNodes": [{
"typechildname": "稽查超时预警",
"today": "12",
"thismonth": "32",
"history": "122",
"daymax": "12"
}, {
"typechildname": "稽查超时预警",
"today": "12",
"thismonth": "32",
"history": "122",
"daymax": "12"
}, {
"typechildname": "稽查超时预警",
"today": "12",
"thismonth": "32",
"history": "122",
"daymax": "12"
}, {
"typechildname": "稽查超时预警",
"today": "12",
"thismonth": "32",
"history": "122",
"daymax": "12"
}, {
"typechildname": "稽查超时预警",
"today": "12",
"thismonth": "32",
"history": "122",
"daymax": "12"
}]
}],
"dispose": "1",
"disposeing": "35",
"undispose": "3",
"retStatus": "000"
}