基于echarts的网络拓扑图

原创
08/26 18:58
阅读数 96

首先看效果

代码比较简单,首先引入相关的JS,根据你的情况来做出改动

<script src="../lib/echarts-4.7.0/echarts.min.js"></script>
/**
     * 初始化生成网络拓扑图
     */
    function initNetworkTopology(){
        $.ajax({
            url: '/uop_web/agent/getAppInDepartment?orgCode=${orgCode}',
            type: 'get',
            async: true, //异步请求
            timeout: 5000, //超时时间
            isNoShowLoading:true,
            success: function (res) {
                if (!res.success){
                    layer.msg(res.message);
                    return;
                }

                // 转字符串
                let json = JSON.parse(res.data);

                // 生成拓扑图
                let charts = handeData(json.appList, json.depList);
                let option = setNetworkTopology("机构部署的应用", charts);
                let orgTable = echarts.init(document.getElementById('orgTable'));
                orgTable.setOption(option);
            },
            error: function (res) {
                layer.msg("请求接口错误,请稍后重试");
                return;
            }
        });
    }

    /**
     * 将服务器返回的数据进行相应处理
     * @param leftList 左边数据
     * @param rightList 右边数据
     */
    function handeData(leftList, rightList){
        let x = 1;
        let y = 1;
        let dataMap = new Map();

        // 最终的结构
        let charts = {
            nodes: [],
            links: [],
            linesData: []
        };

        // 构建左边数据的基础结构
        for (let j = 0; j < leftList.length; j++) {
            let node = {
                name: leftList[j].name,
                value: [x, y],
                symbolSize: 40,
                symbol: 'image://../img/agentImg/' + leftList[j].img
                // ,itemStyle: {
                //     normal: {
                //         color: '#12b5d0',
                //     }
                // }
            };
            dataMap.set(leftList[j].name, [x, y]);
            charts.nodes.push(node);
            y += 2;
        }

        // 构建右边的数据
        for (let k = 0; k < rightList.length; k++) {
            let node = {
                name: rightList[k].name,
                value: [x + 4, y / 2],
                symbolSize: 60,
                symbol: 'image://../img/agentImg/' + rightList[k].img
            };
            dataMap.set(rightList[k].name, [x + 4, y / 2]);
            charts.nodes.push(node)
        }

        // 画线
        let labelName = "";
        for (let i = 0; i < leftList.length; i++) {
            // if (leftList[i].state === '1') {
            //     labelName = '数据传输中'
            // } else {
            //     labelName = '暂停传输'
            // }
            labelName = leftList[i].uptime == null ? "" : leftList[i].uptime;
            let link = {
                source: leftList[i].name,
                target: rightList[0].name,
                label: {
                    normal: {
                        show: true,
                        formatter: labelName
                    }
                },
                lineStyle: {
                    normal: {
                        // 连接线默认的颜色
                        color: '#d1d1d1'
                    }
                }
            };
            charts.links.push(link);

            //判断传输状态1 传输动效改变线条颜色
            if (leftList[i].uptime != null) {
                link.lineStyle.normal.color = '#0fff17';
                // 加入动态效果
                let lines = [{
                    coord: dataMap.get(leftList[i].name)
                }, {
                    coord: dataMap.get(rightList[0].name)
                }];
                charts.linesData.push(lines)
            }
        }

        return charts;
    }


    /**
     * 设置网络拓扑图参数,形成最终的数据
     * @param name 拓扑图的标题
     * @param charts 处理过的后端返回数据
     */
    function setNetworkTopology(name, charts) {
        return option = {
            title: {
                text: name,
                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.06'
                },
                data: charts.linesData
            }]
        };
    }

注意几点,图片要想出来,必须 要有 

image://

后台返回的数据格式:

{"code":0,"data":"{\"appList\":[{\"img\":\"computer.png\",\"uptime\":\"0 天 0 小时 1 分钟 18 秒 \",\"name\":\"esb [192.168.21.24]\"},{\"img\":\"computer.png\",\"uptime\":\"0 天 0 小时 0 分钟 54 秒 \",\"name\":\"exam [192.168.21.23]\"},{\"img\":\"computer.png\",\"uptime\":\"0 天 0 小时 1 分钟 43 秒 \",\"name\":\"hlht [192.168.21.23]\"},{\"img\":\"computer.png\",\"uptime\":\"0 天 0 小时 0 分钟 54 秒 \",\"name\":\"soa [192.168.21.23]\"}],\"depList\":[{\"img\":\"department.png\",\"name\":\"岳麓区\"}]}","success":true,"count":0,"message":"请求成功"}

最终的json:

{
    "appList":[
        {
            "img":"computer.png",
            "uptime":"0 天 0 小时 1 分钟 18 秒 ",
            "name":"esb [192.168.21.24]"
        },
        {
            "img":"computer.png",
            "uptime":"0 天 0 小时 0 分钟 54 秒 ",
            "name":"exam [192.168.21.23]"
        },
        {
            "img":"computer.png",
            "uptime":"0 天 0 小时 1 分钟 43 秒 ",
            "name":"hlht [192.168.21.23]"
        },
        {
            "img":"computer.png",
            "uptime":"0 天 0 小时 0 分钟 54 秒 ",
            "name":"soa [192.168.21.23]"
        }
    ],
    "depList":[
        {
            "img":"department.png",
            "name":"岳麓区"
        }
    ]
}

自己组装成这样的数据格式即可。

原始参考:https://blog.csdn.net/qq_32442967/article/details/91556764

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部