当前位置：首页 > VUE

vue实现er图

2026-03-29 03:28:05VUE

Vue 实现 ER 图

使用第三方库

推荐使用 vue-erdjs 或 mxgraph 结合 Vue 实现 ER 图。vue-erdjs 是基于 erdjs 封装的 Vue 组件，专门用于绘制实体关系图。

安装依赖：

npm install vue-erdjs

示例代码：

<template>
  <div>
    <vue-erdjs
      :entities="entities"
      :relationships="relationships"
      @entity-click="handleEntityClick"
    />
  </div>
</template>

<script>
import VueErdjs from 'vue-erdjs';

export default {
  components: {
    VueErdjs
  },
  data() {
    return {
      entities: [
        { id: '1', name: 'User', attributes: ['id', 'name', 'email'] },
        { id: '2', name: 'Order', attributes: ['id', 'userId', 'amount'] }
      ],
      relationships: [
        { source: '1', target: '2', type: 'one-to-many' }
      ]
    };
  },
  methods: {
    handleEntityClick(entity) {
      console.log('Clicked entity:', entity);
    }
  }
};
</script>

手动实现 ER 图

如果需要手动实现，可以使用 SVG 或 Canvas 绘制 ER 图。以下是一个基于 SVG 的简单实现：

<template>
  <svg width="800" height="600" @click="handleClick">
    <!-- 绘制实体 -->
    <rect
      v-for="entity in entities"
      :key="entity.id"
      :x="entity.x"
      :y="entity.y"
      width="120"
      height="80"
      fill="#f0f0f0"
      stroke="#333"
    />
    <text
      v-for="entity in entities"
      :key="`text-${entity.id}`"
      :x="entity.x + 60"
      :y="entity.y + 40"
      text-anchor="middle"
      dominant-baseline="middle"
    >
      {{ entity.name }}
    </text>

    <!-- 绘制关系线 -->
    <line
      v-for="rel in relationships"
      :key="`line-${rel.source}-${rel.target}`"
      :x1="getEntityCenter(rel.source).x"
      :y1="getEntityCenter(rel.source).y"
      :x2="getEntityCenter(rel.target).x"
      :y2="getEntityCenter(rel.target).y"
      stroke="#333"
      stroke-width="2"
    />
  </svg>
</template>

<script>
export default {
  data() {
    return {
      entities: [
        { id: '1', name: 'User', x: 100, y: 100 },
        { id: '2', name: 'Order', x: 300, y: 200 }
      ],
      relationships: [
        { source: '1', target: '2' }
      ]
    };
  },
  methods: {
    getEntityCenter(id) {
      const entity = this.entities.find(e => e.id === id);
      return {
        x: entity.x + 60,
        y: entity.y + 40
      };
    },
    handleClick(event) {
      console.log('Clicked at:', event.clientX, event.clientY);
    }
  }
};
</script>

使用 mxgraph

mxgraph 是一个功能强大的图形库，可以用于绘制复杂的 ER 图。

安装依赖：

npm install mxgraph

示例代码：

vue实现er图

<template>
  <div ref="graphContainer" style="width: 100%; height: 600px;"></div>
</template>

<script>
import { mxGraph, mxRubberband } from 'mxgraph';

export default {
  mounted() {
    this.initGraph();
  },
  methods: {
    initGraph() {
      const container = this.$refs.graphContainer;
      const graph = new mxGraph(container);

      // 启用橡皮筋选择
      new mxRubberband(graph);

      // 开始编辑
      const parent = graph.getDefaultParent();
      graph.getModel().beginUpdate();
      try {
        const user = graph.insertVertex(parent, null, 'User', 100, 100, 120, 80);
        const order = graph.insertVertex(parent, null, 'Order', 300, 200, 120, 80);
        graph.insertEdge(parent, null, 'has', user, order);
      } finally {
        graph.getModel().endUpdate();
      }
    }
  }
};
</script>