antV/X6学习---官网实例vue实现
文章目录
- 引入依赖
- vue实现官网实例
-
-
- 实现ER图
- 其他实例参照Gitee
-
引入依赖
npm install @antv/x6
npm install @antv/x6-vue-shape
出现dependency conflict依赖冲突，可以使用
--force无视冲突
--legacy-peer-deps忽视依赖冲突我用的这种，无视时产生许多环境问题（比如py、vscode等）
vue实现官网实例
因为官网是
react+ts所以在代码适配上需要去除ts部分的类型
实现ER图
template部分
<div class="content">
<div class="app-stencil" ref="stencilContainer">
div>
<div class="app-content" ref="containerRef">
div>
div>
js部分，去除ts和json数据引用
import { Graph, Shape } from '@antv/x6'
import ErJson from '../data/er.json'
const LINE_HEIGHT = 24
const NODE_WIDTH = 150
export default {
name: "er",
mounted () {
this.init();
},
methods: {
init() {
Graph.registerPortLayout(
'erPortPosition',
(portsPositionArgs) => {
return portsPositionArgs.map((_, index) => {
return {
position: {
x: 0,
y: (index + 1) * LINE_HEIGHT,
},
angle: 0,
}
})
},
true,
)
Graph.registerNode(
'er-rect',
{
inherit: 'rect',
markup: [
{
tagName: 'rect',
selector: 'body',
},
{
tagName: 'text',
selector: 'label',
},
],
attrs: {
rect: {
strokeWidth: 1,
stroke: '#5F95FF',
fill: '#5F95FF',
},
label: {
fontWeight: 'bold',
fill: '#ffffff',
fontSize: 12,
},
},
ports: {
groups: {
list: {
markup: [
{
tagName: 'rect',
selector: 'portBody',
},
{
tagName: 'text',
selector: 'portNameLabel',
},
{
tagName: 'text',
selector: 'portTypeLabel',
},
],
attrs: {
portBody: {
width: NODE_WIDTH,
height: LINE_HEIGHT,
strokeWidth: 1,
stroke: '#5F95FF',
fill: '#EFF4FF',
magnet: true,
},
portNameLabel: {
ref: 'portBody',
refX: 6,
refY: 6,
fontSize: 10,
},
portTypeLabel: {
ref: 'portBody',
refX: 95,
refY: 6,
fontSize: 10,
},
},
position: 'erPortPosition',
},
},
},
},
true,
)
const containerRef = this.$refs.containerRef
const graph = new Graph({
container: containerRef,
connecting: {
router: {
name: 'er',
args: {
offset: 25,
direction: 'H',
},
},
createEdge() {
return new Shape.Edge({
attrs: {
line: {
stroke: '#A2B1C3',
strokeWidth: 2,
},
},
})
},
},
})
console.log('ErJson', ErJson);
const cells = []
ErJson.forEach((item) => {
if (item.shape === 'edge') {
cells.push(graph.createEdge(item))
} else {
cells.push(graph.createNode(item))
}
})
graph.resetCells(cells)
graph.zoomToFit({ padding: 10, maxScale: 1 })
}
}
}
- 容器样式
其他实例参照Gitee
- 基于开源项目补充实例
- 通过脚手架
my_cli实现—处理依赖冲突