vis.js  網站

https://visjs.org/

vs  code 下安裝命令

npm install vis-network

在vue  下引入 vis-network組件

const vis = require("vis-network/dist/vis-network.min.js");require("vis-network/dist/vis-network.min.css");

例子代碼使用

let DIR = "/jtopo/";let nodes = [{ id: 1, shape: "circularImage", image: DIR + "server.png" },{ id: 2, shape: "circularImage", image: DIR + "server.png" },{ id: 3, shape: "circularImage", image: DIR + "server.png" },{id: 4,shape: "circularImage",image: DIR + "gather.png",label: "pictures by this guy!"},{ id: 5, shape: "circularImage", image: DIR + "wanjet.png" },{ id: 6, shape: "circularImage", image: DIR + "center.png" },{ id: 7, shape: "circularImage", image: DIR + "cloud.png" },{ id: 8, shape: "circularImage", image: DIR + "center.png" },{ id: 9, shape: "circularImage", image: DIR + "wanjet.png" },{ id: 10, shape: "circularImage", image: DIR + "gather.png" }// { id: 11, shape: "circularImage", image: DIR + "11.png" },// { id: 12, shape: "circularImage", image: DIR + "12.png" },// { id: 13, shape: "circularImage", image: DIR + "13.png" },// { id: 14, shape: "circularImage", image: DIR + "14.png" },// {// id: 15,// shape: "circularImage",// image: DIR + "missing.png",// brokenImage: DIR + "missingBrokenImage.png",// label: "when images/nfail/nto load"http:// },// {// id: 16,// shape: "circularImage",// image: DIR + "anotherMissing.png",// brokenImage: DIR + "9.png",// label: "fallback image in action"http:// }];let edges = [{ from: 1, to: 4 },{ from: 2, to: 4 },{ from: 3, to: 4 },{ from: 4, to: 5 },{ from: 5, to: 6 },{ from: 6, to: 7 },{ from: 8, to: 7 },{ from: 9, to: 8 },{ from: 10, to: 9 }// { from: 8, to: 10 },// { from: 10, to: 11 },// { from: 11, to: 12 },// { from: 12, to: 13 },// { from: 13, to: 14 },// { from: 9, to: 16 }];for (let i = 1; i <= 100; i++) {num = i + 10;nodes.push({id: num,label: num.toString()});edges.push({ from: num, to: 10 });}let data = {nodes: nodes,edges: edges};let container = document.getElementById("mynetwork");//let options = {};let options = {nodes: {font: {color: "white", //字體的顏色size: 30 //顯示字體大小},scaling: {min: 16,max: 32 //縮放效果比例},borderWidth: 0,color: {border: "white",background: "white" //若是引用圖標，背景顏色}},groups: {ws: {//系統定義的形狀 dot等 這些官網都可以找到shape: "dot",color: "white"}},edges: {//連接線的樣式color: {color: "white",highlight: "white",hover: "#848484",inherit: "from",opacity: 1.0}},layout: {randomSeed: 1 //配置每次生成的節點位置都一樣，參數為數字1、2等},physics: {// barnesHut: { gravitationalConstant: -30000 },barnesHut: {gravitationalConstant: -80000,springConstant: 0.001,springLength: 200},stabilization: false//{ iterations: 2500 }},interaction: {// navigationButtons: true,hover: true, //鼠標移過后加粗該節點和連接線selectConnectedEdges: false, //選擇節點后是否顯示連接線hoverConnectedEdges: false, //鼠標滑動節點后是否顯示連接線tooltipDelay: 200,zoomView: true //是否能縮放畫布},edges: {shadow: true, //連接線陰影配置smooth: true //是否顯示方向箭頭// arrows: {to : true }//箭頭指向from節點}};that.network = new vis.Network(container, data, options);that.network.on("click", function(params) {});