传输链路图echarts graph配置项内容和展示
配置项如下
let dataInfo = [{'name': 'trade2', 'category': 0, 'symbolSize': 60, 'value': [0, 0]}, {'name': 'hbzq2', 'category': 1, 'symbolSize': 60, 'value': [500, 0]}, {'name': 'hbzq4', 'category': 1, 'symbolSize': 60, 'value': [600, 0]}, {'name': 'hbzq5', 'category': 1, 'symbolSize': 60, 'value': [700, 0]}, {'name': 'hbzq6', 'category': 1, 'symbolSize': 60, 'value': [800, 0]}, {'name': 'hbzq7', 'category': 1, 'symbolSize': 60, 'value': [500, 80]}, {'name': 'ubiqsh1', 'category': 2, 'symbolSize': 60, 'value': [1000, 0]}, {'name': 'ubiqsh2', 'category': 2, 'symbolSize': 60, 'value': [1100, 0]}, {'name': 'ctjq1', 'category': 3, 'symbolSize': 60, 'value': [1500, 0]}, {'name': 'ctjq2', 'category': 3, 'symbolSize': 60, 'value': [1600, 0]}, {'name': 'gds01', 'category': 4, 'symbolSize': 60, 'value': [0, 200]}, {'name': 'gds02', 'category': 4, 'symbolSize': 60, 'value': [100, 200]}, {'name': 'gds03', 'category': 4, 'symbolSize': 60, 'value': [200, 200]}, {'name': 'gds04', 'category': 4, 'symbolSize': 60, 'value': [300, 200]}, {'name': 'gds05', 'category': 4, 'symbolSize': 60, 'value': [0, 280]}, {'name': 'gds06', 'category': 4, 'symbolSize': 60, 'value': [100, 280]}, {'name': 'gds11', 'category': 4, 'symbolSize': 60, 'value': [200, 280]}, {'name': 'gds12', 'category': 4, 'symbolSize': 60, 'value': [300, 280]}, {'name': 'gds13', 'category': 4, 'symbolSize': 60, 'value': [0, 360]}, {'name': 'gds14', 'category': 4, 'symbolSize': 60, 'value': [100, 360]}, {'name': 'gds15', 'category': 4, 'symbolSize': 60, 'value': [200, 360]}, {'name': 'gds18', 'category': 4, 'symbolSize': 60, 'value': [300, 360]}, {'name': 'gds19', 'category': 4, 'symbolSize': 60, 'value': [0, 440]}, {'name': 'shsx03', 'category': 0, 'symbolSize': 60, 'value': [500, 200]}, {'name': 'shsx04', 'category': 0, 'symbolSize': 60, 'value': [600, 200]}, {'name': 'shsx05', 'category': 0, 'symbolSize': 60, 'value': [700, 200]}, {'name': 'shsx06', 'category': 0, 'symbolSize': 60, 'value': [800, 200]}, {'name': 'shsx07', 'category': 0, 'symbolSize': 60, 'value': [500, 280]}, {'name': 'shsx08', 'category': 0, 'symbolSize': 60, 'value': [600, 280]}, {'name': 'shsx09', 'category': 0, 'symbolSize': 60, 'value': [700, 280]}, {'name': 'shsx11', 'category': 0, 'symbolSize': 60, 'value': [800, 280]}, {'name': 'zxsh', 'category': 1, 'symbolSize': 60, 'value': [1000, 200]}, {'name': 'zxsh2', 'category': 1, 'symbolSize': 60, 'value': [1100, 200]}, {'name': 'hbsz1', 'category': 2, 'symbolSize': 60, 'value': [2000, 0]}, {'name': 'hbsz2', 'category': 2, 'symbolSize': 60, 'value': [2100, 0]}, {'name': 'hbsz3', 'category': 2, 'symbolSize': 60, 'value': [2200, 0]}, {'name': 'hbsz4', 'category': 2, 'symbolSize': 60, 'value': [2300, 0]}, {'name': 'zxzq1', 'category': 3, 'symbolSize': 60, 'value': [2500, 0]}, {'name': 'zxzq2', 'category': 3, 'symbolSize': 60, 'value': [2600, 0]}, {'name': 'ztaisz1', 'category': 4, 'symbolSize': 60, 'value': [3000, 0]}, {'name': 'zxjtsz1', 'category': 0, 'symbolSize': 60, 'value': [3500, 0]}, {'name': 'zxjtsz2', 'category': 0, 'symbolSize': 60, 'value': [3600, 0]}, {'name': 'ztsz1', 'category': 1, 'symbolSize': 60, 'value': [2000, 200]}, {'name': 'ztsz2', 'category': 1, 'symbolSize': 60, 'value': [2100, 200]}, {'name': 'ctsz1', 'category': 2, 'symbolSize': 60, 'value': [2500, 200]}, {'name': 'ctsz2', 'category': 2, 'symbolSize': 60, 'value': [2600, 200]}, {'name': 'sslk1', 'category': 3, 'symbolSize': 60, 'value': [3000, 200]}, {'name': 'sslk2', 'category': 3, 'symbolSize': 60, 'value': [3100, 200]}, {'name': 'sslk21', 'category': 3, 'symbolSize': 60, 'value': [3200, 200]}, {'name': 'sslk22', 'category': 3, 'symbolSize': 60, 'value': [3300, 200]}, {'name': 'sslk3', 'category': 3, 'symbolSize': 60, 'value': [3000, 280]}, {'name': 'sslk4', 'category': 3, 'symbolSize': 60, 'value': [3100, 280]}, {'name': 'sslk5', 'category': 3, 'symbolSize': 60, 'value': [3200, 280]}, {'name': 'sslk6', 'category': 3, 'symbolSize': 60, 'value': [3300, 280]}, {'name': 'zxkbt2', 'category': 4, 'symbolSize': 60, 'value': [3500, 200]}, {'name': 'zxkbts1', 'category': 4, 'symbolSize': 60, 'value': [3600, 200]}, {'name': 'zxkbts2', 'category': 4, 'symbolSize': 60, 'value': [3700, 200]}, {'name': 'zxkbts3', 'category': 4, 'symbolSize': 60, 'value': [3800, 200]}, {'name': 'zxkbts4', 'category': 4, 'symbolSize': 60, 'value': [3500, 280]}, {'name': 'zxkbts5', 'category': 4, 'symbolSize': 60, 'value': [3600, 280]}, {'name': 'nfc01', 'category': 0, 'symbolSize': 60, 'value': [2000, 400]}, {'name': 'nfc02', 'category': 0, 'symbolSize': 60, 'value': [2100, 400]}, {'name': 'nfc03', 'category': 0, 'symbolSize': 60, 'value': [2200, 400]}, {'name': 'nfc04', 'category': 0, 'symbolSize': 60, 'value': [2300, 400]}, {'name': 'nfc05', 'category': 0, 'symbolSize': 60, 'value': [2000, 480]}, {'name': 'nfc06', 'category': 0, 'symbolSize': 60, 'value': [2100, 480]}, {'name': 'pakbt1', 'category': 1, 'symbolSize': 60, 'value': [2500, 400]}, {'name': 'pakbt2', 'category': 1, 'symbolSize': 60, 'value': [2600, 400]}, {'name': 'pakbt3', 'category': 1, 'symbolSize': 60, 'value': [2700, 400]}, {'name': 'pakbt4', 'category': 1, 'symbolSize': 60, 'value': [2800, 400]}, {'name': 'gxzq1', 'category': 2, 'symbolSize': 60, 'value': [3000, 400]}, {'name': 'gxzq2', 'category': 2, 'symbolSize': 60, 'value': [3100, 400]}, {'name': 'gxzq3', 'category': 2, 'symbolSize': 60, 'value': [3200, 400]}, {'name': 'gxzq4', 'category': 2, 'symbolSize': 60, 'value': [3300, 400]}, {'name': 'trade1', 'category': 3, 'symbolSize': 60, 'value': [0, 700]}, {'name': 'ubiq2', 'category': 4, 'symbolSize': 60, 'value': [500, 700]}, {'name': 'ubiq5', 'category': 4, 'symbolSize': 60, 'value': [600, 700]}, {'name': 'ubiqbj1', 'category': 4, 'symbolSize': 60, 'value': [700, 700]}, {'name': 'ubiqbj2', 'category': 4, 'symbolSize': 60, 'value': [800, 700]}, {'name': 'zxzqbj1', 'category': 0, 'symbolSize': 60, 'value': [1000, 700]}, {'name': 'trade3', 'category': 1, 'symbolSize': 60, 'value': [2000, 700]}, {'name': 'htaizq1', 'category': 2, 'symbolSize': 60, 'value': [2500, 700]}, {'name': 'htaizq2', 'category': 2, 'symbolSize': 60, 'value': [2600, 700]}, {'name': 'htaizq3', 'category': 2, 'symbolSize': 60, 'value': [2700, 700]}, {'name': 'htaizq4', 'category': 2, 'symbolSize': 60, 'value': [2800, 700]}, {'name': 'htaizq5', 'category': 2, 'symbolSize': 60, 'value': [2500, 780]}, {'name': 'ubhk1', 'category': 3, 'symbolSize': 60, 'value': [3000, 700]}, {'name': 'ubhk2', 'category': 3, 'symbolSize': 60, 'value': [3100, 700]}, {'name': 'gtaizq1', 'category': 4, 'symbolSize': 60, 'value': [3500, 700]}, {'name': 'zxzj1', 'category': 0, 'symbolSize': 60, 'value': [2000, 1000]}, {'name': 'zxzj2', 'category': 0, 'symbolSize': 60, 'value': [2100, 1000]}, {'name': 'htzj3', 'category': 1, 'symbolSize': 60, 'value': [2500, 1000]}, {'name': 'htzj4', 'category': 1, 'symbolSize': 60, 'value': [2600, 1000]}, {'name': 'htzj5', 'category': 1, 'symbolSize': 60, 'value': [2700, 1000]}, {'name': 'htyd2', 'category': 2, 'symbolSize': 60, 'value': [3000, 1000]}, {'name': 'htyd3', 'category': 2, 'symbolSize': 60, 'value': [3100, 1000]}, {'name': 'htyd4', 'category': 2, 'symbolSize': 60, 'value': [3200, 1000]}, {'name': 'htyd5', 'category': 2, 'symbolSize': 60, 'value': [3300, 1000]}, {'name': 'htyd6', 'category': 2, 'symbolSize': 60, 'value': [3000, 1080]}, {'name': 'jkzj1', 'category': 3, 'symbolSize': 60, 'value': [3500, 1000]}, {'name': 'jkzj2', 'category': 3, 'symbolSize': 60, 'value': [3600, 1000]}, {'name': 'jkzj3', 'category': 3, 'symbolSize': 60, 'value': [3700, 1000]}, {'name': 'dxyd1', 'category': 4, 'symbolSize': 60, 'value': [2000, 1200]}]
let dataLink = [{'source': 'ctsz1', 'value': 'tcp snap', 'target': 'sslk5'}, {'source': 'gds19', 'value': 'tcp ot', 'target': 'gds13'}, {'source': 'gds19', 'value': 'tcp ot', 'target': 'gds15'}, {'source': 'gds19', 'value': 'udp snap', 'target': 'gds18'}, {'source': 'gds19', 'value': 'udp snap', 'target': 'gds15'}, {'source': 'gds19', 'value': 'udp snap', 'target': 'gds11'}, {'source': 'gds19', 'value': 'udp snap', 'target': 'gds14'}, {'source': 'gds19', 'value': 'udp snap', 'target': 'gds13'}, {'source': 'gds19', 'value': 'tcp snap', 'target': 'trade1'}, {'source': 'gds19', 'value': 'tcp ot', 'target': 'trade1'}, {'source': 'gds19', 'value': 'tcp snap', 'target': 'trade2'}, {'source': 'gds19', 'value': 'tcp ot', 'target': 'trade2'}, {'source': 'gds19', 'value': 'tcp snap', 'target': 'trade3'}, {'source': 'gds19', 'value': 'tcp ot', 'target': 'trade3'}, {'source': 'gds19', 'value': 'tcp snap', 'target': 'trade2'}, {'source': 'gds19', 'value': 'tcp snap', 'target': 'trade3'}, {'source': 'gds19', 'value': 'udp snap', 'target': 'ztsz1'}, {'source': 'nfc06', 'value': 'udp snap', 'target': 'nfc04'}, {'source': 'nfc06', 'value': 'udp snap', 'target': 'nfc05'}, {'source': 'nfc06', 'value': 'udp snap', 'target': 'nfc01'}, {'source': 'nfc06', 'value': 'udp snap', 'target': 'nfc03'}, {'source': 'nfc06', 'value': 'udp snap', 'target': 'nfc02'}, {'source': 'nfc06', 'value': 'udp snap', 'target': 'nfc03'}, {'source': 'nfc06', 'value': 'udp md', 'target': 'nfc03'}, {'source': 'pakbt3', 'value': 'tcp ot', 'target': 'sslk1'}, {'source': 'gds15', 'value': 'udp md', 'target': 'gds19'}, {'source': 'gds15', 'value': 'udp md', 'target': 'gds18'}, {'source': 'gds15', 'value': 'udp md', 'target': 'gds11'}, {'source': 'gds15', 'value': 'udp md', 'target': 'gds14'}, {'source': 'gds15', 'value': 'udp md', 'target': 'gds13'}, {'source': 'gds15', 'value': 'udp snap', 'target': 'shsx11'}, {'source': 'gds15', 'value': 'udp snap', 'target': 'gds19'}, {'source': 'gds15', 'value': 'udp snap', 'target': 'gds18'}, {'source': 'gds15', 'value': 'udp snap', 'target': 'gds14'}, {'source': 'gds15', 'value': 'udp snap', 'target': 'gds13'}, {'source': 'htsq1', 'value': 'udp md', 'target': 'jkzj1'}, {'source': 'hbzq4', 'value': 'udp snap', 'target': 'shsx08'}, {'source': 'hbzq4', 'value': 'tcp snap', 'target': 'shsx06'}, {'source': 'hbzq4', 'value': 'udp md', 'target': 'hbsz3'}, {'source': 'hbzq4', 'value': 'udp md', 'target': 'hbsz2'}, {'source': 'hbzq4', 'value': 'udp md', 'target': 'hbsz1'}, {'source': 'hbzq4', 'value': 'udp md', 'target': 'hbsz4'}, {'source': 'hbzq4', 'value': 'udp md', 'target': 'hbzq2'}, {'source': 'hbzq4', 'value': 'tcp snap', 'target': 'trade1'}, {'source': 'hbzq4', 'value': 'tcp ot', 'target': 'shsx05'}, {'source': 'shsx06', 'value': 'udp md', 'target': 'ctjq1'}, {'source': 'shsx06', 'value': 'udp md', 'target': 'ctjq2'}, {'source': 'shsx06', 'value': 'udp md', 'target': 'hbzq2'}, {'source': 'shsx06', 'value': 'udp md', 'target': 'jkzj1'}, {'source': 'shsx06', 'value': 'udp md', 'target': 'shsx05'}, {'source': 'ztsz2', 'value': 'tcp ot', 'target': 'nfc06'}, {'source': 'ztsz2', 'value': 'tcp snap', 'target': 'pakbt2'}, {'source': 'ztsz2', 'value': 'tcp snap', 'target': 'nfc06'}, {'source': 'sslk21', 'value': 'udp snap', 'target': 'sslk6'}, {'source': 'sslk21', 'value': 'udp snap', 'target': 'sslk5'}, {'source': 'sslk21', 'value': 'udp snap', 'target': 'sslk1'}, {'source': 'sslk21', 'value': 'udp snap', 'target': 'sslk3'}, {'source': 'sslk21', 'value': 'udp snap', 'target': 'sslk4'}, {'source': 'sslk21', 'value': 'udp snap', 'target': 'sslk22'}, {'source': 'htdlhk1', 'value': 'udp md', 'target': 'jkzj1'}, {'source': 'htzj3', 'value': 'udp md', 'target': 'shsx06'}, {'source': 'hbzq5', 'value': 'tcp snap', 'target': 'gds15'}, {'source': 'hbzq5', 'value': 'tcp ot', 'target': 'gds19'}, {'source': 'htzz1', 'value': 'udp md', 'target': 'jkzj1'}, {'source': 'jkzj1', 'value': 'udp md', 'target': 'jkzj2'}, {'source': 'jkzj1', 'value': 'udp md', 'target': 'jkzj3'}, {'source': 'jkzj1', 'value': 'udp md', 'target': 'htzj5'}, {'source': 'ztsz1', 'value': 'udp md', 'target': 'nfc06'}, {'source': 'ztsz1', 'value': 'tcp snap', 'target': 'sslk21'}, {'source': 'ztsz1', 'value': 'tcp snap', 'target': 'nfc06'}, {'source': 'htaizq5', 'value': 'tcp snap', 'target': 'gds19'}, {'source': 'shsx08', 'value': 'udp snap', 'target': 'shsx06'}, {'source': 'shsx08', 'value': 'udp snap', 'target': 'shsx05'}, {'source': 'shsx08', 'value': 'udp snap', 'target': 'shsx04'}, {'source': 'shsx08', 'value': 'udp md', 'target': 'hbzq4'}, {'source': 'shsx08', 'value': 'udp md', 'target': 'dxyd1'}, {'source': 'shsx08', 'value': 'udp md', 'target': 'htyd6'}, {'source': 'sslk1', 'value': 'udp md', 'target': 'sslk6'}, {'source': 'sslk1', 'value': 'udp md', 'target': 'sslk21'}, {'source': 'sslk1', 'value': 'udp md', 'target': 'sslk5'}, {'source': 'sslk1', 'value': 'udp md', 'target': 'sslk3'}, {'source': 'sslk1', 'value': 'udp md', 'target': 'sslk4'}, {'source': 'sslk1', 'value': 'udp md', 'target': 'sslk22'}, {'source': 'sslk1', 'value': 'udp md', 'target': 'zxjtsz1'}, {'source': 'sslk1', 'value': 'tcp ot', 'target': 'ctsz1'}, {'source': 'sslk1', 'value': 'tcp ot', 'target': 'gtaizq1'}, {'source': 'sslk1', 'value': 'udp ot', 'target': 'sslk6'}, {'source': 'sslk1', 'value': 'udp ot', 'target': 'sslk5'}, {'source': 'sslk1', 'value': 'udp ot', 'target': 'sslk3'}, {'source': 'sslk1', 'value': 'tcp snap', 'target': 'zxkbts3'}, {'source': 'sslk1', 'value': 'tcp snap', 'target': 'zxkbts4'}, {'source': 'shsx04', 'value': 'udp md', 'target': 'shsx05'}, {'source': 'shsx04', 'value': 'udp md', 'target': 'shsx11'}, {'source': 'shsx04', 'value': 'udp md', 'target': 'shsx08'}, {'source': 'shsx04', 'value': 'udp md', 'target': 'trade1'}, {'source': 'shsx04', 'value': 'udp md', 'target': 'shsx11'}, {'source': 'zxzqbj1', 'value': 'udp snap', 'target': 'trade1'}, {'source': 'zxzqbj1', 'value': 'tcp snap', 'target': 'trade1'}]
option = {
title: {
text: "传输链路图",
top: "top",
left: "center"
},
itemStyle: {
normal: {
color: '#000',
},
shadowBlur: 10
},
animationDuration: 1500,
animationEasingUpdate: 'quinticInOut',
xAxis: {
show: false,
type: 'value'
},
yAxis: {
show: false,
type: 'value'
},
series: [{
type: 'graph',
coordinateSystem: 'cartesian2d',
legendHoverLink: false,
hoverAnimation: true,
nodeScaleRatio: false,
//建头
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [2, 6],
edgeLabel: {
show: false,
normal: {
show: true,
position: 'middle',
textStyle: {
fontSize: 12
},
formatter: "{c}"
}
},
focusNodeAdjacency: true,
roam: true,
categories: [{
name: '一级关系',
itemStyle: { //可配置颜色
normal: {
color: "#A170DD",
}
}
}, {
name: '二级关系',
itemStyle: { //可配置颜色
normal: {
color: "#41B1EF",
}
}
}, {
name: '三级关系',
itemStyle: { //可配置颜色
normal: {
color: "#E8B842",
}
}
}, {
name: '四级关系',
itemStyle: { //可配置颜色
normal: {
color: "#667AED",
}
}
},
{
name: '五级关系',
itemStyle: { //可配置颜色
normal: {
color: "#57A79F",
}
}
}],
//圆形上面的文字
label: {
normal: {
position: "inside",
show: true,
textStyle: {
color: '#fff',
fontSize: 12
},
}
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#157eff'
}, {
offset: 1,
color: '#35c2ff'
}]),
},
shadowBlur: 10
},
// lineStyle: {
// normal: {
// width: 1,
// shadowColor: 'none',
// color: '#0250FD'
// },
// },
lineStyle: {
normal: {
opacity: 0.9,
width: 1,
curveness: 0.1
}
},
data: dataInfo,
links: dataLink
}]
}
截图如下
