官网
https://x6.antv.antgroup.com/tutorial/getting-started
安装
npm install @antv/x6 --save
使用
csharp
<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、一个一个节点添加
csharp
<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',
},
})
//节点1
graph.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,
},
},
})
//节点2
graph.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连接节点2
graph.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>