html实现原理和流程图,原生js+div+css，动态画结构图/流程图

前面用highchart尝试画了一次&＃xff0c;但是因为种种因素&＃xff0c;还是用js&＃43;div&＃43;css实现起来比较方便。

代码如下&＃xff0c;可直接复制粘贴。

html部分&＃xff1a;

content&＃61;"width&＃61;device-width, user-scalable&＃61;no, initial-scale&＃61;1.0, maximum-scale&＃61;1.0, minimum-scale&＃61;1.0">

* {

margin: 0;

padding: 0;

}

div.rect {

height: 40px;

border-radius: 10px;

background: pink;

text-align: center;

padding: 5px;

margin: 5px 5px;

}

div.rect:hover {

cursor: pointer;

}

div.rect p {

font-size: 14px;

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 2;

}

div.flex {

display: flex;

justify-content: center;

flex-wrap: wrap

}

div.flex > div {

width: 25%;

}

div.arrow {

margin: 0 10px 0;

}

div.arrow-body {

width: 20px;

height: 50px;

background: #ccc;

margin: 0 auto;

}

div.arrow-footer {

width: 0;

height: 0;

border-width: 30px 30px 0;

border-style: solid;

border-color: #ccc transparent transparent; /*灰 透明 透明 */

margin: 0 auto;

}

#container {

width: 650px;

/*height: 450px;*/

margin: 50px auto;

/*padding-top: 10px;*/

/*padding-right: 10px;*/

/*overflow-y: auto*/

}

js部分&＃xff1a;

let data &＃61; {

root: [

{title: &＃39;根节点1&＃39;, color: &＃39;red&＃39;},

{title: &＃39;根节点2&＃39;, color: &＃39;yellow&＃39;},

{title: &＃39;根节点3&＃39;, color: &＃39;skyblue&＃39;},

],

child: [

{title: &＃39;节点&＃39;, color: &＃39;#cca057&＃39;}

],

child2: [

{title: &＃39;子节点1&＃39;},

{title: &＃39;子节点2阿诗阿范德萨士大夫士大夫实打实地方的所得税法的萨芬撒地方丹顿&＃39;},

{title: &＃39;子节点3子节点3子节点3子节点3&＃39;},

{title: &＃39;子节点4&＃39;},

{title: &＃39;子节点5&＃39;},

{title: &＃39;子节点6&＃39;},

{title: &＃39;子节点7&＃39;},

{title: &＃39;子节点8&＃39;}

]

};

let pic &＃61; {

load(domName, datas) {

let num &＃61; Object.keys(datas).length;

Object.keys(datas).forEach((i, j) &＃61;> {

pic.rect(&＃39;container&＃39;, datas[i], (j &＃43; 1) &＃61;&＃61;&＃61; num);

});

this.bindEvents()

},

rect(domName, data, isEnd) {

let div &＃61; document.createElement("div");

div.classList.add("flex");

for (let i in data) {

div.innerHTML &＃43;&＃61; &＃39;

}

document.getElementById(domName).appendChild(div);

if (!isEnd) {

let arrow &＃61; document.createElement("div");

arrow.classList.add("arrow");

arrow.innerHTML &＃43;&＃61;

&＃39;

&＃39;

document.getElementById(domName).appendChild(arrow)

}

},

bindEvents() {

let rect &＃61; document.getElementsByClassName(&＃39;rect&＃39;);

for (let i &＃61; 0, rule; rule &＃61; rect[i&＃43;&＃43;];) {

rule.addEventListener(&＃39;click&＃39;, () &＃61;> {

let title &＃61; rule.getAttribute(&＃39;data&＃39;);

alert(title);

});

}

}

};

window.onload &＃61; function () {

pic.load(&＃39;container&＃39;, data);

};

效果图&＃xff1a;

总结&＃xff1a;

想比highchart自由绘图&＃xff0c;该种方案最省时省力省心。