树形图显示异常echarts tree配置项内容和展示
点击节点收缩和展开后显示异常
配置项如下
var uploadedDataURL = "/asset/get/s/data-1550222022674-I0tCID0J3.png";
var uploadedDataURL = "/asset/get/s/data-1550222016923-ehJfzGh9L.png";
var uploadedDataURL = "/asset/get/s/data-1550222005874-ahfQwI-rV.png";
option = {
backgroundColor: 'rgb(43, 51, 59)',
tooltip: {
trigger: 'item',
formatter: "{b}: {c}"
},
legend: {
"data": [],
"textStyle": {
"fontSize": 12,
"color": "rgb(0,255,252)"
}
},
series: [{
type: 'tree',
left: '8%',
right: '10%',
top: '8%',
bottom: '25%',
"name": "user^USER",
"data": [{
"id": "user^USER",
"name": "user^USER",
"parentId": null,
"children": [{
"id": "tomcat^TOMCAT",
"name": "tomcat^TOMCAT",
"parentId": "user^USER",
"children": [
{
"id": "tomcat1^TOMCAT",
"name": "tomcat1^TOMCAT",
"parentId": "tomcat^TOMCAT",
"children": [{
"id": "db1^MYSQL",
"name": "db1^MYSQL",
"parentId": "tomcat1^TOMCAT",
"children": [],
"symbolSize": [
20,
20
],
"value": 18,
"symbol": "image:///asset/get/s/data-1550222005874-ahfQwI-rV.png"
}],
"symbolSize": [
20,
20
],
"value": 6,
"symbol": "image:///asset/get/s/data-1550222022674-I0tCID0J3.png"
},
{
"id": "tomcat2^TOMCAT",
"name": "tomcat2^TOMCAT",
"parentId": "tomcat^TOMCAT",
"children": [{
"id": "db2^MYSQL",
"name": "db2^MYSQL",
"parentId": "tomcat2^TOMCAT",
"children": [],
"symbolSize": [
20,
20
],
"value": 18,
"symbol": "image:///asset/get/s/data-1550222005874-ahfQwI-rV.png"
}],
"symbolSize": [
20,
20
],
"value": 6,
"symbol": "image:///asset/get/s/data-1550222022674-I0tCID0J3.png"
},
{
"id": "tomcat3^TOMCAT",
"name": "tomcat3^TOMCAT",
"parentId": "tomcat^TOMCAT",
"children": [{
"id": "db3^MYSQL",
"name": "db3^MYSQL",
"parentId": "tomcat3^TOMCAT",
"children": [],
"symbolSize": [
20,
20
],
"value": 18,
"symbol": "image:///asset/get/s/data-1550222005874-ahfQwI-rV.png"
}],
"symbolSize": [
20,
20
],
"value": 6,
"symbol": "image:///asset/get/s/data-1550222022674-I0tCID0J3.png"
},
{
"id": "tomcat4^TOMCAT",
"name": "tomcat4^TOMCAT",
"parentId": "tomcat^TOMCAT",
"children": [{
"id": "db4^MYSQL",
"name": "db4^MYSQL",
"parentId": "tomcat4^TOMCAT",
"children": [],
"symbolSize": [
20,
20
],
"value": 18,
"symbol": "image:///asset/get/s/data-1550222005874-ahfQwI-rV.png"
}],
"symbolSize": [
20,
20
],
"value": 6,
"symbol": "image:///asset/get/s/data-1550222022674-I0tCID0J3.png"
},
{
"id": "tomcat5^TOMCAT",
"name": "tomcat5^TOMCAT",
"parentId": "tomcat^TOMCAT",
"children": [{
"id": "db5^MYSQL",
"name": "db5^MYSQL",
"parentId": "tomcat5^TOMCAT",
"children": [],
"symbolSize": [
20,
20
],
"value": 18,
"symbol": "image:///asset/get/s/data-1550222005874-ahfQwI-rV.png"
}],
"symbolSize": [
20,
20
],
"value": 6,
"symbol": "image:///asset/get/s/data-1550222022674-I0tCID0J3.png"
},
{
"id": "tomcat6^TOMCAT",
"name": "tomcat6^TOMCAT",
"parentId": "tomcat^TOMCAT",
"children": [{
"id": "db6^MYSQL",
"name": "db6^MYSQL",
"parentId": "tomcat6^TOMCAT",
"children": [],
"symbolSize": [
20,
20
],
"value": 18,
"symbol": "image:///asset/get/s/data-1550222005874-ahfQwI-rV.png"
}],
"symbolSize": [
20,
20
],
"value": 6,
"symbol": "image:///asset/get/s/data-1550222022674-I0tCID0J3.png"
},
{
"id": "tomcat7^TOMCAT",
"name": "tomcat7^TOMCAT",
"parentId": "tomcat^TOMCAT",
"children": [{
"id": "db7^MYSQL",
"name": "db7^MYSQL",
"parentId": "tomcat7^TOMCAT",
"children": [],
"symbolSize": [
20,
20
],
"value": 18,
"symbol": "image:///asset/get/s/data-1550222005874-ahfQwI-rV.png"
}],
"symbolSize": [
20,
20
],
"value": 6,
"symbol": "image:///asset/get/s/data-1550222022674-I0tCID0J3.png"
},
{
"id": "tomcat8^TOMCAT",
"name": "tomcat8^TOMCAT",
"parentId": "tomcat^TOMCAT",
"children": [{
"id": "db8^MYSQL",
"name": "db8^MYSQL",
"parentId": "tomcat8^TOMCAT",
"children": [],
"symbolSize": [
20,
20
],
"value": 18,
"symbol": "image:///asset/get/s/data-1550222005874-ahfQwI-rV.png"
}],
"symbolSize": [
20,
20
],
"value": 6,
"symbol": "image:///asset/get/s/data-1550222022674-I0tCID0J3.png"
},
{
"id": "tomcat9^TOMCAT",
"name": "tomcat9^TOMCAT",
"parentId": "tomcat^TOMCAT",
"children": [{
"id": "db9^MYSQL",
"name": "db9^MYSQL",
"parentId": "tomcat9^TOMCAT",
"children": [],
"symbolSize": [
20,
20
],
"value": 18,
"symbol": "image:///asset/get/s/data-1550222005874-ahfQwI-rV.png"
}],
"symbolSize": [
20,
20
],
"value": 6,
"symbol": "image:///asset/get/s/data-1550222022674-I0tCID0J3.png"
},
{
"id": "tomcat10^TOMCAT",
"name": "tomcat10^TOMCAT",
"parentId": "tomcat^TOMCAT",
"children": [{
"id": "db10^MYSQL",
"name": "db10^MYSQL",
"parentId": "tomcat10^TOMCAT",
"children": [],
"symbolSize": [
20,
20
],
"value": 18,
"symbol": "image:///asset/get/s/data-1550222005874-ahfQwI-rV.png"
}],
"symbolSize": [
20,
20
],
"value": 6,
"symbol": "image:///asset/get/s/data-1550222022674-I0tCID0J3.png"
},
{
"id": "tomcat11^TOMCAT",
"name": "tomcat11^TOMCAT",
"parentId": "tomcat^TOMCAT",
"children": [{
"id": "db11^MYSQL",
"name": "db11^MYSQL",
"parentId": "tomcat11^TOMCAT",
"children": [],
"symbolSize": [
20,
20
],
"value": 18,
"symbol": "image:///asset/get/s/data-1550222005874-ahfQwI-rV.png"
}],
"symbolSize": [
20,
20
],
"value": 6,
"symbol": "image:///asset/get/s/data-1550222022674-I0tCID0J3.png"
},
{
"id": "tomcat12^TOMCAT",
"name": "tomcat12^TOMCAT",
"parentId": "tomcat^TOMCAT",
"children": [{
"id": "db12^MYSQL",
"name": "db12^MYSQL",
"parentId": "tomcat12^TOMCAT",
"children": [],
"symbolSize": [
20,
20
],
"value": 18,
"symbol": "image:///asset/get/s/data-1550222005874-ahfQwI-rV.png"
}],
"symbolSize": [
20,
20
],
"value": 6,
"symbol": "image:///asset/get/s/data-1550222022674-I0tCID0J3.png"
},
{
"id": "tomcat13^TOMCAT",
"name": "tomcat13^TOMCAT",
"parentId": "tomcat^TOMCAT",
"children": [{
"id": "db13^MYSQL",
"name": "db13^MYSQL",
"parentId": "tomcat13^TOMCAT",
"children": [],
"symbolSize": [
20,
20
],
"value": 18,
"symbol": "image:///asset/get/s/data-1550222005874-ahfQwI-rV.png"
}],
"symbolSize": [
20,
20
],
"value": 6,
"symbol": "image:///asset/get/s/data-1550222022674-I0tCID0J3.png"
},
{
"id": "tomcat14^TOMCAT",
"name": "tomcat14^TOMCAT",
"parentId": "tomcat^TOMCAT",
"children": [{
"id": "db14^MYSQL",
"name": "db14^MYSQL",
"parentId": "tomcat14^TOMCAT",
"children": [],
"symbolSize": [
20,
20
],
"value": 18,
"symbol": "image:///asset/get/s/data-1550222005874-ahfQwI-rV.png"
}],
"symbolSize": [
20,
20
],
"value": 6,
"symbol": "image:///asset/get/s/data-1550222022674-I0tCID0J3.png"
},
{
"id": "tomcat15^TOMCAT",
"name": "tomcat15^TOMCAT",
"parentId": "tomcat^TOMCAT",
"children": [{
"id": "db15^MYSQL",
"name": "db15^MYSQL",
"parentId": "tomcat15^TOMCAT",
"children": [],
"symbolSize": [
20,
20
],
"value": 18,
"symbol": "image:///asset/get/s/data-1550222005874-ahfQwI-rV.png"
},
{
"id": "db16^MYSQL",
"name": "db16^MYSQL",
"parentId": "tomcat15^TOMCAT",
"children": [],
"symbolSize": [
20,
20
],
"value": 18,
"symbol": "image:///asset/get/s/data-1550222005874-ahfQwI-rV.png"
}
],
"symbolSize": [
20,
20
],
"value": 6,
"symbol": "image:///asset/get/s/data-1550222022674-I0tCID0J3.png"
}
],
"symbolSize": [
20,
20
],
"value": 6,
"symbol": "image:///asset/get/s/data-1550222022674-I0tCID0J3.png"
},
{
"id": "tomcat16^TOMCAT",
"name": "tomcat16^TOMCAT",
"parentId": "user^USER",
"children": [{
"id": "tomcat17^TOMCAT",
"name": "tomcat17^TOMCAT",
"parentId": "tomcat16^TOMCAT",
"children": [{
"id": "db18^MYSQL",
"name": "db18^MYSQL",
"parentId": "tomcat17^TOMCAT",
"children": [],
"symbolSize": [
20,
20
],
"value": 6,
"symbol": "image:///asset/get/s/data-1550222005874-ahfQwI-rV.png"
}],
"symbolSize": [
20,
20
],
"value": 6,
"symbol": "image:///asset/get/s/data-1550222022674-I0tCID0J3.png"
}],
"symbolSize": [
20,
20
],
"value": 6,
"symbol": "image:///asset/get/s/data-1550222022674-I0tCID0J3.png"
}
],
"symbolSize": [
30,
30
],
"value": 6,
"symbol": "image:///asset/get/s/data-1550222016923-ehJfzGh9L.png"
}],
"initialTreeDepth": -1,
"itemStyle": {
"normal": {
"color": "rgb(0,255,252)",
"borderWidth": 0
}
},
"lineStyle": {
"normal": {
"color": "#F4A460",
"curveness": 0.5
}
},
"label": {
"normal": {
"position": "right",
"verticalAlign": "middle",
"fontSize": 8,
"color": "rgb(0,255,252)"
}
}
}]
};
截图如下
