echarts网络拓扑图数据传输图

- 日理万妓 2022-01-17 00:47 423阅读 0赞

***全部样式代码打包下载：***  
[https://download.csdn.net/download/qq\_32442967/11237750][https_download.csdn.net_download_qq_32442967_11237750]

--------------------

**echarts原来的样式**  
[https://gallery.echartsjs.com/editor.html?c=xH8p6JJyu0][https_gallery.echartsjs.com_editor.html_c_xH8p6JJyu0]  
![在这里插入图片描述][20190612161740690.gif]

**修改为样式1**  
![右侧单图标][2019061216180636.gif]

**修改为样式2**  
![右侧多图标][20190612161952957.gif]

--------------------

## 代码展示 ##

原样式访问网址查看  
[https://gallery.echartsjs.com/editor.html?c=xH8p6JJyu0][https_gallery.echartsjs.com_editor.html_c_xH8p6JJyu0]

--------------------

\*\*样式1代码：\*\*

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title>网络拓扑图1</title>
        <script type="text/javascript" src="js/echarts.min.js"></script>
    </head>
    
    <body>
    <div id="chart" style="height: 500px;width: 100%;">
    
    </div>
    <script> /*右侧图表数据*/ var nodesM = [ { name: '服务器', img: 'fwq.png' } ]; //左侧图表数据 var nodes = [ { name: '存储设备1', img: 'cc.png', state: '1' }, { name: '存储设备2', img: 'cc.png', state: '1' }, { name: '防火墙', img: 'fhq.png', state: '0' }, { name: '网络设备1', img: 'wlsb.png', state: '1' }, { name: '网络设备2', img: 'wlsb.png', state: '0' }, { name: '网络设备3', img: 'wlsb.png', state: '1' } ]; var charts = { nodes: [], links: [], linesData: [] }; var x = 1; var y = 1; var dataMap = new Map(); for (var j = 0; j < nodes.length; j++) { var node = { name: nodes[j].name, value: [x, y], symbolSize: 40, symbol: 'image://images/' + nodes[j].img, itemStyle: { normal: { color: '#12b5d0', } } }; dataMap.set(nodes[j].name, [x, y]); charts.nodes.push(node); y += 2; } //右侧数据显示 for (var k = 0; k < nodesM.length; k++) { var node = { name: nodesM[k].name, value: [x + 4, y / 2], symbolSize: 60, symbol: 'image://images/' + nodesM[k].img }; dataMap.set(nodesM[k].name, [x + 4, y / 2]); charts.nodes.push(node) } //画线 var labelName = ''; for (var i = 0; i < nodes.length; i++) { //通过传输状态state 显示传输文字提示 if (nodes[i].state === '1') { labelName = '数据传输中' } else { labelName = '暂停传输' } var link = { source: nodes[i].name, target: nodesM[0].name, label: { normal: { show: true, formatter: labelName } }, lineStyle: { normal: { color: '#d1d1d1' } } }; charts.links.push(link); //判断传输状态1 传输动效改变线条颜色 if (nodes[i].state === '1') { link.lineStyle.normal.color = '#0fff17'; var lines = [{ coord: dataMap.get(nodes[i].name) }, { coord: dataMap.get(nodesM[0].name) }]; charts.linesData.push(lines) } } option = { title: { text: '网络拓扑图', textStyle: { fontWeight: 'normal', color: "#FFF" } }, backgroundColor: "#1b2735", xAxis: { show: false, type: 'value' }, yAxis: { show: false, type: 'value' }, series: [{ type: 'graph', layout: 'none', coordinateSystem: 'cartesian2d', symbolSize: 50, label: { normal: { show: true, position: 'bottom', color: '#FFF' } }, lineStyle: { normal: { width: 2, shadowColor: 'none', curveness: '0.06' } }, edgeSymbolSize: 8, data: charts.nodes, links: charts.links, itemStyle: { normal: { label: { show: true, formatter: function (item) { return item.data.name } } } } }, { name: 'A', type: 'lines', coordinateSystem: 'cartesian2d', effect: { show: true, trailLength: 0, symbol: 'arrow', color: '#0fff17', symbolSize: 8 }, lineStyle: { // 箭头曲线 curveness (0-1) curveness: '0.06' // } }, data: charts.linesData }] }; var dom = document.getElementById("chart"); var myChart = echarts.init(dom); myChart.setOption(option); window.onresize = myChart.resize; </script>
    </body>
    
    </html>

--------------------

**样式2代码：**

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title>网络拓扑图2</title>
    		<script type="text/javascript" src="js/echarts.min.js"></script>
    	</head>
    
    	<body>
    		<div id="chart" style="height: 500px;width: 100%;">
    
    		</div>
    		<script> /*右侧服务器数据*/ var nodesM = [ { name: '服务器', img: 'fwq.png' },{ name: '服务器1', img: 'fwq.png' },{ name: '服务器2', img: 'fwq.png' } ]; var nodes = [ { name: '存储设备1', img: 'cc.png', state:'1' }, { name: '存储设备2', img: 'cc.png', state:'1' }, { name: '防火墙', img: 'fhq.png', state:'0' }, { name: '网络设备1', img: 'wlsb.png', state:'1' }, { name: '网络设备2', img: 'wlsb.png', state:'0' } ]; var links = [{ source: '存储设备2', target: '服务器1', state:'1' }, { source: '存储设备1', target: '服务器', state:'1' }, { source: '防火墙', target: '服务器', state:'0' }, { source: '网络设备1', target: '服务器', state:'1' }, { source: '网络设备2', target: '服务器', state:'0' } ]; var charts = { nodes: [], links: [], linesData: [] }; var x = 1; var y = 1; var dataMap = new Map(); for(var j = 0; j < nodes.length; j++) { var node = { name: nodes[j].name, value: [x, y], symbolSize: 50, symbol: 'image://images/' + nodes[j].img, itemStyle: { normal: { color: '#12b5d0', } } }; dataMap.set(nodes[j].name, [x, y]); charts.nodes.push(node); y+=2; } //右侧数据显示 for (var k = 0; k < nodesM.length; k++){ var node = { name: nodesM[k].name, value: [x+4, y/nodesM.length+k*2], symbolSize: 60, symbol: 'image://images/'+nodesM[k].img, itemStyle: { normal: { color: '#12b5d0', } } }; dataMap.set(nodesM[k].name, [x+4, y/nodesM.length+k*2]); charts.nodes.push(node) } for(var i = 0; i < links.length; i++) { //通过传输状态state 显示传输文字提示 if (links[i].state === 1){ links[i].name = '数据传输中' } else{ links[i].name = '暂停传输中' } var link = { source: links[i].source, target: links[i].target, // target: nodesM[0].name, label: { normal: { show: true, formatter: links[i].name } }, lineStyle: { normal: { color: '#d1d1d1' } } }; charts.links.push(link); //判断传输状态1 传输动效改变线条颜色 if(links[i].state === '1'){ link.lineStyle.normal.color='#0fff17'; var lines = [{ coord: dataMap.get(links[i].source) }, { coord: dataMap.get(links[i].target) }]; charts.linesData.push(lines) } } option = { title: { text: '网络拓扑图', textStyle: { fontWeight: 'normal', color: "#FFF" } }, backgroundColor: "#1b2735", xAxis: { show: false, type: 'value' }, yAxis: { show: false, type: 'value' }, series: [{ type: 'graph', layout: 'none', coordinateSystem: 'cartesian2d', symbolSize: 50, label: { normal: { show: true, position: 'bottom', color: '#FFF' } }, lineStyle: { normal: { width: 2, shadowColor: 'none', curveness:'0.06' } }, edgeSymbolSize: 8, data: charts.nodes, links: charts.links, itemStyle: { normal: { label: { show: true, formatter: function(item) { return item.data.name } } } } }, { name: 'A', type: 'lines', coordinateSystem: 'cartesian2d', effect: { show: true, trailLength: 0, symbol: 'arrow', color: '#0fff17', symbolSize: 8 }, lineStyle:{ // 箭头曲线 curveness (0-1) curveness:'0.06' // } }, data: charts.linesData }] }; var dom = document.getElementById("chart"); var myChart = echarts.init(dom); myChart.setOption(option); window.onresize = myChart.resize; </script>
    	</body>
    
    </html>

--------------------

\*\*内容结束\*\*

[https_download.csdn.net_download_qq_32442967_11237750]: https://download.csdn.net/download/qq_32442967/11237750
[https_gallery.echartsjs.com_editor.html_c_xH8p6JJyu0]: https://gallery.echartsjs.com/editor.html?c=xH8p6JJyu0
[20190612161740690.gif]: /images/20220117/b65a1414539545adbfa62583239ac252.png
[2019061216180636.gif]: /images/20220117/e24e66bbc4bd45cbb6e4e1268e75d87c.png
[20190612161952957.gif]: /images/20220117/97132807fa3145c2913e2c284e4efee7.png