html简易流程图

效果图
在这里插入图片描述
使用html+css+js，无图片，没用Canvas

demo:

<!DOCTYPE html>
<html>
<head><link href="draw.css" rel="stylesheet" /><script src="draw.js" type="text/javascript"></script>
</head>
<body><div class="diamond" style="top:100px;left: 100px;"><span class="diamond-text">开始</span></div><!-- 下箭头 --><div class="arrow-down" style="top:195px;left:140px;"><span></span></div><div class="rectangle" style="top:275px;left: 100px;"><span class="rectangle-text">步骤一</span></div><div class="arrow-down" style="top:325px;left:140px;"><span></span></div><div class="rectangle" style="top:405px;left: 100px;"><span class="rectangle-text">步骤二</span></div><div class="arrow-down" style="top:455px;left:140px;"><span></span></div><div class="diamond" style="top:550px;left: 100px;"><span class="diamond-text">分叉节点</span></div><div><div class="arrow-down" style="top:645px;left:140px;"><span></span></div><div class="rectangle" style="top:725px;left: 100px;"><span class="rectangle-text">步骤三</span></div></div><div><div class="arrow-horizontal-down" style="top:590px;left:195px;"><div></div><span></span></div><div class="rectangle" style="top:725px;left: 230px;"><span class="rectangle-text">步骤四</span></div></div></body>
</html>

css:

/* 椭圆 */
.ellipse {width: 100px;height: 50px;background-color: #6495ED;border-radius: 100px;text-align: center;position: absolute;
}.ellipse-text {width: 80px;height: 50px;margin-top: 10px;
}/* 菱形，长宽91.28 */
.diamond {width: 80px;height: 80px;transform: rotate(45deg);background-color: #bfa;position: absolute;
}.diamond-text{width: 60px;margin-top: 10px;display: inline-block;transform: rotate(-45deg);text-align: center;
}/* 长方形 */
.rectangle{width: 92px;height: 50px;border: 1px;border-color: black;background-color: aquamarine;text-align: center;position: absolute;
}/* 向下箭头 */
.arrow-down {width: 2px;height: 80px;background-color: black;position: absolute;
}.arrow-down span {width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-top: 10px solid black;position: relative;top:81px;left:-4px;
}/* 折线箭头 */
.arrow-horizontal-down {width: 150px;height: 2px;background-color: black;position: absolute;z-index: -1;
}.arrow-horizontal-down div{width: 2px;height: 125px;left:150px;background-color: black;position: relative;
}.arrow-horizontal-down span {width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-top: 10px solid black;position: relative;top:10px;left:146px;
}/* 横线 */
.horizontal-line{width: 100px;height: 2px;background-color: black;position: absolute;z-index: -1;
}

js 代码 可以动态生成流程图


