vue实现数据结构图

Vue 实现数据结构图的方法

使用第三方库

Vue 可以与多种图表库结合使用，例如 D3.js、ECharts 或 Vis.js。这些库提供了强大的图形渲染能力，适合展示复杂的数据结构图。

安装 ECharts：

npm install echarts vue-echarts

在 Vue 组件中使用：

<template>
  <div ref="chart" style="width: 600px; height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  mounted() {
    const chart = echarts.init(this.$refs.chart);
    chart.setOption({
      series: [{
        type: 'graph',
        layout: 'force',
        data: [
          { id: 'A', name: '节点A' },
          { id: 'B', name: '节点B' },
          { id: 'C', name: '节点C' }
        ],
        links: [
          { source: 'A', target: 'B' },
          { source: 'B', target: 'C' }
        ]
      }]
    });
  }
};
</script>

自定义渲染

如果需要更灵活的渲染方式，可以使用 Vue 的模板语法和计算属性动态生成数据结构图。

示例代码：

<template>
  <div class="graph-container">
    <div v-for="node in nodes" :key="node.id" class="node" :style="{ left: node.x + 'px', top: node.y + 'px' }">
      {{ node.name }}
    </div>
    <svg class="edges">
      <line v-for="edge in edges" :key="edge.id" :x1="getNode(edge.from).x" :y1="getNode(edge.from).y" :x2="getNode(edge.to).x" :y2="getNode(edge.to).y" stroke="black" />
    </svg>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nodes: [
        { id: 1, name: 'A', x: 100, y: 100 },
        { id: 2, name: 'B', x: 200, y: 200 },
        { id: 3, name: 'C', x: 300, y: 100 }
      ],
      edges: [
        { id: 1, from: 1, to: 2 },
        { id: 2, from: 2, to: 3 }
      ]
    };
  },
  methods: {
    getNode(id) {
      return this.nodes.find(node => node.id === id);
    }
  }
};
</script>

<style>
.graph-container {
  position: relative;
  width: 500px;
  height: 500px;
}
.node {
  position: absolute;
  width: 50px;
  height: 50px;
  background: #ccc;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.edges {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}
</style>

使用专门的数据结构库

对于更复杂的数据结构（如树、图、链表），可以使用专门的数据结构库（如 js-data-structures）与 Vue 结合。

示例代码：

<template>
  <div>
    <div v-for="(node, index) in graph.nodes" :key="index">
      {{ node.value }}
      <span v-if="node.next"> -> {{ node.next.value }}</span>
    </div>
  </div>
</template>

<script>
import { Graph } from 'js-data-structures';

export default {
  data() {
    const graph = new Graph();
    graph.addNode('A');
    graph.addNode('B');
    graph.addEdge('A', 'B');
    return {
      graph
    };
  }
};
</script>

动态交互实现

可以通过 Vue 的响应式特性实现动态交互，例如拖拽节点、添加/删除节点等。

示例代码：

<template>
  <div class="graph">
    <div v-for="node in nodes" :key="node.id" class="node" :style="{ left: node.x + 'px', top: node.y + 'px' }" @mousedown="startDrag(node)" @mousemove="drag(node)" @mouseup="stopDrag">
      {{ node.name }}
    </div>
    <button @click="addNode">添加节点</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nodes: [
        { id: 1, name: 'Node 1', x: 100, y: 100 },
        { id: 2, name: 'Node 2', x: 200, y: 200 }
      ],
      dragging: false
    };
  },
  methods: {
    startDrag(node) {
      this.dragging = true;
      this.currentNode = node;
    },
    drag(node) {
      if (this.dragging && this.currentNode === node) {
        node.x = event.clientX;
        node.y = event.clientY;
      }
    },
    stopDrag() {
      this.dragging = false;
    },
    addNode() {
      const newNode = {
        id: this.nodes.length + 1,
        name: 'Node ' + (this.nodes.length + 1),
        x: Math.random() * 300,
        y: Math.random() * 300
      };
      this.nodes.push(newNode);
    }
  }
};
</script>

<style>
.node {
  position: absolute;
  width: 80px;
  height: 80px;
  background: #42b983;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: move;
}
</style>