使用 2.x 版本 x6.antv 新官網:

安裝

npm install @antv/x6
//"@antv/x6": "^2.1.6",

項目結構

1、初始化畫布 index.vue

<template><div id="container"></div>
</template><script setup lang='ts'>
import { onMounted } from "vue";
import { Graph } from '@antv/x6';
let graph:Graph
const graphInit = ()=>{graph = new Graph({container: document.getElementById('container')!,});
}onMounted(()=>{graphInit()
})
</script><style scoped>
#container{width: 100vw;height: 100vh;
}
</style>

2、注冊節點

渲染 Vue 節點,這個文檔完全夠用

npm install @antv/x6-vue-shape
//"@antv/x6-vue-shape": "^2.0.9",

節點node.vue

<template><div class="nodeitem">{{ data?.nodeName }}</div>
</template>
<script setup lang='ts'>
import { inject, onMounted,ref } from "vue";
import { Node } from '@antv/x6'interface NodeDTO {nodeId?: stringnodeName: string
}const getNode: Function | undefined = inject<Function>("getNode");
const data =  ref<NodeDTO|undefined>(undefined)
onMounted(() => {const node = getNode?.() as Node;data.value = node?.getData()
});
</script><style scoped>
.nodeitem{width:100px;border: 1px solid #ccc;
}
</style>

3、在畫布引入并注冊自定義節點，配置節點信息

主畫布：index.vue

<template><div id="container"></div><TeleportContainer/>
</template><script setup lang='ts'>
import { onMounted } from "vue";
import { Graph,Cell } from '@antv/x6';
import NodeItem from "./node.vue";
import {register,getTeleport} from '@antv/x6-vue-shape'
let graph:Graph
register({shape: "node-item",width: 150,height: 100,component: NodeItem,
});// 注冊自定義節點
const TeleportContainer = getTeleport();// 自定義節點優化
const refreshData = (data)=>{//渲染節點數據const cells: Cell[] = []data.nodes.forEach((item: any) => {cells.push(graph.createNode(item))})data.edges?.forEach((item: any) => {cells.push(graph.createEdge(item))})graph.resetCells(cells)graph.centerContent()graph.zoomToFit({ padding: 10, maxScale: 1 })
}
const graphInit = ()=>{graph = new Graph({container: document.getElementById('container')!,});let data = {nodes: [{id: 'node1', // String，可選，節點的唯一標識shape: 'node-item',x: 40,       // Number，必選，節點位置的 x 值y: 40,       // Number，必選，節點位置的 y 值data: {nodeId: 'node1',nodeName: '節點1',},}],edges:[]}refreshData(data)
}
onMounted(()=>{graphInit()
})
</script>

展示

小小預告：
下一篇 自定義節點樣式
再下一篇 側邊欄
再下一篇 整理畫布