// json 节点数据
// let data = [{"id":0,"name":"开始","type":"diamond","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1369,1370,1376,1380,1412,1413,1553,2120],"LengtheningTime":0},{"id":1369,"name":"部门负责人I","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1371],"LengtheningTime":0},{"id":1370,"name":"部门负责人II","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1372],"LengtheningTime":0},{"id":1371,"name":"逐级审批I","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1402],"LengtheningTime":0},{"id":1372,"name":"逐级审批II","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1393],"LengtheningTime":0},{"id":1374,"name":"人力与行政负责人II","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1982],"LengtheningTime":0},{"id":1375,"name":"总经理II","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1575],"LengtheningTime":0},{"id":1376,"name":"部门负责人III","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1377],"LengtheningTime":0},{"id":1377,"name":"逐级审批III","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1395],"LengtheningTime":0},{"id":1378,"name":"人力与行政负责人III","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1983],"LengtheningTime":0},{"id":1380,"name":"部门负责人IV","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1381],"LengtheningTime":0},{"id":1381,"name":"逐级审批IV","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1396],"LengtheningTime":0},{"id":1382,"name":"人力与行政负责人lV","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1985],"LengtheningTime":0},{"id":1393,"name":"上级审批II","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1929],"LengtheningTime":0},{"id":1395,"name":"上级审批III","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1930],"LengtheningTime":0},{"id":1396,"name":"上级审批IV","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1931],"LengtheningTime":0},{"id":1402,"name":"上级审批l","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1928],"LengtheningTime":0},{"id":1403,"name":"管理员处理","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[],"LengtheningTime":0},{"id":1404,"name":"程序中心总经理I","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1701],"LengtheningTime":0},{"id":1405,"name":"程序中心总经理II","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1702],"LengtheningTime":0},{"id":1406,"name":"程序中心总经理III","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1703],"LengtheningTime":0},{"id":1407,"name":"程序中心总经理IV","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1704],"LengtheningTime":0},{"id":1412,"name":"总经理（002）","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1578],"LengtheningTime":0},{"id":1413,"name":"总经理1（002）","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1699],"LengtheningTime":0},{"id":1552,"name":"人力与行政负责人","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1609],"LengtheningTime":0},{"id":1553,"name":"部门负责人V","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1554],"LengtheningTime":0},{"id":1554,"name":"逐级审批V","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1555],"LengtheningTime":0},{"id":1555,"name":"上级审批V","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1932],"LengtheningTime":0},{"id":1556,"name":"程序中心总经理V","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1705],"LengtheningTime":0},{"id":1557,"name":"人力与行政负责人V","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1986],"LengtheningTime":0},{"id":1575,"name":"管理员处理","type":"ellipse","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[],"LengtheningTime":0},{"id":1578,"name":"管理员处理","type":"ellipse","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[],"LengtheningTime":0},{"id":1579,"name":"管理员处理","type":"ellipse","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[],"LengtheningTime":0},{"id":1609,"name":"综合业务负责人","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1579],"LengtheningTime":0},{"id":1612,"name":"综合业务负责人I","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1974],"LengtheningTime":0},{"id":1613,"name":"综合业务负责人II","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1375],"LengtheningTime":0},{"id":1696,"name":"HRBPII","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1374],"LengtheningTime":0},{"id":1697,"name":"HRBPIII","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1378],"LengtheningTime":0},{"id":1698,"name":"HRBPIV","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1382],"LengtheningTime":0},{"id":1699,"name":"人力资源备案","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1552],"LengtheningTime":0},{"id":1700,"name":"HRBPV","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1557],"LengtheningTime":0},{"id":1701,"name":"发行中心负责人I","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1612],"LengtheningTime":0},{"id":1702,"name":"发行中心负责人II","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1696],"LengtheningTime":0},{"id":1703,"name":"发行中心负责人III","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1697],"LengtheningTime":0},{"id":1704,"name":"发行中心负责人IV","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1698],"LengtheningTime":0},{"id":1705,"name":"发行中心负责人V","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1700],"LengtheningTime":0},{"id":1928,"name":"美术负责人I","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2265],"LengtheningTime":0},{"id":1929,"name":"美术负责人II","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2266],"LengtheningTime":0},{"id":1930,"name":"美术负责人III","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2267],"LengtheningTime":0},{"id":1931,"name":"美术负责人IV","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2268],"LengtheningTime":0},{"id":1932,"name":"美术负责人V","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2269],"LengtheningTime":0},{"id":1974,"name":"HRBPI","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1975],"LengtheningTime":0},{"id":1975,"name":"人力与行政负责人I","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1981],"LengtheningTime":0},{"id":1976,"name":"人力资源备案II","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2067],"LengtheningTime":0},{"id":1979,"name":"人力资源备案IV","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2175],"LengtheningTime":0},{"id":1980,"name":"人力资源备案V","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2176],"LengtheningTime":0},{"id":1981,"name":"史延斌I","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1403],"LengtheningTime":0},{"id":1982,"name":"史延斌II","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1976],"LengtheningTime":0},{"id":1983,"name":"史延斌III","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2068],"LengtheningTime":0},{"id":1984,"name":"人力资源备案III","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2174],"LengtheningTime":0},{"id":1985,"name":"史延斌IV","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1979],"LengtheningTime":0},{"id":1986,"name":"史延斌V","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1980],"LengtheningTime":0},{"id":2067,"name":"部门助理备案","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1613],"LengtheningTime":0},{"id":2068,"name":"部门助理备案","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1984],"LengtheningTime":0},{"id":2107,"name":"程序中心副总经理I","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1404],"LengtheningTime":0},{"id":2108,"name":"程序中心副总经理II","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1405],"LengtheningTime":0},{"id":2109,"name":"程序中心副总经理III","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1406],"LengtheningTime":0},{"id":2110,"name":"程序中心副总经理IV","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1407],"LengtheningTime":0},{"id":2111,"name":"程序中心副总经理V","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1556],"LengtheningTime":0},{"id":2120,"name":"程序中心副总经理","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2122],"LengtheningTime":0},{"id":2122,"name":"程序BP1","type":"diamond","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2123,2125,2159,2161],"LengtheningTime":0},{"id":2123,"name":"人力与行政负责人","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2179],"LengtheningTime":0},{"id":2125,"name":"程序中心总经理","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2137],"LengtheningTime":0},{"id":2126,"name":"总经理审批","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2127],"LengtheningTime":0},{"id":2127,"name":"部门助理审批","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2128],"LengtheningTime":0},{"id":2128,"name":"管理员处理","type":"ellipse","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[],"LengtheningTime":0},{"id":2137,"name":"人力与行政负责人","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2138],"LengtheningTime":0},{"id":2138,"name":"综合业务负责人","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2126],"LengtheningTime":0},{"id":2154,"name":"肖洲","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2503],"LengtheningTime":0},{"id":2155,"name":"肖洲","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2504],"LengtheningTime":0},{"id":2156,"name":"肖洲","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2505],"LengtheningTime":0},{"id":2157,"name":"肖洲","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2506],"LengtheningTime":0},{"id":2158,"name":"肖洲","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2507],"LengtheningTime":0},{"id":2159,"name":"人力资源与行政负责人","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2160],"LengtheningTime":0},{"id":2160,"name":"人力资源备案3","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2180],"LengtheningTime":0},{"id":2161,"name":"程序中心总经理1","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2162],"LengtheningTime":0},{"id":2162,"name":"人力与行政负责人","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2163],"LengtheningTime":0},{"id":2163,"name":"综合业务负责人","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2164],"LengtheningTime":0},{"id":2164,"name":"总经理审批","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2165],"LengtheningTime":0},{"id":2165,"name":"部门助理审批","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2166],"LengtheningTime":0},{"id":2166,"name":"人力资源备案","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2181],"LengtheningTime":0},{"id":2174,"name":"管理员处理","type":"ellipse","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[],"LengtheningTime":0},{"id":2175,"name":"管理员处理","type":"ellipse","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[],"LengtheningTime":0},{"id":2176,"name":"管理员处理","type":"ellipse","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[],"LengtheningTime":0},{"id":2179,"name":"管理员处理","type":"ellipse","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[],"LengtheningTime":0},{"id":2180,"name":"管理员处理","type":"ellipse","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[],"LengtheningTime":0},{"id":2181,"name":"管理员处理","type":"ellipse","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[],"LengtheningTime":0},{"id":2265,"name":"财务与法务负责人I","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2154],"LengtheningTime":0},{"id":2266,"name":"财务与法务负责人II","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2155],"LengtheningTime":0},{"id":2267,"name":"财务与法务负责人III","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2156],"LengtheningTime":0},{"id":2268,"name":"财务与法务负责人IV","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2157],"LengtheningTime":0},{"id":2269,"name":"财务与法务负责人V","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2158],"LengtheningTime":0},{"id":2503,"name":"BP代批（I）","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2107],"LengtheningTime":0},{"id":2504,"name":"BP代批（II）","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2108],"LengtheningTime":0},{"id":2505,"name":"BP代批（III）","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2109],"LengtheningTime":0},{"id":2506,"name":"BP代批（IV）","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2110],"LengtheningTime":0},{"id":2507,"name":"BP代批（V）","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2111],"LengtheningTime":0}]
let data = [{"id":0,"name":"开始","type":"ellipse","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[1487],"LengtheningTime":0},{"id":1487,"name":"预算组审批","type":"diamond","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[1488,1502,1999],"LengtheningTime":0},{"id":1488,"name":"上级审批01","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[1490],"LengtheningTime":0},{"id":1490,"name":"上级审批02","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[1495],"LengtheningTime":0},{"id":1492,"name":"总经理审批","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[1500],"LengtheningTime":0},{"id":1493,"name":"财务会计审批","type":"diamond","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[1794,1795],"LengtheningTime":0},{"id":1494,"name":"财务负责人0","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[1590],"LengtheningTime":0},{"id":1495,"name":"上级审批03","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[1496],"LengtheningTime":0},{"id":1496,"name":"上级审批04","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[1937],"LengtheningTime":0},{"id":1497,"name":"程序中心总经理","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[1678],"LengtheningTime":0},{"id":1500,"name":"执行中1","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[],"LengtheningTime":0},{"id":1502,"name":"上级审批(001)","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[1766],"LengtheningTime":0},{"id":1503,"name":"财务会计审核","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[1504],"LengtheningTime":0},{"id":1504,"name":"财务总监","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[1598],"LengtheningTime":0},{"id":1590,"name":"执行中0","type":"ellipse","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[],"LengtheningTime":0},{"id":1591,"name":"执行中","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[],"LengtheningTime":0},{"id":1598,"name":"财务负责人","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[1591],"LengtheningTime":0},{"id":1599,"name":"财务负责人","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[1492],"LengtheningTime":0},{"id":1635,"name":"综合业务负责人","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[1493],"LengtheningTime":0},{"id":1678,"name":"发行中心负责人","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[1635],"LengtheningTime":0},{"id":1766,"name":"综合业务负责人","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[1503],"LengtheningTime":0},{"id":1794,"name":"财务总监审批0","type":"ellipse","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[1494],"LengtheningTime":0},{"id":1795,"name":"财务总监审批","type":"ellipse","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[1599],"LengtheningTime":0},{"id":1937,"name":"美术负责人","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[2275],"LengtheningTime":0},{"id":1999,"name":"上级审批1","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[2000],"LengtheningTime":0},{"id":2000,"name":"上级审批2","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[2001],"LengtheningTime":0},{"id":2001,"name":"上级审批3","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[2532],"LengtheningTime":0},{"id":2002,"name":"财务会计审批1","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[2003],"LengtheningTime":0},{"id":2003,"name":"财务总监审批1","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[2004],"LengtheningTime":0},{"id":2004,"name":"财务负责人审批","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[2005],"LengtheningTime":0},{"id":2005,"name":"执行中11","type":"ellipse","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[],"LengtheningTime":0},{"id":2116,"name":"程序中心副总经理","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[1497],"LengtheningTime":0},{"id":2144,"name":"程序三部预算","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[2202],"LengtheningTime":0},{"id":2202,"name":"肖洲","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[2493],"LengtheningTime":0},{"id":2203,"name":"程序副总经理预算","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[2116],"LengtheningTime":0},{"id":2275,"name":"财务与法务负责人","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[2144],"LengtheningTime":0},{"id":2493,"name":"二级部门负责人审批","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[2203],"LengtheningTime":0},{"id":2532,"name":"上级审批4","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[2533],"LengtheningTime":0},{"id":2533,"name":"美术负责人1","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[2534],"LengtheningTime":0},{"id":2534,"name":"财务与法务负责人1","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[2535],"LengtheningTime":0},{"id":2535,"name":"程序三部预算1","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[2536],"LengtheningTime":0},{"id":2536,"name":"肖洲1","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[2537],"LengtheningTime":0},{"id":2537,"name":"二级部门负责人审批1","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[2538],"LengtheningTime":0},{"id":2538,"name":"程序副总经理预算1","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[2539],"LengtheningTime":0},{"id":2539,"name":"程序中心副总经理1","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[2540],"LengtheningTime":0},{"id":2540,"name":"程序中心总经理1","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[2541],"LengtheningTime":0},{"id":2541,"name":"发行中心负责人1","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[2542],"LengtheningTime":0},{"id":2542,"name":"综合业务负责人1","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[2002],"LengtheningTime":0}]// 偏移数值
let offsetNum = {ellipseTop :51,ellipseLeft :40,diamondTop :95,diamondLeft :40,rectangleTop :50,rectangleLeft :40,arrowTop :80,arrowLeft :0,brokenLineTop:135,brokenLineLeft:80
}// 开始创建
function BeginDraw(){CreateNode(data[0],100,100);
}// 循环创建子节点
function CreateChildNode(lastNode,lastTop,lastLeft){// 一个子节点if(lastNode.children.length > 0){CreateVerticalArrow(lastNode,lastTop,lastLeft);}// 多个子节点if(lastNode.children.length > 1){let beginTop = GetOffsetTop(lastNode) / 2 + lastTop - 10;let beginLeft = GetOffsetLeft(lastNode) * 2 + lastLeft + 15;for (let c = 1;c < lastNode.children.length;c++) {CreateBrokenArrow(beginTop,beginLeft,lastNode.children[c]);beginLeft = beginLeft + 140;}}
}// 创建节点
function CreateNode(node,top,left){let div = document.createElement("div");div.className = node.type;div.style.top = top + "px";div.style.left = left + "px";let span = document.createElement("span");span.innerText = node.name;span.className = node.type + "-text";div.appendChild(span);div.onclick = function() {// 使用eval执行方法eval(node.click);};document.body.append(div);CreateChildNode(node,top,left);
}// 创建竖线箭头+节点
function CreateVerticalArrow(lastNode,nodeTop,nodeLeft){// 竖线箭头toplet arrowtop = GetOffsetTop(lastNode) + nodeTop;// 竖线箭头leftlet arrowleft = GetOffsetLeft(lastNode) + nodeLeft;let div = document.createElement("div");div.className = "arrow-down";div.style.top = arrowtop + "px";div.style.left = arrowleft + "px";let span = document.createElement("span");div.appendChild(span);document.body.append(div);for (let key in data) {if(lastNode.children[0] == data[key].id){// 新节点toplet newNodeTop = arrowtop + offsetNum.arrowTop;if(data[key].type == "diamond"){newNodeTop = newNodeTop + 15;}CreateNode(data[key],newNodeTop,nodeLeft);}}
}// 创建折线箭头+节点
function CreateBrokenArrow(arrowTop,arrowLeft,childnum){let div = document.createElement("div");div.className = "arrow-horizontal-down";div.style.top = arrowTop + "px";div.style.left = (arrowLeft - 70) + "px";let ndiv = document.createElement("div");let span = document.createElement("span");div.appendChild(ndiv);div.appendChild(span);document.body.append(div);for (let key in data) {if(childnum == data[key].id){// 新节点toplet newNodeTop = arrowTop + offsetNum.brokenLineTop;// 新节点Leftlet newNodeLeft = arrowLeft + offsetNum.brokenLineLeft - GetOffsetLeft(data[key]);if(data[key].type == "diamond"){newNodeTop = newNodeTop + 15;}CreateNode(data[key],newNodeTop,newNodeLeft);}}
}// 获取Top偏移量
function GetOffsetTop(lastNode){if(lastNode.type == "arrow"){return offsetNum.arrowTop;}else if(lastNode.type == "diamond"){return offsetNum.diamondTop;}else if(lastNode.type == "rectangle"){return offsetNum.rectangleTop;}else if(lastNode.type == "ellipse"){return offsetNum.ellipseTop;}return 100;
}// 获取Left偏移量
function GetOffsetLeft(lastNode){if(lastNode.type == "arrow"){return offsetNum.arrowLeft;}else if(lastNode.type == "diamond"){return offsetNum.diamondLeft;}else if(lastNode.type == "rectangle"){return offsetNum.rectangleLeft;}else if(lastNode.type == "ellipse"){return offsetNum.ellipseLeft;}return 0;
}

动态生成效果
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.xdnf.cn/news/550.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

51单片机教程（一）- 开发环境搭建

51单片机教程（一）- 开发环境搭建

1、开发环境搭建 1 环境准备 1 单片机介绍 单片机&#xff08;Single-Chip Microcomputer&#xff0c;简称MCU&#xff09;是一种集成电路芯片&#xff0c;是采用超大规模集成电路技术把具有数据处理能力的中央处理器CPU、随机存储器RAM、只读存储器ROM、多种I/O口和中断系统、…
阅读更多...
【1个月速成Java】基于Android平台开发个人记账app学习日记——第3天，分析项目结构

【1个月速成Java】基于Android平台开发个人记账app学习日记——第3天，分析项目结构

24.11.02 1.分析项目初始结构 IDEA有2种查看Android项目模式&#xff0c;一种是原始的projects模式&#xff0c;重点介绍这个模式下的项目结构 Android模式下的项目结构 这个是经过Android处理后的&#xff0c;并不是真正的项目结构&#xff0c;但是看着很简洁 projects模式…
阅读更多...
chrome编辑替换js文件的图文教程

chrome编辑替换js文件的图文教程

一、找到要修改替换的js文件 二、将文件保存到本地 三、在本地新建一个文件 路径最好跟你要替换的文件的路径保持一致&#xff0c; 四、选中js文件替换 回到原文件右击选择保存并覆盖 点击完保存并覆盖之后回到替换的新文件中&#xff0c;在自动生成的webpack文件中对文件进…
阅读更多...
大学城水电管理：Spring Boot应用案例

大学城水电管理：Spring Boot应用案例

1系统概述 1.1 研究背景 随着计算机技术的发展以及计算机网络的逐渐普及&#xff0c;互联网成为人们查找信息的重要场所&#xff0c;二十一世纪是信息的时代&#xff0c;所以信息的管理显得特别重要。因此&#xff0c;使用计算机来管理大学城水电管理系统的相关信息成为必然。开…
阅读更多...
硅谷15菜单权限

硅谷15菜单权限

菜单权限 15.1 路由的拆分 15.1.1 路由分析 菜单的权限: 超级管理员账号:admin atguigu123 拥有全部的菜单、按钮的权限 飞行员账号 硅谷333 111111 不包含权限管理模块、按钮的权限并非全部按钮 同一个项目&#xff1a;不同人(职位是不一样的,他能访问到的菜单、…
阅读更多...
3D Gaussian Splatting代码详解（二）：模型构建

3D Gaussian Splatting代码详解（二）：模型构建

3 模型构建 gaussians GaussianModel(dataset.sh_degree) 3.1 初始化函数 __init__ 构造函数 构造函数 __init__ 的主要作用是初始化 3D 高斯模型的各项参数和激活函数&#xff0c;用于生成 3D 空间中的高斯表示。 初始化球谐函数的参数&#xff1a; self.active_sh_degre…
阅读更多...
初知C++：继承

初知C++：继承

文章目录 1. 继承的概念及定义1.1 继承的概念1.2 继承定义1.2.1 定义格式1.2.2 继承基类成员访问方式的变化 2.基类和派生类间的转换3. 继承中的作用域3.1 隐藏规则3.2 考察继承作用域相关选择题 4. 派生类的默认成员函数4.1 4个常见默认成员函数4.2实现一个不能被继承的类 5. …
阅读更多...
Java实战项目-基于 SpringBoot+Vue 的医院管理系统

Java实战项目-基于 SpringBoot+Vue 的医院管理系统

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…
阅读更多...
二分，CF 2036 G - Library of Magic

二分，CF 2036 G - Library of Magic

目录 一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 二、解题报告 1、思路分析 2、复杂度 3、代码详解 一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 G - Library of Magic 二、解题报告 1、思路分析 首先 query(1, n) a ^…
阅读更多...
【测试平台】打包 子节点ios环境配置

【测试平台】打包 子节点ios环境配置

主要记录如何配置ios打包机环境&#xff0c;ios环境相对来说比较简单的&#xff0c;研发配置好证书可以本地打包&#xff0c;接入流程比较简单了。 打包机系统升级 1.升级mac OS系统 一般升级好几个小时&#xff0c;可以晚上下载好 2.下载xcode并安装 Appstroe 下载安装xco…
阅读更多...
矩阵的奇异值分解SVD

矩阵的奇异值分解SVD

为了论述矩阵的奇异值与奇异值分解!需要下面的结论!
阅读更多...
parted 磁盘分区

parted 磁盘分区

目录 磁盘格式磁盘分区文件系统挂载使用扩展 - parted、fdisk、gdisk 区别 磁盘格式 parted /dev/vdcmklabel gpt # 设置磁盘格式为GPT p # 打印磁盘信息此时磁盘格式设置完成&#xff01; 磁盘分区 开始分区&#xff1a; mkpart data_mysql # 分区名&…
阅读更多...
【Linux】权限管理

【Linux】权限管理

目录 一、shell&#xff1a; 二、权限&#xff1a; 1、用户理解&#xff1a; 2、文件权限&#xff1a; 3、目录权限&#xff1a; 4、权限掩码&#xff1a; 5、粘滞位&#xff1a; 一、shell&#xff1a; Linux操作系统不仅仅是指Linux内核&#xff0c;而是指基于Linux内核…
阅读更多...
【C++ | 数据结构】八大常用排序算法详解

【C++ | 数据结构】八大常用排序算法详解

1. 排序的稳定性 排序是我们生活中经常会面对的问题&#xff0c;小朋友站队的时候会按照从矮到高的顺序排列&#xff1b;老师查看上课出勤情况时&#xff0c;会按照学生的学号点名&#xff1b;高考录取时&#xff0c;会按照成绩总分降序依次录取等等。那么对于排序它是如何定义…
阅读更多...
PG数据库 jsonb字段 模糊查询

PG数据库 jsonb字段 模糊查询

背景&#xff1a; 项目由于多语言的设计&#xff0c;将字段设置成json字段类型&#xff0c;同时存储中文和英文 页面上通过输入框实现模糊的查询 一、表结构&#xff1a;name字段设置jsonb类型 二、表数据 3、Mybatis编写sql select pp.name ->>zh-CN as pmsProductNam…
阅读更多...
webpack使用详解

webpack使用详解

摘要&#xff1a;webpack作为一款主流的构建工具&#xff0c;对比后来者Vite虽然存在一些缺点&#xff0c;例如启动慢&#xff0c;配置复杂等。在很多项目中使用依然基于webpack构建&#xff0c;有必要掌握其概念、构建流程和配置方法。 1 webpack概述 1.1 基本概念 webpack …
阅读更多...
【flutter列表播放器】

【flutter列表播放器】

视频播放器类 import package:jade/configs/PathConfig.dart; import package:jade/utils/Utils.dart; import package:model/user_share/reward_pool_model.dart; import package:pages/user_share/view/user_share_article_detail_page.dart; import package:util/navigato…
阅读更多...
Ubuntu Linux

Ubuntu Linux

起源与背景 Ubuntu起源于南非&#xff0c;其名称“Ubuntu”来源于非洲南部祖鲁语或豪萨语&#xff0c;意为“人性”、“我的存在是因为大家的存在”&#xff0c;这体现了非洲传统的一种价值观。Ubuntu由南非计算机科学家马克沙特尔沃斯&#xff08;Mark Shuttleworth&#xff…
阅读更多...
ctfshow web入门文件上传总结

ctfshow web入门文件上传总结

1.web151 前端验证 前端验证&#xff0c;修改html代码&#xff0c;上传还有一句话木马的php文件,之后用蚁剑连接即可找到flag <?php eval($_POST[1])?>2.web152 后端验证&#xff0c;修改mime类型(content-type) burp抓包&#xff0c;修改content-type为image/png …
阅读更多...
18.04Ubuntu网络一直connecting的问题

18.04Ubuntu网络一直connecting的问题

有段时间没登VMware的Ubuntu了&#xff0c;就知道这个Ubuntu一登必有问题。 如果你的网络一直connecting 设置成桥接模式就可以了&#xff01;
阅读更多...
最新文章

Copyright @ 2022~2023