官网地址:https://x6.antv.antgroup.com/
1.安装&引入
(1).安装
通过 npm 或 yarn 命令安装 X6。命令如下:
# npm
$ npm install @antv/x6 --save
# yarn
$ yarn add @antv/x6
效果如下图所示:
(2).引入
使用import在组件中引入,然后在页面中创建一个画布容器,初始化画布对象,可设置样式。
import { Graph } from '@antv/x6'
代码如下:
页面效果:打开浏览器,发现画布被渲染出来了。如下所示:
2.简单配置
(1).添加节点和边
代码如下:
(2).增加画布网格线,详细配置方法参考:https://x6.antv.antgroup.com/api/graph/grid
代码如下:
效果图如下所示:
(3). 控制画布的缩放与平移,详细配置方法参考:
https://x6.antv.antgroup.com/api/graph/panning
https://x6.antv.antgroup.com/api/graph/mousewheel
代码如下:
(3). 使用插件,增加人为对齐线,详细配置方法参考:
https://x6.antv.antgroup.com/tutorial/plugins/snapline
通过 npm 或 yarn 命令安装对齐线插件。命令如下:
# npm
$ npm install @antv/x6-plugin-snapline --save
# yarn
$ yarn add @antv/x6-plugin-snapline
效果图如下所示:
完整代码:
<template>
<div>
<div id="container"></div>
</div>
</template>
<script>
import { Graph } from '@antv/x6'
import { Snapline } from '@antv/x6-plugin-snapline'
export default {
data() {
return {
graph: null,
// 节点
nodes: [
{
id: 'node1',
shape: 'rect',
x: 40,
y: 40,
width: 100,
height: 40,
label: 'hello',
attrs: {
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: {
stroke: '#8f8f8f',
strokeWidth: 1,
},
},
},
],
}
},
mounted() {
this.graph = new Graph({
container: document.getElementById('container'),
width: 800,
height: 600,
background: {
color: '#F2F7FA',
},
// 网格线设置
grid: {
visible: true,
type: 'doubleMesh',
args: [
{
color: '#eee', // 主网格线颜色
thickness: 1, // 主网格线宽度
},
{
color: '#ddd', // 次网格线颜色
thickness: 1, // 次网格线宽度
factor: 4, // 主次网格线间隔
},
],
},
// 缩放与平移
mousewheel: true, //使用滚轮控制缩放
panning: {
enabled: true,
//触发键盘事件进行平移:'alt' | 'ctrl' | 'meta' | 'shift'
modifiers: [],
//触发鼠标事件进行平移:'leftMouseDown' | 'rightMouseDown' | 'mouseWheel'
eventTypes: ['leftMouseDown'],
},
})
// 渲染节点和边
this.graph.fromJSON({
nodes: this.nodes,
edges: this.edges,
})
// 实现画布内容居中
this.graph.centerContent()
//增加对齐线
this.graph.use(
new Snapline({
enabled: true,
})
)
},
methods: {},
}
</script>
<style scoped>
</style>