第一 引入antv
$ npm install @antv/x6 --save
第二 写入代码 官网demo的fetch('/data/er.json')有问题
<!-- RE图-->
<template>
<div class="fangan">
<div id="container" style="min-width: 400px; min-height: 810px"></div>
</div>
</template>
<script >
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { Graph, Shape } from "@antv/x6";
import er from "@/assets/er.json";
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
return {
// 这里是父组件所需要的data，同时也是父组件向子组件传递的data
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
init() {
const LINE_HEIGHT = 24;
const NODE_WIDTH = 150;
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 graph = new Graph({
container: document.getElementById("container"),
background: {
color: "#fffbe6", // 设置画布背景颜色
},
grid: {
size: 10, // 网格大小 10px
visible: true, // 渲染网格背景
},
connecting: {
router: {
name: "er",
args: {
offset: 25,
direction: "H",
},
},
createEdge() {
return new Shape.Edge({
attrs: {
line: {
stroke: "#A2B1C3",
strokeWidth: 2,
},
},
});
},
},
});
// 遍历数据
const cells = [];
er.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 });
},
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
this.init();
},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
/* @import url(); 引入公共css类 */
#container {
width: 100%;
height: 600px;
/* background-image: url(../../assets/img/down.png); */
}
.fangan {
width: 100%;
height: 900px;
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
</style>
第三 写入json 把文件放入assets 文件夹下
[
{
"id": "1",
"shape": "er-rect",
"label": "学生",
"width": 150,
"height": 24,
"position": {
"x": 24,
"y": 150
},
"ports": [
{
"id": "1-1",
"group": "list",
"attrs": {
"portNameLabel": {
"text": "ID"
},
"portTypeLabel": {
"text": "STRING"
}
}
},
{
"id": "1-2",
"group": "list",
"attrs": {
"portNameLabel": {
"text": "Name"
},
"portTypeLabel": {
"text": "STRING"
}
}
},
{
"id": "1-3",
"group": "list",
"attrs": {
"portNameLabel": {
"text": "Class"
},
"portTypeLabel": {
"text": "NUMBER"
}
}
},
{
"id": "1-4",
"group": "list",
"attrs": {
"portNameLabel": {
"text": "Gender"
},
"portTypeLabel": {
"text": "BOOLEAN"
}
}
}
]
},
{
"id": "2",
"shape": "er-rect",
"label": "课程",
"width": 150,
"height": 24,
"position": {
"x": 250,
"y": 210
},
"ports": [
{
"id": "2-1",
"group": "list",
"attrs": {
"portNameLabel": {
"text": "ID"
},
"portTypeLabel": {
"text": "STRING"
}
}
},
{
"id": "2-2",
"group": "list",
"attrs": {
"portNameLabel": {
"text": "Name"
},
"portTypeLabel": {
"text": "STRING"
}
}
},
{
"id": "2-3",
"group": "list",
"attrs": {
"portNameLabel": {
"text": "StudentID"
},
"portTypeLabel": {
"text": "STRING"
}
}
},
{
"id": "2-4",
"group": "list",
"attrs": {
"portNameLabel": {
"text": "TeacherID"
},
"portTypeLabel": {
"text": "STRING"
}
}
},
{
"id": "2-5",
"group": "list",
"attrs": {
"portNameLabel": {
"text": "Description"
},
"portTypeLabel": {
"text": "STRING"
}
}
}
]
},
{
"id": "3",
"shape": "er-rect",
"label": "老师",
"width": 150,
"height": 24,
"position": {
"x": 480,
"y": 350
},
"ports": [
{
"id": "3-1",
"group": "list",
"attrs": {
"portNameLabel": {
"text": "ID"
},
"portTypeLabel": {
"text": "STRING"
}
}
},
{
"id": "3-2",
"group": "list",
"attrs": {
"portNameLabel": {
"text": "Name"
},
"portTypeLabel": {
"text": "STRING"
}
}
},
{
"id": "3-3",
"group": "list",
"attrs": {
"portNameLabel": {
"text": "Age"
},
"portTypeLabel": {
"text": "NUMBER"
}
}
}
]
},
{
"id": "4",
"shape": "edge",
"source": {
"cell": "1",
"port": "1-1"
},
"target": {
"cell": "2",
"port": "2-3"
},
"attrs": {
"line": {
"stroke": "#A2B1C3",
"strokeWidth": 2
}
},
"zIndex": 0
},
{
"id": "5",
"shape": "edge",
"source": {
"cell": "3",
"port": "3-1"
},
"target": {
"cell": "2",
"port": "2-4"
},
"attrs": {
"line": {
"stroke": "#A2B1C3",
"strokeWidth": 2
}
},
"zIndex": 0
}
]
第四 运行 剩下的就是修改样式
