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;
}
动态生成效果
相关文章：
html简易流程图
效果图 使用htmlcssjs，无图片，没用Canvas demo: <!DOCTYPE html> <html> <head><link href"draw.css" rel"stylesheet" /><script src"draw.js" type"text/javascript"></…...
Java 入门
目录 Java简介 Java JDK开发环境配置 第一个Java程序 Java标识符与关键字 Java注释 Java常量 Java变量的定义和使用 Java简介 Java简介： Java是由Sun Microsystems公司于1995年推出的一门面向对象的高级程序设计语言，可以运行于多个平台，其…...
JVM基本结构和垃圾回收机制
一、JVM基本结构 Java虚拟机（JVM, Java Virtual Machine）是Java程序执行的环境，其基本结构可以分为以下几个主要部分： 类加载器子系统（Class Loader Subsystem）： 负责加载Java类文件到内存中。…...
CentOS 7 安装 ntp，自动校准系统时间
1、安装 ntp yum install ntp 安装好后，ntp 会自动注册成为服务，服务名称为 ntpd 2、查看当前 ntpd 服务的状态 systemctl status ntpd 3、启动 ntpd 服务、查看 ntpd 服务的状态 systemctl start ntpdsystemctl status ntpd 4、设置 ntpd 服务开机启…...
Spring Boot 配置文件启动加载顺序
前言 Spring Boot的启动加载顺序是一个涉及多个步骤和组件的过程。Spring Boot通过一系列默认设置简化了应用程序的配置，使得开发者能够快速地搭建和部署应用。为了实现这一目标，Spring Boot采用了一种分层和优先级机制来加载配置文件。 一、Spring Bo…...
webrtc agc2实现原理
WebRTC的AGC2（自适应增益控制器）是一种用于音频处理的算法，可以根据输入信号的强度自动调整增益，使输出信号的音量保持稳定。其详细原理如下： 噪声估计 首先，AGC2需要对输入信号中的噪声进行估计ÿ…...
2024.11.03 周报
一 实时超分音频同步问题: 处理方向： 按照胡学长的办法尝试: 前面处理视频, 将视频中音频提取出来, 将音频每隔 1-2 秒保存为一段 (这样将音频缓存在内存中) , 然后依次播放, 但是音频是44.1KHz采样率，每秒44100次的频率. 每次间隔中程序处理的极短时间…...
Oceanbase学习之一迁移mysql数据到oceanbase
一、数据库环境 #mysql环境 root192.168.150.162 20:28: [(none)]> select version(); ---------- | version() | ---------- | 8.0.26 | ---------- 1 row in set (0.00 sec) root192.168.150.162 20:28: [(none)]> show variables like ‘%char%’; ---…...
Milvus - GPU 索引类型及其应用场景
1. 背景概述 Milvus 是一款高效的矢量数据库管理系统，支持在高并发和高调用场景下加速相似度搜索。Milvus 的 GPU 支持由 NvidiaRAPIDS 团队提供，可以借助各种 GPU 索引类型来优化性能。本篇将重点解析 Milvus 支持的 GPU 索引类型、适用场景及各自的性…...
Webserver(2.8)守护进程
目录 守护进程案例 守护进程案例 每隔2s获取系统时间，将这个时间写入到磁盘文件中 #include<stdio.h> #include<sys/stat.h> #include<sys/types.h> #include<unistd.h> #include<fcntl.h> #include<sys/time.h> #include<…...
HarmonyOS :
HarmonyOS 移动应用开发 什么是HarmonyOS？： 官方解释：HarmonyOS是一款面向万物互联时代的、全新的分布式操作系统。 鸿蒙操作系统在传统的单设备系统能力的基础上，提出了基于同一套系统能力、适配多种终端形态的分布式理念&#…...
C# EF 使用
WPF EF MySQL - - -版本.NET Framework4.7.2EntityFramework6.5.1MySql.Data.EntityFramework9.1.0 创建数据库 ccApp.config <connectionStrings><add name"MyDbContext" providerName"MySql.Data.MySqlClient" connectionString"server…...
简介Voronoi图Voronoi Diagrams
这是计算机的经典算法。 问题引入 倘若一张大白纸上有很多三角点，掉进去一个五星点，问，哪个三角离着五星最近？简单，算距离呗，这个五星到其他所有三角点的距离，找到最小的那个就行。 若掉进去…...
硬件测试工程师之EMC项目-辐射抗扰度试验（RS）测试标准解析思维导图
1：链接上一篇文章 硬件测试工程师之EMC项目-电磁干扰-谐波测试标准解析 2：总结思维导图并进行深入解析EMC-辐射抗扰度测试项目 附上相关报告文档以及图片解析。 3:以下为思维导图大致展示，后续可可方便观看。如有需要也可以下载。 本期先…...
H265编码丢帧问题分析
问题 通过海思芯片编码后，将编码的数据通过UDP网口发送到UDP 服务端，UDP服务端收到后保存成文件。 保存的文件有时候用VLC软件可以打开。有时候不能打开，同时用Elecard HEVC Analyer工具打开，发现VLC不能打开时丢帧。如下图，实际为858帧，而此处只有846帧。 分析 UDP包…...
CentOS Linux教程(12)--常用编辑器
文章目录 1. 背景2. nano编辑器2.1 检查安装2.2 安装nano2.3 使用nano 3. emacs编辑器3.1 检查安装3.2 安装emacs 3.3 使用emacs 1. 背景 我们经常需要编辑文件内容，windows上这个工作可以用记事本来做。 linux上对应的，我们可以使用nano或者emacs编辑…...
【浏览器学习笔记】-- 浏览器检查jQuery是否加载
环境：最近做爬虫实验，需要用到上下文http数据请求，为了能够兼容上下文环境，因此采用就jQuery请求，请求前需要加查是否有JQuery加载成功。 浏览器F12，打开浏览器控制台，复制粘贴以下代码&#x…...
大模型的提示学习
文章目录 人工提示设计自动提示设计经过预训练、指令微调和人类对齐后，我们接下来讨论如何通过提示学习方法来有效地使用大语言模型解决实际任务。目前常用的方法是设计合适的提示（Prompting），通过自然语言接口与大模型进行交互。在现有研究中，任务提示的设计主要依靠人工…...
2-143 基于matlab-GUI的脉冲响应不变法实现音频滤波功能
基于matlab-GUI的脉冲响应不变法实现音频滤波功能，输入加噪信号，通过巴特沃斯模拟滤波器脉冲响应不变法进行降噪。效果较好。程序已调通，可直接运行。 下载源程序请点链接：2-143 基于matlab-GUI的脉冲响应不变法实现音频滤波功能…...
鸿蒙移动应用开发-------前篇
一. 鸿蒙的起源 2012年，华为公司开始规划自己的操作系统，名为’鸿蒙‘。 2018年8月24日，华为公司向国家知识产权商标局申请了’华为鸿蒙‘商标，注册公告日期是2019年5月14日，专用权限期是从2019年5月14日到2029年5月…...
ROS（Robot Operating System）中，编写一个记录机器人速度并将其转换成轨迹
在ROS（Robot Operating System）中，编写一个记录机器人速度并将其转换成轨迹的类涉及到几个步骤。以下是一个简单的示例，展示了如何创建这样一个类，并将其放置在一个自定义的命名空间中。这个类将订阅机器人的速度信息&…...
了解bootstrap改造asp.net core MVC的样式模板
我们都知道，在使用默认的asp.net core MVC模板建立项目的时候，里面的样式是已经事先被写好了的。一般来说都在css目录下的site.css和bootstrap.css及下面的bootstrap.min.css中。我们打开bootstrap这些样式文件，里面有大量的样式类的定义&…...
【C++】对左值引用右值引用的深入理解（右值引用与移动语义）
🌈 个人主页：谁在夜里看海. 🔥 个人专栏：《C系列》《Linux系列》 ⛰️ 天高地阔，欲往观之。 目录 前言：对引用的底层理解 一、左值与右值 提问：左值在左，右值在右？…...
寻找符合要求的最长子串
题目描述 给定一个字符串 s s s ，找出这样一个子串： 1）该子串中的任意一个字符最多出现2次； 2）该子串不包含指定某个字符； 请你找出满足该条件的最长子串的长度。 输入描述： 第一行为要求…...
【vim文本编辑器gcc编译器gdb调试器】
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 一、vimvim安装vim常用快捷键vim使用vimtutor zh文档 二、gcc编译器安装gcc工具编译源代码 三、gdb调试器gdb安装gdb常用指令gdb简单上手使用gdb的单步调试功能 总结…...
解决使用Golang的email库发送qq邮件报错short response，错误类型为textproto.ProtocolError
问题阐述 使用email库发送QQ邮件，采用465端口： package mainimport ("fmt""net/smtp""github.com/jordan-wright/email" )func SendEmail(sendTo string, subject string, body string) (err error) {e : email.NewEmai…...
为什么说高级工程师研究的不仅是器件的稳态，模拟器件的开关过程
高级工程师研究器件的开关过程而不仅仅是稳态，主要有以下几个原因： 1. 动态性能优化：开关过程中的特性，如上升时间、下降时间、过冲、振铃等，直接影响系统的性能。了解和优化这些动态特性对于提高系统的速度、精度和稳…...
Matlab实现白鲸优化算法（BWO）求解路径规划问题
目录 1.内容介绍 2.部分代码 3.实验结果 4.内容获取 1内容介绍 白鲸优化算法（BWO）是一种受自然界白鲸捕食行为启发的新型优化算法，它通过模拟白鲸的群体捕猎策略和社会互动来探索问题的最优解。BWO因其强大的全局搜索能力和高效的局部搜索能…...
SQLserver索引的优化和使用
在SQL Server中，索引的优化和有效使用是提高查询性能的关键。以下是一些详细的步骤和最佳实践，帮助你优化和使用索引。 1. 理解索引类型 聚集索引（Clustered Index） 定义：表中数据的物理排序顺序与索引的逻辑顺序相…...
Linux 安装nacos
1.下载版本 https://github.com/alibaba/nacos/tags 2.解压压缩包，启动 (1)将压缩包放到/usr/local目录下，解压 tar -xvf nacos-server-2.0.0-BETA.tar.gz(2)删除压缩包 rm -f nacos-server-2.0.0-BETA.tar.gz(3) 找到nacos的mysql的数据库脚本,在数…...