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.rhkb.cn/news/464278.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

人工智能原理实验一：知识的表示与推理实验

人工智能原理实验一：知识的表示与推理实验

一、实验目的 本实验课程是计算机、智能、物联网等专业学生的一门专业课程&#xff0c;通过实验&#xff0c;帮助学生更好地掌握人工智能相关概念、技术、原理、应用等&#xff1b;通过实验提高学生编写实验报告、总结实验结果的能力&#xff1b;使学生对智能程序、智能算法等有…
阅读更多...
针对解决前后端BUG的个人笔记

针对解决前后端BUG的个人笔记

1-IDEA Q&#xff1a;Required Java version 17 is not supported by SDK 1.8. The maximum supported Java version is 8. A: 我们只知道IDEA页面创建Spring项目&#xff0c;其实是访问spring initializr去创建项目。故我们可以通过阿里云国服去间接创建Spring项目。将https…
阅读更多...
Linux操作系统 ------（3.文本编译器Vim）

Linux操作系统 ------（3.文本编译器Vim）

目录 1.前言 2.本章学习目标 3.vim的三种工作模式 3.1一般模式‌ 3.2编辑模式‌ 3.3命令行模式‌ 4.运行vim 5.vim 不同工作模式下的常见命令 6.一般模式下的功能键 6.1移动光标类 6.2删除、复制和粘贴类 6.3查找替换类 7.从一般模式进入编辑模式 8.命令行模式下的…
阅读更多...
4种鼓励创业创新的方法

4种鼓励创业创新的方法

随着市场趋于饱和&#xff0c;许多企业&#xff0c;尤其是初创企业&#xff0c;很难在竞争中保持领先地位。技术为企业彻底改变其营销和管理策略铺平了道路。另一个经过实践检验的成功渗透特定市场的方法是在办公室内部激发创新&#xff0c;从员工到品牌皆如此。 那么究竟如何…
阅读更多...
【华为HCIP实战课程31（完整版）】中间到中间系统协议IS-IS路由汇总详解，网络工程师

【华为HCIP实战课程31（完整版）】中间到中间系统协议IS-IS路由汇总详解，网络工程师

一、IS-IS的汇总 1、可以有效减少在LSP中发布的路由条目，减小对系统资源的占用。 2、会减少LSP报文的扩散，接收到该LSP报文的其他设备路由表中只会出现一条聚合路由。 3、可以避免网络中的路由震荡，提高了网络的稳定性。 4、被聚合的路由可以是IS-IS路由，也可以是被引入…
阅读更多...
后端java——如何为你的网页设置一个验证码

后端java——如何为你的网页设置一个验证码

目录 1、工具的准备 2.基本方法 3.实现类 4.实践 HTML文件&#xff1a; Java文件1:创建验证码 Java文件2:验证验证码 本文通过HUTOOL实现&#xff1a;Hutool参考文档Hutool&#xff0c;Java工具集https://hutool.cn/docs/#/ 1、工具的准备 如果我们通过hutool来实现这个…
阅读更多...
1、Qt6 Quick 简介

1、Qt6 Quick 简介

一、Qt6 Quick 简介 1、Qt Quick简介 Qt Quick 是 Qt 6 中使用的用户界面技术的总称。它是在 Qt 4 中引入的&#xff0c;现在在 Qt 6 中进行了扩展。Qt Quick 本身是几种技术的集合&#xff1a; QML——用户界面标记语言JavaScript - 动态脚本语言Qt C - 高度可移植的增强型…
阅读更多...
微服务系列二：跨微服务请求优化，注册中心+OpenFeign

微服务系列二：跨微服务请求优化，注册中心+OpenFeign

目录 前言 一、纯 RestTemplate 方案存在的缺陷 二、注册中心模式介绍 三、注册中心技术&#xff1a;Nacos 3.1 Docker部署Nacos 3.2 服务注册 3.3 服务发现 四、代码优化&#xff1a;OpenFeign工具 4.1 OpenFeign快速入门 4.2 连接池的必要性 4.3 抽取服务、最佳实…
阅读更多...
andrular输入框input监听值传递

andrular输入框input监听值传递

效果图&#xff1a; step1: E:\projectgood\ajnine\untitled4\src\app\apple\apple.component.html <button mat-button (click)“openDialog()”>Open dialog step2: E:\projectgood\ajnine\untitled4\src\app\apple\apple.component.ts import {Component, inject}…
阅读更多...
像`npm i`作为`npm install`的简写一样，使用`pdm i`作为`pdm install`的简写

像`npm i`作为`npm install`的简写一样，使用`pdm i`作为`pdm install`的简写

只需安装插件pdm-plugin-i即可&#xff1a; pdm plugin add pdm-plugin-i 然后就可以愉快地pdm i了&#xff0c;例如&#xff1a; git clone https://github.com/waketzheng/fast-dev-cli cd fast-dev-cli python -m pip install --user pipx pipx install pdm pdm plugin a…
阅读更多...
qt QTabWidget详解

