当前位置：首页 > news >正文

vue使用x6画流程图，简单使用

news 2025/7/17 22:17:47

官网
https://x6.antv.antgroup.com/tutorial/getting-started

安装
npm install @antv/x6 --save

使用

<template><div>3333<div id="container" style="width: 800px;height: 800px;"></div></div>
</template>
<script>
import { Graph } from '@antv/x6'
export default {data() {return {}},computed: {},mounted() {const data = {nodes: [{id: 'node1',shape: 'rect',x: 40,y: 40,width: 100,height: 40,label: 'hello',attrs: {// body 是选择器名称，选中的是 rect 元素body: {stroke: '#8f8f8f',strokeWidth: 1,fill: '#fff',rx: 6,ry: 6,},},},{id: 'node2',shape: 'rect',x: 160,y: 180,width: 100,height: 40,label: 'world',attrs: {body: {stroke: '#8f8f8f',strokeWidth: 1,fill: '#fff',rx: 6,ry: 6,},},},],edges: [{shape: 'edge',source: 'node1',target: 'node2',label: 'x6',attrs: {// line 是选择器名称，选中的边的 path 元素line: {stroke: '#8f8f8f',strokeWidth: 1,},},},],}const graph = new Graph({container: document.getElementById('container'),width: 800,height: 600,background: {color: '#F2F7FA',},})graph.fromJSON(data) // 渲染元素graph.centerContent() // 居中显示},methods: {}
};
</script>
<style></style>

2、一个一个节点添加

<template><div style="margin: 10px;"><el-button size="mini"  @click="rowclick('/#/new/purchase/request?background=1','请购单')">请购单</el-button><el-button size="mini"  @click="rowclick('/#/new/purchase/purchaseplan?background=1','采购计划单')">采购计划单</el-button><el-button size="mini"  @click="rowclick('/#/new/purchase/order?background=1','采购订单')">采购订单</el-button><div id="container"></div></div>
</template><script>import { Graph } from '@antv/x6'export default {props:['win'],data() {return {};},mounted() {//画布const graph = new Graph({container: document.getElementById('container'),width: 800,height: 600,background: {color: '#F2F7FA',},})//节点1graph.addNode({id: 'node1',shape: 'rect',label: 'hello',x: 100,y: 40,width: 100,height: 40,attrs: {// body 是选择器名称，选中的是 rect 元素body: {stroke: '#8f8f8f',strokeWidth: 1,fill: '#fff',rx: 6,ry: 6,},},})//节点2graph.addNode({id: 'node2',shape: 'rect',label: 'hello',x: 100,y: 100,width: 100,height: 40,attrs: {// body 是选择器名称，选中的是 rect 元素body: {stroke: '#8f8f8f',strokeWidth: 1,fill: '#fff',rx: 6,ry: 6,},},})//节点1连接节点2graph.addEdge({shape: 'edge',source: 'node1',target: 'node2',attrs: {// line 是选择器名称，选中的边的 path 元素line: {stroke: '#8f8f8f',strokeWidth: 1,},},})graph.centerContent() // 居中显示},methods: {//点击rowclick(id, path, name){this.win(id,path,name);},}};</script>
</script><style>
</style>