//官网 https://antv-x6.gitee.io/zh/docs/tutorial/getting-started
npm install &＃64;antv/x6 --save
import { Graph } from &＃39;&＃64;antv/x6&＃39;;
//这个不能用v-show进行显示隐藏&＃xff0c;目前我也不清楚为什么&＃xff0c;因为我用v-show后&＃xff0c;连接线会错乱。
huihua(){// 创建边const graph &＃61; new Graph({container: document.getElementById(&＃39;container&＃39;),// scroller: {// enabled: true,// pannable: true,// pageVisible: true,// pageBreak: false,// },mousewheel: {enabled: true,modifiers: [&＃39;ctrl&＃39;, &＃39;meta&＃39;],},connecting: {allowBlank: true,},});var node1_width&＃61;window.screen.widthvar node1_height&＃61;window.screen.heightwindow.addEventListener("resize", () &＃61;> {node1_width&＃61;window.screen.widthnode1_height&＃61;window.screen.heightconsole.log(node1_width,node1_height)});const node1 &＃61; graph.addNode({x: 300, // Number&＃xff0c;必选&＃xff0c;节点位置的 x 值y: 40, // Number&＃xff0c;必选&＃xff0c;节点位置的 y 值width: 150, // Number&＃xff0c;可选&＃xff0c;节点大小的 width 值height: 50, // Number&＃xff0c;可选&＃xff0c;节点大小的 height 值label: &＃39;hello&＃39;, // String&＃xff0c;节点标签attrs: {body: {fill: &＃39;#1A6FC9&＃39;,stroke: &＃39;#1A6FC9&＃39;,border:0,},label: {text: &＃39;测试1&＃39;,fill: &＃39;#ffffff&＃39;,fontSize: 20,fontWeight: &＃39;bold&＃39;,}}})const node2 &＃61; graph.addNode({x: 600, // Number&＃xff0c;必选&＃xff0c;节点位置的 x 值y: 40, // Number&＃xff0c;必选&＃xff0c;节点位置的 y 值width: 150, // Number&＃xff0c;可选&＃xff0c;节点大小的 width 值height: 50, // Number&＃xff0c;可选&＃xff0c;节点大小的 height 值label: &＃39;world&＃39;, // String&＃xff0c;节点标签attrs: {body: {fill: &＃39;#D89614&＃39;,stroke: &＃39;#D89614&＃39;,// strokeDasharray: &＃39;10,2&＃39;,border:0,},label: {text: &＃39;测试2&＃39;,fill: &＃39;#ffffff&＃39;,fontSize: 20,fontWeight: &＃39;bold&＃39;,}}})const edge &＃61; graph.addEdge({source: node1,target: node2,attrs: {line: {stroke: &＃39;#ffffff&＃39;,},},},)edge.setLabels({attrs: { text: { text: &＃39;查看&＃39;, fill: &＃39;#ffffff&＃39;},rect: {ref: &＃39;label&＃39;,fill: &＃39;#111213&＃39;,rx: 3,ry: 3,refWidth: 30,refHeight: 20,refX: -15,refY: -10,}, },})const node3 &＃61; graph.addNode({x: 900, // Number&＃xff0c;必选&＃xff0c;节点位置的 x 值y: 40, // Number&＃xff0c;必选&＃xff0c;节点位置的 y 值width: 150, // Number&＃xff0c;可选&＃xff0c;节点大小的 width 值height: 50, // Number&＃xff0c;可选&＃xff0c;节点大小的 height 值label: &＃39;world&＃39;, // String&＃xff0c;节点标签attrs: {body: {fill: &＃39;#D89614&＃39;,stroke: &＃39;#D89614&＃39;,// strokeDasharray: &＃39;10,2&＃39;,border:0,},label: {text: &＃39;测试3&＃39;,fill: &＃39;#ffffff&＃39;,fontSize: 20,fontWeight: &＃39;bold&＃39;,}}})const edge2 &＃61; graph.addEdge({source: node2,target: node3,attrs: {line: {stroke: &＃39;#ffffff&＃39;,},},},)edge2.setLabels({attrs: { text: { text: &＃39;选择&＃39;, fill: &＃39;#ffffff&＃39;},rect: {ref: &＃39;label&＃39;,fill: &＃39;#111213&＃39;,rx: 3,ry: 3,refWidth: 30,refHeight: 20,refX: -15,refY: -10,}, },})const node4 &＃61; graph.addNode({x: 900, // Number&＃xff0c;必选&＃xff0c;节点位置的 x 值y: 200, // Number&＃xff0c;必选&＃xff0c;节点位置的 y 值width: 150, // Number&＃xff0c;可选&＃xff0c;节点大小的 width 值height: 50, // Number&＃xff0c;可选&＃xff0c;节点大小的 height 值label: &＃39;world&＃39;, // String&＃xff0c;节点标签attrs: {body: {fill: &＃39;#1A6FC9&＃39;,stroke: &＃39;#1A6FC9&＃39;,// strokeDasharray: &＃39;10,2&＃39;,border:0,},label: {text: &＃39;测试4&＃39;,fill: &＃39;#ffffff&＃39;,fontSize: 20,fontWeight: &＃39;bold&＃39;,}}})const edge3 &＃61; graph.addEdge({source: node3,target: node4,attrs: {line: {stroke: &＃39;#ffffff&＃39;,},},},)edge3.setLabels({attrs: { text: { text: &＃39;测试4&＃39;, fill: &＃39;#ffffff&＃39;},rect: {ref: &＃39;label&＃39;,fill: &＃39;#111213&＃39;,rx: 3,ry: 3,refWidth: 30,refHeight: 20,refX: -15,refY: -10,}, },})const node5 &＃61; graph.addNode({x: 600, // Number&＃xff0c;必选&＃xff0c;节点位置的 x 值y: 200, // Number&＃xff0c;必选&＃xff0c;节点位置的 y 值width: 150, // Number&＃xff0c;可选&＃xff0c;节点大小的 width 值height: 50, // Number&＃xff0c;可选&＃xff0c;节点大小的 height 值label: &＃39;world&＃39;, // String&＃xff0c;节点标签attrs: {body: {fill: &＃39;#1A6FC9&＃39;,stroke: &＃39;#1A6FC9&＃39;,// strokeDasharray: &＃39;10,2&＃39;,border:0,},label: {text: &＃39;测试5&＃39;,fill: &＃39;#ffffff&＃39;,fontSize: 20,fontWeight: &＃39;bold&＃39;,}}})const edge4 &＃61; graph.addEdge({source: node5,target: node4,attrs: {line: {stroke: &＃39;#ffffff&＃39;,},},},)const node6 &＃61; graph.addNode({x: 900, // Number&＃xff0c;必选&＃xff0c;节点位置的 x 值y: 360, // Number&＃xff0c;必选&＃xff0c;节点位置的 y 值width: 150, // Number&＃xff0c;可选&＃xff0c;节点大小的 width 值height: 50, // Number&＃xff0c;可选&＃xff0c;节点大小的 height 值label: &＃39;world&＃39;, // String&＃xff0c;节点标签attrs: {body: {fill: &＃39;#D89614&＃39;,stroke: &＃39;#D89614&＃39;,// strokeDasharray: &＃39;10,2&＃39;,border:0,},label: {text: &＃39;测试5&＃39;,fill: &＃39;#ffffff&＃39;,fontSize: 20,fontWeight: &＃39;bold&＃39;,}}})const edge5 &＃61; graph.addEdge({source: node4,target: node6,attrs: {line: {stroke: &＃39;#ffffff&＃39;,},},},)edge5.setLabels({attrs: { text: { text: &＃39;采集&＃39;, fill: &＃39;#ffffff&＃39;},rect: {ref: &＃39;label&＃39;,fill: &＃39;#111213&＃39;,rx: 3,ry: 3,refWidth: 30,refHeight: 20,refX: -15,refY: -10,}, },})const node7 &＃61; graph.addNode({x: 1200, // Number&＃xff0c;必选&＃xff0c;节点位置的 x 值y: 500, // Number&＃xff0c;必选&＃xff0c;节点位置的 y 值width: 150, // Number&＃xff0c;可选&＃xff0c;节点大小的 width 值height: 50, // Number&＃xff0c;可选&＃xff0c;节点大小的 height 值label: &＃39;world&＃39;, // String&＃xff0c;节点标签attrs: {body: {fill: &＃39;#1A6FC9&＃39;,stroke: &＃39;#1A6FC9&＃39;,// strokeDasharray: &＃39;10,2&＃39;,border:0,},label: {text: &＃39;测试5&＃39;,fill: &＃39;#ffffff&＃39;,fontSize: 20,fontWeight: &＃39;bold&＃39;,}}})const edge6 &＃61; graph.addEdge({source: node4,target: node7,vertices: [ //相连途中需要途径两个点{ x: 1270, y: 225}, //点1// { x: 968, y: 242} //点2],attrs: {line: {stroke: &＃39;#ffffff&＃39;,},},},)edge6.setLabels({attrs: { text: { text: &＃39;测试6&＃39;, fill: &＃39;#ffffff&＃39;},rect: {ref: &＃39;label&＃39;,fill: &＃39;#111213&＃39;,rx: 3,ry: 3,refWidth: 30,refHeight: 20,refX: -15,refY: -10,}, },position: {distance: 220,},})const node8 &＃61; graph.addNode({x: 900, // Number&＃xff0c;必选&＃xff0c;节点位置的 x 值y: 550, // Number&＃xff0c;必选&＃xff0c;节点位置的 y 值width: 150, // Number&＃xff0c;可选&＃xff0c;节点大小的 width 值height: 50, // Number&＃xff0c;可选&＃xff0c;节点大小的 height 值label: &＃39;world&＃39;, // String&＃xff0c;节点标签attrs: {body: {fill: &＃39;#203175&＃39;,stroke: &＃39;#203175&＃39;,// strokeDasharray: &＃39;10,2&＃39;,border:0,},label: {text: &＃39;测试7&＃39;,fill: &＃39;#ffffff&＃39;,fontSize: 20,fontWeight: &＃39;bold&＃39;,}}})const edge7 &＃61; graph.addEdge({source: node7,target: node8,vertices: [ //相连途中需要途径两个点{ x: 1275, y: 578}, //点1// { x: 968, y: 242} //点2],attrs: {line: {stroke: &＃39;#ffffff&＃39;,},},},)edge7.setLabels({attrs: { text: { text: &＃39;生成&＃39;, fill: &＃39;#ffffff&＃39;},rect: {ref: &＃39;label&＃39;,fill: &＃39;#111213&＃39;,rx: 3,ry: 3,refWidth: 30,refHeight: 20,refX: -15,refY: -10,}, },})const node9 &＃61; graph.addNode({x: 900, // Number&＃xff0c;必选&＃xff0c;节点位置的 x 值y: 630, // Number&＃xff0c;必选&＃xff0c;节点位置的 y 值width: 150, // Number&＃xff0c;可选&＃xff0c;节点大小的 width 值height: 50, // Number&＃xff0c;可选&＃xff0c;节点大小的 height 值label: &＃39;world&＃39;, // String&＃xff0c;节点标签attrs: {body: {fill: &＃39;#203175&＃39;,stroke: &＃39;#203175&＃39;,// strokeDasharray: &＃39;10,2&＃39;,border:0,},label: {text: &＃39;测试8&＃39;,fill: &＃39;#ffffff&＃39;,fontSize: 20,fontWeight: &＃39;bold&＃39;,}}})const edge8 &＃61; graph.addEdge({source: node8,target: node9,// vertices: [ //相连途中需要途径两个点// { x: 1275, y: 578}, //点1// // { x: 968, y: 242} //点2// ],attrs: {line: {stroke: &＃39;#ffffff&＃39;,},},},)//graph为自定义的画布 为画布上的node绑定点击事件 graph.on(&＃39;node:click&＃39;, ({ view, e }) &＃61;> {e.stopPropagation() //禁止冒泡console.log(view) //返回当前节点id等元素交流技术加企鹅330586621console.log(e)})},
京公网安备 11010802041100号