qt QTabWidget详解

1、概述 QTabWidget是Qt框架中的一个控件&#xff0c;它提供了一个标签页式的界面&#xff0c;允许用户在不同的页面&#xff08;或称为标签&#xff09;之间切换。每个页面都可以包含不同的内容&#xff0c;如文本、图像、按钮或其他小部件。QTabWidget非常适合用于创建具有多…
阅读更多...
关于wordpress instagram feed 插件 （现更名为Smash Balloon Social Photo Feed）

关于wordpress instagram feed 插件 （现更名为Smash Balloon Social Photo Feed）

插件地址&#xff1a; Smash Balloon Social Photo Feed – Easy Social Feeds Plugin – WordPress 插件 | WordPress.org China 简体中文 安装后&#xff0c;配置教程&#xff1a; Setting up the Instagram Feed Pro WordPress Plugin - Smash Balloon 从这里面开始看就…
阅读更多...
初始JavaEE篇——多线程（5）：生产者-消费者模型、阻塞队列

初始JavaEE篇——多线程（5）：生产者-消费者模型、阻塞队列

找往期文章包括但不限于本期文章中不懂的知识点&#xff1a; 个人主页&#xff1a;我要学编程程(ಥ_ಥ)-CSDN博客 所属专栏&#xff1a;JavaEE 文章目录 阻塞队列生产者—消费者模型生产者—消费者模型的优势&#xff1a;生产者—消费者模型的劣势&#xff1a; Java标准库中的阻…
阅读更多...
用ChatGPT提升工作效率：从理论到实际应用

用ChatGPT提升工作效率：从理论到实际应用

伴人工智能技术的迅速演进&#xff0c;像ChatGPT这类语言模型已成为提升工作效率的关键工具。这类模型不仅具备处理海量数据的能力&#xff0c;还能自动化许多日常任务&#xff0c;从而提高决策的准确性。本文将深入探讨如何在工作中利用ChatGPT等AI工具提升效率&#xff0c;涵…
阅读更多...
如何修改网络ip地址：一步步指南‌

如何修改网络ip地址：一步步指南‌

在当今这个数字化时代&#xff0c;网络已成为我们日常生活与工作中不可或缺的一部分。无论是浏览网页、在线办公还是享受流媒体服务&#xff0c;稳定的网络连接和适当的IP地址管理都是确保良好体验的关键。然而&#xff0c;出于隐私保护、绕过地理限制或测试网络环境等需要&…
阅读更多...
ENSP (虚拟路由冗余协议)VRRP配置

ENSP (虚拟路由冗余协议)VRRP配置

VRRP&#xff08;Virtual Router Redundancy Protocol&#xff0c;虚拟路由冗余协议&#xff09;是一种用于提高网络可用性和可靠性的协议。它通过在多个路由器之间共享一个虚拟IP地址&#xff0c;确保即使一台路由器发生故障&#xff0c;网络依然能够正常运行&#xff0c;防止…
阅读更多...
SpringCloud Alibaba-05 Seata分布式事务处理

SpringCloud Alibaba-05 Seata分布式事务处理

一次业务操作需要跨多个数据源或需要跨多个系统进行远程调用&#xff0c;就会产生分布式事务问题。但是关系型数据库提供的能力是基于单机事务的&#xff0c;一旦遇到分布式事务场景&#xff0c;就需要通过更多其他技术手段来解决问题。 1.四大模式&#xff1a; Seata AT模式(主…
阅读更多...
非线性数据结构之图

非线性数据结构之图

一、有向图&#xff08;Directed Graph&#xff09; 1. 定义 有向图是一个由顶点&#xff08;节点&#xff09;和有方向的边&#xff08;弧&#xff09;组成的图。在有向图中&#xff0c;每条边都有一个起点和一个终点&#xff0c;表示从一个顶点到另一个顶点的关系。 2. 特…
阅读更多...
大数据之Hadoop集群

大数据之Hadoop集群

Hadoop集群介绍&#xff1f;Hadoop集群的优缺点及应用场景&#xff1f;Hadoop集群搭建&#xff1f;Hadoop架构&#xff1f; Hadoop集群介绍 Hadoop集群是由多台计算机&#xff08;节点&#xff09;组成的一个分布式计算系统&#xff0c;主要用于处理大规模的数据集。以下是对Ha…
阅读更多...
云原生+AI核心技术＆最佳实践

云原生+AI核心技术＆最佳实践

以下内容是我在陕西理工大学2023级人工智能专业和网络专业的演讲内容&#xff0c;分享给大家。 各位老师、同学们&#xff0c;大家好啊&#xff01;能在这里跟大家一起聊聊咱们计算机专业那些事儿&#xff0c;我真的觉得超级兴奋&#xff01; 首先&#xff0c;自我介绍一下&am…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023