Organization chart, Echart tree chart
1. Echart realizes the tree diagram
1.1 requirements
- Expand and collapse custom pictures to display different pictures according to their status.
- Click on the text and click on the picture are processed separately. Click on the picture to expand and fold the node, and click on the text to achieve other customized business requirements.
1.2 the effect
1.3 code
1. Can only listen on mousedown, listen on click invalid. 2. Set the marker value on the data. 3. Dataurl form for images)
<! DOCTYPE html><html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://lib.baomitu.com/echarts/5.3.0/echarts.min.js"></script>
<script type="text/javascript">
let expandIcon = "image://data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAVFJREFUOE+t1btKXUEUxvHf6TWFT+Cx0MILgppGEGysTGGhV bTUZ7D2FWy0NKliIyGNNjbBgJfGC0QhxAewipZCZMGMbIdz8cAe2OzZa9b6M+tba2Y3dB9TiOcZ57jsFNJosziGLcxhoPB5wC9s46iMbwVcx07heJt2OFrYv 2CtaiuB/yuLu9hLKT4mex8msInFiu8rpwqM4NXkNI2LSsBgmt9XbMv4lr43EBuQgQs4TIsr2C9S+5u+m4U9ihWFijGO6wz8jk/4kd6l1lmKVpqH3qH7AZayw x8MYRYnLSrfCRgxPxFyNAMYQmfR+/HUIzBi/qWYDwGMnrvCTZoP4ytmuvT8GT7jDr8xgslWwKjoMXJl23EjxfmU6htg7SnHDmotSgBrb5tujX2ahPz43sYOv 05HLyofIyqaR8ejl51qvRwytNbrK0NrvWDLRu7pF/ACLKZcjfX9d0sAAAAASUVORK5CYII=";
let closeIcon = "image://data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAASZJREFUOE+11T8rhWEYx/HPiWLA4B1gMPjTCYsMVgPpDM5o5 A1YvAarhZGNkkEps0hR8qcYlBdgwkBRunXfOj3hcep211NP1/O7vl3/7uupKD+jCM8bTnHxm0vlh499WMEkuguaBxxjFQdF/++ANewUhLcxwoGCfRPzjbYic B9TUbCOjZjiU7R1YBjLmG4AfXEagUsxzaAbw1lJeeewFTWLCAFIwBGcoBV1bJf36lMRmhUaFc4QrhJwF7PYw8wfYUm2hgUERi0B79CLCRw1CQw+h7hHTwCGQ qeid+IZbWgpAb/jFcHnMWq7AnAQl7iO79U4Z+0lwBeM4xw36Ef1X4DZUw6ZZW1KAGYfm+yDHaLMevXShGRdDgmadX0laNYFW7wgTf0CPgDlolaNpq0FgQAAA ABJRU5ErkJggg==";
let dom = document.getElementById("container");
let myChart = echarts.init(dom);
let app = {};
let data = {
"name": "root"."children": [{
"name": "AText"."symbol": closeIcon, "expand": 1."children": [{"name": "CText"."symbol": expandIcon,
"expand": 0."children": [{"name": "DText"."value": 1
}, {
"name": "EText"."value": 2}]}, {"name": "FText"."symbol": expandIcon,
"expand": 0."children": [{"name": "GText"."value": 3
}, {
"name": "HText"."value": 4}]}, {"name": "LText"."symbol": expandIcon, "expand": 0."children": [{
"name": "MText"."value": 5}}]]}, {"name": "BText"."symbol": closeIcon,
"expand": 1."children": [{"name": "NText"."value": 6
}, {
"name": "PText"."symbol": expandIcon,
"expand": 0."children": [{
"name": "QText"."value": 7
}, {
"name": "RText"."value": 8}]}, {"name": "YText"."value": 9
}, {
"name": "XText"."value": 10}}}]]; option =null;
myChart.setOption(option = {
tooltip: {
trigger: 'item'.triggerOn: 'mousemove'
},
series: [{
type: 'tree'.data: [data],
bottom: '20%'.symbolSize: 16.orient: 'vertical'.expandAndCollapse: true.label: {
normal: {
position: 'top'.verticalAlign: 'middle'.align: 'center'.fontSize: 16}},leaves: {
label: {
normal: {
position: 'bottom'.// rotate: -90,}}},animationDurationUpdate: 750}}]);if (option && typeof option === "object") {
myChart.setOption(option, true);
myChart.on('mousedown'.(e) = > {
const name = e.data.name;
const curNode = myChart._chartsViews[0]._data.tree._nodes.find(item= > {
return item.name === name;
});
let culling = e.event.target.culling;
if(culling) { curNode.isExpand = ! curNode.isExpand;if (e.data.expand) {
e.data.symbol = expandIcon;
e.data.expand = 0;
} else {
e.data.symbol = closeIcon;
e.data.expand = 1; }}else {
// Todo text click custom event handler
}
curNode.isExpand = !curNode.isExpand;
})
}
</script>
</body>
</html>
Copy the code2. The CSS + HTML
Style, animation hand rub, need to add their own effects, nothing to say.
2.1 the effect
2.2 code
Copy browser directly to see the effect
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>chart</title>
<style>
.container {
width: 900px;
height: 400px;
padding: 10px 0;
margin: 50px auto 50px;
overflow-x: auto;
border: solid 1px #aaa;
}
.wrap {
display: flex;
padding: 10px 20px 10px 10px;
}
.child {
display: flex;
flex-direction: column;
align-items: center;
}
.main {
display: flex;
justify-content: center;
}
.item-container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.item {
position: relative;
display: inline-flex;
width: 110px;
height: 74px;
margin: 20px;
background: #eee;
border-top: 2px solid dodgerblue;
border-radius: 1px 1px 0 0;
justify-content: center;
flex: none;
}
.item-top-node {
width: 200px;
height: 74px;
background-image: linear-gradient(135deg.#57A5FF 0%.#3B7BFF 100%);
border-top: none;
border-radius: 2px;
box-shadow: 0 2px 10px 0 #ddd;
}
.item-line-top:before {
position: absolute;
top: -22px;
left: 50%;
display: block;
width: 1px;
height: 20px;
background: #d8d8d8;
content: "";
}
.item-line-bottom:after {
position: absolute;
top: 74px;
left: 50%;
display: block;
width: 1px;
height: 20px;
background: #d8d8d8;
content: "";
}
.item-line-l:before {
position: absolute;
left: 50%;
display: block;
width: 50%;
height: 1px;
background: #d8d8d8;
content: "";
}
.item-line-m:before {
position: absolute;
display: block;
width: 100%;
height: 1px;
background: #d8d8d8;
content: "";
}
.item-line-r:before {
position: absolute;
right: 50%;
display: block;
width: 50%;
height: 1px;
background: #d8d8d8;
content: "";
}
</style>
</head>
<body>
<div class="container">
<div class="wrap">
<div class="child">
<div class="main">
<div class="item-container">
<div class="item item-line-bottom item-top-node"></div>
<div class="inline">
<div class="child">
<div class="main">
<div class="item-container item-line-l">
<div class="item item-line-top"></div>
<div class="inline">
</div>
</div>
<div class="item-container item-line-m">
<div class="item item-line-top item-line-bottom"></div>
<div class="inline">
<div class="child">
<div class="main">
<div class="item-container item-line-l">
<div class="item item-line-top"></div>
<div class="inline">
</div>
</div>
<div class="item-container item-line-m">
<div class="item item-line-top"></div>
<div class="inline">
</div>
</div>
<div class="item-container item-line-r">
<div class="item item-line-top"></div>
<div class="inline">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item-container item-line-r">
<div class="item item-line-top item-line-bottom"></div>
<div class="inline">
<div class="child">
<div class="main">
<div class="item-container item-line-l">
<div class="item item-line-top"></div>
<div class="inline">
</div>
</div>
<div class="item-container item-line-m">
<div class="item item-line-top"></div>
<div class="inline">
</div>
</div>
<div class="item-container item-line-r">
<div class="item item-line-top"></div>
<div class="inline">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Copy the code