<div ref="graphCharts" style="height:40vh;width: 100%;">div>
getGraphCharts() {
const chartDom = this.$refs.graphCharts;
const myChart = echarts.init(chartDom);
let nodes = [{
x: 100,
y: 800,
nodeName: '传感器',
svgPath: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAABE9JREFUWEfFl1uIVWUUx39r6zxFGIpCkjBgBpUP+ZDkQzT1EDV4CWFOcfY5TUpTlCkkOvR2nLcojW4aQXQ7l5EzRWDRdCFmwsR6kCQaX6QCnQoKzMmXcJy94vv2t/fsc/Y+l3Eiv7f93dZ/r7W+/38tAdAyB/DYBvQCx8Vnq5nvNHSUNQSsEJ/TnfZaO1WOAXcDfxAwKkUOiFYZAOrASWAa2ATMiM/6Vpc6wIMOsNl2EfhSfHItz1T5EVjm7Nzk7Ow2AMzCOfHptygrbEb4GNghPu82X+iMlwgYweM34B9gFfAiMJYFQqs8BryDskUKfOK88Smw3gCYQXlPCuxx4bjRXizskjxHUgCq9BOwEeESwghwHfAGMGH+Snz2ps7UeBrlMAGrpcjv7kdfReg3AOooGxCeRzmJksOjRA+rJMefWS7VMn14HAROocwg7AcGxef9zP11VjJr4z6CUEfYhPIcwjfi3PErsLrhcMCISZIuk2ud+JztkDOlpnUTviELwIF4BGE5SxnjMvsQhg3ibkF0YfwgAS8BT+IxRQ9fSY4LMYCMWL8JPIEw2Y0XWu5R+kwCis/OrD0tAbhEOYrwcOpgO1ChwYYhPi3ttAcQEpR5cvfGN3pMmG8ppj2jNSaY42uI10yylhYNIHmBVtFOAKK8iThj0QDs84mG80gHD8yHoFsPWEpWpqTAmfhlRCFoDmq7EHSRA4Z7IsaMeCDSgzECjkR/l3ShVngwwiEFxrXKRpQVDXOj9DLHrW7uBMre5hxIaI+l7QjATwSULb16bJZ8mHQNAKq8AuxBeEvyDFkA8J01JhyTPNvUAAj4JSQWljUDsAy6hBLCRwT2vsdFK9yP8DlzPMASPgTOis+GFIAat8d/m2dKE98Wg5kzANRqAwScTwGIREkYQjkEHBWNhMLjLgK+RTgkefalAFTmiUQKvO1CEEu2nQtDcJ8D+kEGgDuA7y0bwlP2Z7XMzXiWxwvAM8Ba8a28/vchMMIHA/TQxyyTKMUoB0wxcj2wE2VQCuxKAaizPA5Bjgua+LYhaJ67zJUMDwwgTKM8a4FAbwigwm1WJuFMsqBoKD7MRs+SkDkzmckD4bON9oR4m3ggvhNy4jM2r4YGBExLgb//Bx4YMMbDB9RmZFHpNaHia68FSfk1VLuQGkHpuyoxiikzKUTt4tVqzYiXS7isLc0l2UqWMs6sZULzKl4Xn91XYzdO5CqvOX4xPcPPBGyxa1d4WXZwsXVRKlQkT3ExxmMQNcqoJbrkOI3H1tZleaKJyAKhNR5COS8+p+xrUcblUSdOTQfiZiddln/WrjEZlrztdlLDEpfHYULtN23ZDczZuUtSsO1dw9Aa+1FeaNWYdN2aObk1SXUnMIxyD7DGyDGw3dGrZbgkgjat2S0Lbk4TtL0W4RzwF8o6sFqRMp5IxnRzqmwPk3CB7bkDYWTXyKupikz184MU+KIts86358eBsvHUvz66PcgtMrWDAAAAAElFTkSuQmCC'
},{
x: 300,
y: 800,
nodeName: '电流传感器',
svgPath: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAaRJREFUWEft1j9rFGEQx/HPrElhoVaCXUQQRN+BWNwVYm2hkCyXEEilVV6BJ2ghpLQQLBI5TtSAhZ2dhXZWgoWVWvoXEbGJ7CN3Joea5G7vvDPNTrnPzM73+c3zzDxhjy3K5k8tNdRMWYtZb8rGDfIrD3DXkuQ21iK3OOjHZdfLA7Q0Za4IT2JOvWyCQX4VQKVApUClQF8FUtuqcLTXTJJapxENai7d9eQD1iO33s9/EEAqlayfU+FqNDR3c5k8QCdzOBxzPu4E8X8ACvVo7Fy6CmAcCrzEgsIBmUu4sK3WEy1BWJYcQlNyTng8WYBw2ZR7NnzCV/sd990t4bxCXeYmTv0BMUYFVoSHkuXIXUxtD3ADzzcTdu77McxPBuCHGdPuSGqR656fTYituq/gW7ccWx2z0z3HoMA1zERuPrX1647vTDvZLU84IunELY0D4K3kuvCFruy7W3JfWMXBnu8YFPi3kVABFE5Ew6u9GkbPIndm1HH8mt8eJMOfhM8yizHr0WgALadlzip+3fmeZdK2b39n2Oe9DU9jwYuRX0TDb3j4iJ/Q4cIhL1T0YwAAAABJRU5ErkJggg==',
}, {
x: 800,
y: 1050,
nodeName: '模块3',
svgPath: ''
},{
x: 20,
y: 300,
nodeName: '节点1',
svgPath: '',
},{
x: 150,
y: 30,
nodeName: '温湿度传感器',
svgPath: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA3pJREFUWEftl11oHFUUx3//3VRLSVEpCFURQehD0NgPRVBBfdDSlyamEurciba0WJX6YLQFfZCKomAEsYglRcF0Z7ZVa61Wa1q0H4gUkVitIfriW6mgL/GraGn2yJ1M1tntbFLtlkXogWWHmXvn/OZ/zj3nXtFiU4v9MyOAxSykQjcFdsvxdbOBGwLYDhYwwTNAkQpjFOgAZmNsVciHzQLJBbC9XMw4wxivyxFPObMYBzzHKRZpNePNgMgHmHR0vxxL651YzD5gWxbsXEDyAUps8i9V3+R/1myaZ/8F5ALAWSlgER0KGfMStyQEFjMqx3WtBDC5yaLVKgX+fwAWcQ+iUy6ppg3t7JIw5l8pYENcSRujwFyM7ulK9/kBiNmLGMX4DVhFhdvUx495MjQdwCKeBpYq5NYkaWOGgXE5Vp53AIu5EziAuEUBRxKAbdxMkU+Ax+XYWg/RVAUs5jNgvxzP1vSPmMcAJ8eNMwJYmU6M/RirFfJxKuM/SRixDPEORpdCPq226jIrkr2CY171Xok7kuuTfE47R4HN9SqcoUDabvfI8WpmH1AFSIHWY/TTxnKtTLLdx9pL/rYcL1fnbecajCMKmG8RGxG99SrUAFjE3YgH5bi3TsIagNThTuCQB7VBZtHOqalqWTd3CHGCv3iFixjDkgT9cmpMLUDMAOJnBbxY/Yo9zOFX/mAWl6qXXzKSb8RYIMfaNPkG8mJsUbIa3lLIVRazE+OAQl7LByjzPhO8oT4+yMj/LtCDMayQZZn4LqfIGgV0WcwTwBVy9OctNYv5ntP00kYHRq9Cehop8BRirgKezABEPoOBXXKsyCjwgi80cjxvEQ9R4CYFrKkHMJ8HExxVyGVJIytyiYJkVSRWG4Iy3cAmBSysiWOJxerjq5p75WSL7sfutpguYL0cd50BEHEQ8Z0cj6RFKZajlAuQJtcOxHEFiay5ZmVeApYoSAoPNsgc2jmGsUEh72XU8zvqL+TYnDanAX6nU+s42RAghfgIcYjZDKmHn6ov3MXl/MkDGI/KcXWNIttZRCVRaYv/2rqV4JPuYQos1n1JPaha44OJj1eBfsQIExymyO0YS4BBOTbkJluJ+RQYBK73SzQd44vRt1RYl9eQpj2a2ZtcS1tSGW9AfMNpjmkVPzQKTUZ6D+p/3kbkGGk0Z8az4UzOzvV5ywH+BtuEkDDGCZR2AAAAAElFTkSuQmCC',
},{
x: 250,
y: 30,
nodeName: '温湿度传感器',
svgPath: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA3pJREFUWEftl11oHFUUx3//3VRLSVEpCFURQehD0NgPRVBBfdDSlyamEurciba0WJX6YLQFfZCKomAEsYglRcF0Z7ZVa61Wa1q0H4gUkVitIfriW6mgL/GraGn2yJ1M1tntbFLtlkXogWWHmXvn/OZ/zj3nXtFiU4v9MyOAxSykQjcFdsvxdbOBGwLYDhYwwTNAkQpjFOgAZmNsVciHzQLJBbC9XMw4wxivyxFPObMYBzzHKRZpNePNgMgHmHR0vxxL651YzD5gWxbsXEDyAUps8i9V3+R/1myaZ/8F5ALAWSlgER0KGfMStyQEFjMqx3WtBDC5yaLVKgX+fwAWcQ+iUy6ppg3t7JIw5l8pYENcSRujwFyM7ulK9/kBiNmLGMX4DVhFhdvUx495MjQdwCKeBpYq5NYkaWOGgXE5Vp53AIu5EziAuEUBRxKAbdxMkU+Ax+XYWg/RVAUs5jNgvxzP1vSPmMcAJ8eNMwJYmU6M/RirFfJxKuM/SRixDPEORpdCPq226jIrkr2CY171Xok7kuuTfE47R4HN9SqcoUDabvfI8WpmH1AFSIHWY/TTxnKtTLLdx9pL/rYcL1fnbecajCMKmG8RGxG99SrUAFjE3YgH5bi3TsIagNThTuCQB7VBZtHOqalqWTd3CHGCv3iFixjDkgT9cmpMLUDMAOJnBbxY/Yo9zOFX/mAWl6qXXzKSb8RYIMfaNPkG8mJsUbIa3lLIVRazE+OAQl7LByjzPhO8oT4+yMj/LtCDMayQZZn4LqfIGgV0WcwTwBVy9OctNYv5ntP00kYHRq9Cehop8BRirgKezABEPoOBXXKsyCjwgi80cjxvEQ9R4CYFrKkHMJ8HExxVyGVJIytyiYJkVSRWG4Iy3cAmBSysiWOJxerjq5p75WSL7sfutpguYL0cd50BEHEQ8Z0cj6RFKZajlAuQJtcOxHEFiay5ZmVeApYoSAoPNsgc2jmGsUEh72XU8zvqL+TYnDanAX6nU+s42RAghfgIcYjZDKmHn6ov3MXl/MkDGI/KcXWNIttZRCVRaYv/2rqV4JPuYQos1n1JPaha44OJj1eBfsQIExymyO0YS4BBOTbkJluJ+RQYBK73SzQd44vRt1RYl9eQpj2a2ZtcS1tSGW9AfMNpjmkVPzQKTUZ6D+p/3kbkGGk0Z8az4UzOzvV5ywH+BtuEkDDGCZR2AAAAAElFTkSuQmCC',
},{
x: 400,
y: 300,
nodeName: '节点4',
svgPath: '',
},{
x: 550,
y: 400,
nodeName: '节点5',
svgPath: '',
},{
x: 650,
y: 400,
nodeName: '节点6',
svgPath: '',
},{
x: 750,
y: 400,
nodeName: '节点7',
svgPath: '',
},{
x: 850,
y: 400,
nodeName: '节点8',
svgPath: '',
},{
x: 950,
y: 400,
nodeName: '节点9',
svgPath: '',
},{
x: 1050,
y: 400,
nodeName: '节点10',
svgPath: '',
},{
x: 1150,
y: 400,
nodeName: '节点11',
svgPath: '',
}
]
let charts = {
nodes: [],
linesData: [{
coords: [
[20, 1200],
[20, 1000]
]
}, {
coords: [
[20, 800],
[20, 30],
[100, 30],
[100, 1100],
]
}, {
coords: [
[200, 1100],
[200, 600]
]
}, {
coords: [
[200, 400],
[200, 300],
]
}, {
coords: [
[200, 300],
[150, 300],
[150, 30]
]
},{
coords: [
[200, 300],
[250, 300],
[250, 30]
]
}, {
coords: [
[300, 1100],
[300, 30],
[400, 30],
[400, 400],
]
}, {
coords: [
[400, 600],
[400, 1100]
]
}, {
coords: [
[800, 1100],
[800, 900]
]
}, {
coords: [
[800, 900],
[500, 900],
[500, 600]
]
}, {
coords: [
[500, 400],
[500, 30],
[550, 30],
[550, 300]
]
}, {
coords: [
[800, 900],
[600, 900],
[600, 600]
]
}, {
coords: [
[600, 400],
[600, 30],
[650, 30],
[650, 300]
]
}, {
coords: [
[800, 900],
[700, 900],
[700, 600]
]
}, {
coords: [
[700, 400],
[700, 30],
[750, 30],
[750, 300]
]
}, {
coords: [
[800, 900],
[800, 900],
[800, 600]
]
}, {
coords: [
[800, 400],
[800, 30],
[850, 30],
[850, 300]
]
}, {
coords: [
[800, 900],
[900, 900],
[900, 600]
]
}, {
coords: [
[900, 400],
[900, 30],
[950, 30],
[950, 300]
]
}, {
coords: [
[800, 900],
[1000, 900],
[1000, 600]
]
}, {
coords: [
[1000, 400],
[1000, 30],
[1050, 30],
[1050, 300]
]
}, {
coords: [
[800, 900],
[1100, 900],
[1100, 600]
]
}, {
coords: [
[1100, 400],
[1100, 30],
[1150, 30],
[1150, 300]
]
}],
staticLine: [{
coords: [
[50, 1100],
[1150, 1100]
]
}],
controlLine: [{
coords: [
[0,1000],
[20,800]
]
}, {
coords: [
[180, 600],
[200, 400]
],
}, {
coords: [
[380, 600],
[400, 400]
]
}, {
coords: [
[480, 600],
[500,400]
]
}, {
coords: [
[580, 600],
[600, 400]
]
}, {
coords: [
[680, 600],
[700, 400]
]
}, {
coords: [
[780, 600],
[800, 400]
]
}, {
coords: [
[880, 600],
[900, 400]
]
}, {
coords: [
[980, 600],
[1000, 400]
]
}, {
coords: [
[1080, 600],
[1100, 400]
]
}]
}
for (let j = 0; j < nodes.length; j++) {
const {
x,
y,
nodeName,
svgPath,
symbolSize
} = nodes[j];
let node = {
nodeName,
value: [x, y],
symbolSize: symbolSize || 20,
symbol: 'image://' + svgPath,
itemStyle: {
color: 'orange',
}
}
charts.nodes.push(node)
}
let option = {
backgroundColor: "transparent",
xAxis: {
min: 0,
max: 1200,
show: false,
type: 'value'
},
yAxis: {
min: 0,
max: 1200,
show: false,
type: 'value'
},
series: [{
type: 'graph',
coordinateSystem: 'cartesian2d',
label: {
show: true,
position: 'bottom',
color: 'orange',
formatter: function (item) {
return item.data.nodeName
}
},
z:3,
data: charts.nodes,
}, {
type: 'lines',
polyline: true,
coordinateSystem: 'cartesian2d',
lineStyle: {
type: 'solid',
width: 1,
color: '#175064',
curveness: 0.3
},
effect: {
show: true,
trailLength: 0.1,
symbol: 'arrow',
color: 'orange',
symbolSize: 8
},
data: charts.linesData
}, {
type: 'lines',
polyline: true,
coordinateSystem: 'cartesian2d',
lineStyle: {
type: 'solid',
width: 3,
color: '#175064',
curveness: 0.3
},
data: charts.staticLine
}, {
type: 'lines',
polyline: true,
coordinateSystem: 'cartesian2d',
lineStyle: {
type: 'solid',
width: 2,
color: '#175064',
curveness: 0.3
},
data: charts.controlLine
}]
};
option && myChart.setOption(option);
myChart.resize();
},
