【记录】echarts 拓扑图

<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: '电流传感器',//'电流传感器\n 24.813A',
           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: [//第1
                   [20, 1200],
                   [20, 1000]
               ]
           }, {
               coords: [
                   [20, 800],
                   [20, 30],
                   [100, 30],
                   [100, 1100],

               ]
           }, {
               coords: [//第2
                   [200, 1100],
                   [200, 600]
               ]
           }, {
               coords: [
                   [200, 400],
                   [200, 300],
               ]
           }, {
               coords: [
                   [200, 300],
                   [150, 300],
                   [150, 30]
               ]
           },{
               coords: [
                   [200, 300],
                   [250, 300],
                   [250, 30]
               ]
           }, {
               coords: [//第3
                   [300, 1100],
                   [300, 30],
                   [400, 30],
                   [400, 400],
               ]
           }, {
               coords: [
                   [400, 600],
                   [400, 1100]
               ]    
           }, {
               coords: [//第4
                   [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: [//第1
                   [0,1000],
                   [20,800]
               ]
           }, {
               coords: [//第2
                   [180, 600],
                   [200, 400]
               ],
           }, {
               coords: [//第3
                   [380, 600],
                   [400, 400]
               ]
           }, {
               coords: [//第4
                   [480, 600],
                   [500,400]
               ]    
           }, {
               coords: [//第5
                   [580, 600],
                   [600, 400]
               ]
           }, {
               coords: [//第6
                   [680, 600],
                   [700, 400]
               ]
           }, {
               coords: [//第7
                   [780, 600],
                   [800, 400]
               ]
           }, {
               coords: [//第8
                   [880, 600],
                   [900, 400]
               ]
           }, {
               coords: [//第9
                   [980, 600],
                   [1000, 400]
               ]
           }, {
               coords: [//第10
                   [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();
   },