js三级垂直组织结构图
页面是以3840*1080px的分辨率设计的，如果对设计宽度有要求的网友请自行修改样式，谢谢！
废话少说先上效果图：
HTML文件：
<!DOCTYPE html>
<html lang="en" style="">
<head>
<meta charset="utf-8" />
<title>健康值_放大</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="css/public.css">
<link rel="stylesheet" type="text/css" href="css/jiankangzhi_max.css">
</head>
<body>
<div class="data" id="dnt"></div>
<div class="data" id="dnp"></div>
<div class="clear"></div>
<div class="data" id="dnc"></div>
<script src="js/common/jquery.min.js"></script>
<script src="js/common/init.js"></script>
<script src="js/jiankangzhi_max.js"></script>
</body>
</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文件：
$(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<arrData.length;n++){
for(var i=0;i<arrData[n].childNodes.length;i++){
treeData.typechildname.push(arrData[n].childNodes[i].typechildname);
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<treeData.typechildname.length; c++){
document.getElementById("dnc").innerHTML+=`
<div class="childdata" style="width:`+childWidth+`%;">
<div class="childinfo">
<div class="child-title">`+treeData.typechildname[c]+`</div>
<div class="child-indicate">●</div>
<ul class="child-nums">
<li><h3>当日</h3><p>0</p></li>
<li><h3>本月</h3><p>25</p></li>
<li><h3>历史</h3><p>126</p></li>
<li><h3>日峰值</h3><p>12</p></li>
</ul>
<div class="childacrosstop"></div>
</div>
</div>
`
}
//获取顶层数据
for(var d=0; d<arrData.length;d++){
treeData.typeName.push(arrData[d].typeName);
var parentWidth = (arrData[d].childNodes.length-1)*childWidth;
document.getElementById("dnp").innerHTML+=`
<div class="parentdata" style="width:`+parentWidth+`%; margin:4rem `+childWidth/2+`% 0">
<div class="parentinfo">
<div class="parent-title">`+treeData.typeName[d]+`</div>
<div class="parentacrosstop"></div>
</div>
</div>
`
}
//显示最顶层数据
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+=`
<div class="topdata" style="width:`+topWidth+`%;margin-left:`+topLeft+`%">
<div class="top-title">当前 待处置 `+dispose+` <span class="dispose">●</span> 处置中 `+disposeing+` <span class="disposeing">●</span> 处置超时 `+undispose+` <span class="undispose">●</span></div>
</div>
`
}
});
}
};
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"
}