echarts网络拓扑图动态流程图

叁歲伎倆 2021-12-23 13:51 1751阅读 0赞

networkMap V1.0

直接下载打包代码：  
[https://download.csdn.net/download/qq\_32442967/11258784][https_download.csdn.net_download_qq_32442967_11258784]

样式：  
![在这里插入图片描述][20190626093715159.gif]

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

可直接粘贴下面代码，修改js和图片路径即可实现。 需要引入js

echarts.min.js     (必须) 
    purple-passion.js     echarts主题文件(非必须但样式会改变)
    networkMap.js     页面js（必须）

页面 index.html

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>echarts</title>
    	</head>
    	<body>
    		<div id="chart" style="height: 500px;width: 100%;">
    		</div>
    	</body>
    </html>
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <script type="text/javascript" src="js/purple-passion.js"></script>
    <script type="text/javascript" src="js/networkMap.js"></script>

networkMap.js

//中间数据
    var nodesM = [{ 
        name: '服务器'
    }];
    //上下图表数据
    var nodes = [{ 
        name: '采集设备01',
        state: '1'
    },
        { 
            name: '采集设备002',
            state: '1'
        },
        { 
            name: '采集设备02',
            state: '1'
        },
        { 
            name: '采集设备1',
            state: '1'
        },
        { 
            name: '采集设备2',
            state: '1'
        },
        { 
            name: '采集设备3',
            state: '1'
        },
        { 
            name: '采集设备4',
            state: '1'
        },
        { 
            name: '采集设备5',
            state: '0'
        },
        { 
            name: '采集设备6',
            state: '1'
        },
        { 
            name: '采集设备7',
            state: '1'
        },
        { 
            name: '采集设备8',
            state: '0'
        },
        { 
            name: '采集设备9',
            state: '1'
        },
        { 
            name: '采集设备10',
            state: '1'
        },
        { 
            name: '采集设备11',
            state: '1'
        },
        { 
            name: '采集设备12',
            state: '1'
        },
        { 
            name: '采集设备13',
            state: '0'
        },
        { 
            name: '采集设备14',
            state: '1'
        },
        { 
            name: '采集设备15',
            state: '1'
        },
        { 
            name: '采集设备16',
            state: '1'
        },
        { 
            name: '采集设备17',
            state: '1'
        }
    ];
    
    var charts = { 
        nodes: [],
        links: [],
        linesData: []
    };
    var x = 0;
    var y = 1;
    var dataMap = new Map();
    var aValue = [];
    for (var j = 0; j < nodes.length; j++) { 
        if (j % 2 == 0) {  //偶数
            aValue = [x, y];
        } else { 
            aValue = [x, y - 2];
            x += 2;
        }
        var node = { 
            name: nodes[j].name,
            value: aValue,
            symbolSize: 40,
            // symbol: 'image://images/' + nodes[j].img,
            symbol: 'image://images/chart/bd1.png',
            itemStyle: { 
                normal: { 
                    color: '#12b5d0',
                    fontSize: 12,
                    fontWeight: 'normal'
                }
            }
        };
        dataMap.set(nodes[j].name, aValue);
        charts.nodes.push(node);
    }
    //中间数据显示
    for (var k = 0; k < nodesM.length; k++) { 
        var node = { 
            name: nodesM[k].name,
            value: [x / 2 + k - 1, y - 1],
            symbolSize: 100,
            // symbol: 'image://images/' + nodesM[k].img
            symbol: 'image://images/chart/bgm.png'
        };
        dataMap.set(nodesM[k].name, [x / 2 + k - 1, y - 1]);
        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,
                    color: '#ed46a2',
                    fontSize: 12,
                    fontWeight: 'normal'
                }
            },
            lineStyle: { 
                normal: { 
                    color: '#ed46a2',
                    width: .5
                }
            }
        };
        charts.links.push(link);
    
        //判断传输状态1 传输动效改变线条颜色
        if (nodes[i].state === '1') { 
            link.lineStyle.normal.color = '#27b0fe';
            link.label.normal.color = '#27b0fe';
            var lines = [{ 
                coord: dataMap.get(nodes[i].name)
            }, { 
                coord: dataMap.get(nodesM[0].name)
            }];
            charts.linesData.push(lines)
        }
    }
    
    option = { 
        title: { 
            text: '采集拓扑图'
        },
    // backgroundColor: "#0e1735",
        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: '#ffffff'
                }
            },
            lineStyle: { 
                normal: { 
                    shadowColor: 'none',
                    opacity: 1, //尾迹线条透明度
                    curveness: .1 //尾迹线条曲直度
                }
    
            },
            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,
                period: 4, //箭头指向速度，值越小速度越快
                trailLength: 0.02,
                symbol: 'pin',
                color: '#ffaa5f',
                symbolSize: 10
    
            },
            lineStyle: { 
                color: '#fff',
                curveness: .1 //尾迹线条曲直度
            },
            data: charts.linesData
        }]
    };
    
    
    /*采集拓扑图 chart*/
    var dom = document.getElementById("chart");
    var myChartNM = echarts.init(dom, 'purple-passion');
    myChartNM.setOption(option);
    window.onresize = myChartNM.resize;
    
    //添加点击事件
    myChartNM.on('click', function (params) { 
        // 弹窗打印数据的名称
        if (params.dataType == "node") { 
            alert("节点名称：" + params.name);
        } else if (params.dataType == "edge") { 
            alert("from：" + params.data.source + "=====to:" + params.data.target);
        }
    });

purple-passion.js

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

本文由

[echarts社区][echarts]  
中查找修改

[https_download.csdn.net_download_qq_32442967_11258784]: https://download.csdn.net/download/qq_32442967/11258784
[20190626093715159.gif]: /images/20211223/9429a49d919540f7933c75ba5dec1ebc.png
[echarts]: https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all