参考文档： Antv-X6组件官网地址-快速开始：x6.antv.vision/zh/docs/tut…
官方文档中的内容摘抄：
渲染 Vue 节点
我们提供了一个独立的包 @antv/x6-vue-shape 来使用 Vue(2/3) 渲染节点。
# npm
npm install @antv/x6-vue-shape
# yarn
yarn add @antv/x6-vue-shape
# 在 vue2 下还需要安装 @vue/composition-api
yarn add @vue/composition-api --dev
安装并应用该包后，指定节点的 shape 为 vue-shape，并通过 component 属性来指定渲染节点的 Vue 组件。
安装x6依赖
npm install @antv/x6 --save
自动布局
实现节点自动布局的组件，后面编码时能够使用到
npm install @antv/layout --save
具体代码
安装好依赖之后的demo
<template>
<div id="container"></div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, nextTick, reactive } from 'vue'
import { Graph } from '@antv/x6';
import { GridLayout, DagreLayout } from '@antv/layout' // 布局算法
const data = {
// 节点
nodes: [
{
id: 'hive_catalog.db_test_dim.table_test_1dfs',
// x: 100,
// y: 100,
width: 300,
height: 30,
shape: 'rect',
label: 'db_test_dim.table_test_1dfs',
attrs: {
body: {
stroke: '#1672fa',
},
},
},
{
id: 'db_test_dv.table_test_1dfs_002',
// x: 800,
// y: 200,
width: 300,
height: 30,
shape: 'rect',
label: 'table_test_1dfs_002',
attrs: {
body: {
stroke: '#1672fa',
},
},
},
{
id: 'db_test_ha.table_test_1dfs_002',
// x: 500,
// y: 500,
width: 300,
height: 30,
shape: 'rect',
label: 'db_test_ha.table_test_1dfs_002',
attrs: {
body: {
// fill: '#1672fa',
stroke: '#ff0000',
},
// label: {
// text: 'db_test_ha.table_test_1dfs_002',
// fill: '#000',
// fontSize: 13,
// }
},
},
{
id: 'hive_catalog.db_test_dw.table_test_dw_1dfs_001',
// x: 100,
// y: 300,
width: 300,
height: 30,
shape: 'rect',
label: 'db_test_dw.table_test_dw_1dfs_001',
attrs: {
body: {
stroke: '#1672fa',
},
},
},
{
id: 'hive_catalog.db_test_dwsss.table_test_002_dfsp01',
// x: 100,
// y: 400,
width: 300,
height: 30,
shape: 'rect',
label: 'db_test_dwsss.table_test_002_dfsp01',
attrs: {
body: {
stroke: '#1672fa',
},
},
},
{
id: 'db_test_shcd_001.table_test_dhppt001',
// x: 100,
// y: 500,
width: 300,
height: 30,
shape: 'rect',
label: 'table_test_dhppt001',
attrs: {
body: {
stroke: '#1672fa',
},
},
},
{
id: 'hive_catalog.db_test_dw.table_test_dhedd001',
// x: 100,
// y: 600,
width: 300,
height: 30,
shape: 'rect',
label: 'hive_catalog.db_test_dw.table_test_dhedd001',
attrs: {
body: {
stroke: '#1672fa',
},
},
}
],
// 边
edges: [
{
source: 'hive_catalog.db_test_dim.table_test_1dfs',
target: 'db_test_ha.table_test_1dfs_002',
attrs: {
line: {
stroke: "#1699fa",
}
},
// type: 'DIRECT',
// func: null
},
{
source: 'db_test_ha.table_test_1dfs_002',
target: 'db_test_dv.table_test_1dfs_002',
attrs: {
line: {
stroke: "#1699fa",
}
},
// type: 'DIRECT',
// func: null
},
{
source: 'hive_catalog.db_test_dw.table_test_dw_1dfs_001',
target: 'db_test_ha.table_test_1dfs_002',
attrs: {
line: {
stroke: "#1699fa",
}
},
type: 'DIRECT',
func: null
},
{
source: 'hive_catalog.db_test_dwsss.table_test_002_dfsp01',
target: 'db_test_ha.table_test_1dfs_002',
attrs: {
line: {
stroke: "#1699fa",
}
},
// type: 'DIRECT',
// func: null
},
{
source: 'db_test_shcd_001.table_test_dhppt001',
target: 'db_test_ha.table_test_1dfs_002',
attrs: {
line: {
stroke: "#1699fa",
}
},
// type: 'DIRECT',
// func: null
},
{
source: 'hive_catalog.db_test_dw.table_test_dhedd001',
target: 'db_test_ha.table_test_1dfs_002',
attrs: {
line: {
stroke: "#1699fa",
}
},
// type: 'DIRECT',
// func: null
}
],
};
let graph : Graph;
export default defineComponent({
name: 'AntvX6Demo',
components: {},
setup() {
onMounted(() => {
init();
})
// 层次布局
// 按照不同的需求，选用合适的布局算法，让画布中的图形规律分布
const dagreLayout = new DagreLayout({
type: 'dagre',
rankdir: 'LR',
align: 'DR',
ranksep: 100,
nodesep: 20,
controlPoints: true,
})
const newModel = dagreLayout.layout(data)
const init = () => {
graph = new Graph({
container: document.getElementById('container') as HTMLElement || null,
width: 2000,
height: 1200,
background: { color: '#f0f0f0' }, // 创建画布时初始化背景相关配置对象
panning: {
enabled: true,
eventTypes: ['leftMouseDown', 'rightMouseDown', 'mouseWheel']
},
grid: { size: 10, visible: true, type: 'mesh' }, //创建画布时，通过配置对象来设置背景网格
}).fromJSON(newModel)
}
return {
}
}
});
</script>
<style>
</style>
展示效果如下图：目前只实现了基本的展示。点击事件以及其他功能待后续研究。
总结：前端的展示上选对组件能够少走很多弯路；帖子可能存在问题，请多多指教，万分感谢。
