vis.js网络拓扑图自定义图片

笑到世界都狼狈

已于 2022-11-09 19:58:33 修改

阅读量2.5k

点赞数 1

分类专栏： vis.js 文章标签： vis.js 自定义图片 vis.js自定义图片自定义本地图片

于 2020-09-09 16:21:10 首次发布

本文链接：https://blog.csdn.net/qq_36509946/article/details/108491693

版权

vis.js 专栏收录该内容

8 篇文章 10 订阅

订阅专栏

1.首先看一下我做的效果图：

效果图

2.在官方demo中找有自定义图片的例子：Vis Network Examples

参考例子

3.点击进去发现只有demo,没有源码，，，，于是f12自己找

demo代码

4.只需要添加下面代码就可以看到效果了

var options = {
        nodes:{
            shape: 'image',
            image:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599645215703&di=0cb23e74736a6a1222f35b822f5bf833&imgtype=0&src=http%3A%2F%2Fa1.att.hudong.com%2F05%2F00%2F01300000194285122188000535877.jpg"
        }
    };

5.但是我的图片想自定义成不一样的，还不想每一个节点信息里面都加，所以我遍历数组添加了图片，结构如下图所示：

6.最后完整代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
    <!--<script type="text/javascript" src="js/vis-network.min.js"></script>-->
    <style type="text/css">
        #mynetwork {
            width: 600px;
            height: 600px;
            border: 1px solid lightgray;
        }
    </style>
</head>
<body>
<div id="mynetwork"></div>

<script type="text/javascript">
    // 创建节点数据数组
    var nodes = [
        {
            "id": 0,
            "name": "外部网络",
            "type": "Internet",
            "ip":"1.1.1.1",
            "port":"未知",
            "ignore":"false",
            "flag":"true"
        }, {
            "id": 1,
            "name": "交换机",
            "type": "switch",
            "ip":"192.168.30.125",
            "mac":"48:de:3d:e2:49:a8",
            "model":"H3C",
            "uptime":"2020-09-03 10:50:50",
            "port":"22",
            "ignore":"true",
            "flag":"true"
        }, {
            "id": 2,
            "name": "交换机",
            "type": "switch",
            "ip":"192.168.1.8",
            "mac":"cd:bd:3d:e2:55:55",
            "model":"pf",
            "uptime":"2020-09-03 10:50:50",
            "port":"33",
            "ignore":"true",
            "flag":"true"
        }, {
            "id": 3,
            "name": "计算机",
            "type": "computer",
            "ip":"192.168.1.8",
            "mac":"dv:bd:fd:e2:df:fd",
            "model":"pf",
            "uptime":"2020-09-03 10:50:50",
            "account":"xiaox",
            "location":"xianm",
            "port":"44",
            "ignore":"true",
            "flag":"true"
        }, {
            "id": 4,
            "name": "路由器",
            "type": "rooter",
            "ip":"192.168.1.8",
            "mac":"ds:bd:3d:e2:ds:55",
            "model":"pf",
            "uptime":"2020-09-03 10:50:50",
            "account":"xiaox",
            "location":"xianm",
            "port":"55",
            "ignore":"true",
            "flag":"true"
        }, {
            "id": 5,
            "name": "服务器",
            "type": "service",
            "ip":"192.168.1.8",
            "mac":"vf:eq:dd:e2:55:55",
            "model":"pf",
            "uptime":"2020-09-03 10:50:50",
            "account":"xiaox",
            "location":"xianm",
            "port":"66",
            "ignore":"true",
            "flag":"true"
        }, {
            "id":6,
            "name": "打印机",
            "type": "print",
            "ip":"192.168.1.8",
            "mac":"ss:bd:3d:ju:55:55",
            "model":"pf",
            "uptime":"2020-09-03 10:50:50",
            "account":"xiaox",
            "location":"xianm",
            "port":"77",
            "ignore":"true",
            "flag":"true"
        }, {
            "id": 7,
            "name": "手机",
            "type": "phone",
            "ip":"192.168.1.8",
            "mac":"ju:ju:3d:e2:55:uy",
            "model":"pf",
            "uptime":"2020-09-03 10:50:50",
            "account":"xiaox",
            "location":"xianm",
            "port":"88",
            "ignore":"true",
            "flag":"true"
        }
    ];
    // 创建边数据数组
    var edges = [
        { from: 0, to: 1 },
        { from: 1, to: 2 },
        { from: 1, to: 3 },
        { from: 1, to: 4 },
        { from: 1, to: 5 },
        { from: 2, to: 6 },
        { from: 2, to: 7 }
    ];
    /**
     * 自定义图片
     */
    for (var i = 0;i < nodes.length;i++){
        if (nodes[i].type == 'Internet'){
            nodes[i].image = 'image/internet.png';
        }
        if (nodes[i].type == 'switch'){
            nodes[i].image = 'image/switch.png';
        }
        if (nodes[i].type == 'hub'){
            nodes[i].image = 'image/hub.png';
        }
        if (nodes[i].type == 'computer'){
            nodes[i].image = 'image/computer.png';
        }
        if (nodes[i].type == 'rooter'){
            nodes[i].image = 'image/rooter.png';
        }
        if (nodes[i].type == 'service'){
            nodes[i].image = 'image/service.png';
        }
        if (nodes[i].type == 'print'){
            nodes[i].image = 'image/print.png';
        }
        if (nodes[i].type == 'phone'){
            nodes[i].image = 'image/phone.png';
        }
    }
    // 获取容器
    var container = document.getElementById('mynetwork');

    // 将数据赋值给vis 数据格式化器
    var data = {
        nodes: nodes,
        edges: edges
    };
    console.log('nodes',data.nodes)

    var options = {
        nodes:{
            shape: 'image'
            // image:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599645215703&di=0cb23e74736a6a1222f35b822f5bf833&imgtype=0&src=http%3A%2F%2Fa1.att.hudong.com%2F05%2F00%2F01300000194285122188000535877.jpg"
        }
    };

    // 初始化关系图
    var network = new vis.Network(container, data, options);
</script>
</body>

这样图片就换好了，个人角色写法和echarts超级像，因为前两天刚研究完echarts，所以看这个就简单多了。