基于 AntV G6 和 Vue 构建 5 种图形可视化应用的全指南

使用 AntV G6 和 Vue 实现图可视化

AntV G6 是一个基于图形的可视化框架，适用于构建图形关系展示。本文将指导你如何在 Vue 项目中集成 AntV G6，展示基本的图形关系，并提供详细的步骤和示例代码。

环境准备

• 确保你已经安装 Node.js 和 npm。
• 创建一个新的 Vue 项目，使用 Vue CLI 执行以下命令：

vue create my-graph-app

安装 AntV G6

进入项目目录并安装 AntV G6：

cd my-graph-app

npm install @antv/g6

创建图形组件

在项目中创建一个新的组件，命名为 Graph.vue 并添加以下代码：

<template>

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

<script>
import G6 from '@antv/g6';

export default {
  name: 'Graph',
  mounted() {
    this.initGraph();
  },
  methods: {
    initGraph() {
      const data = {
        nodes: [
          { id: 'node1', label: 'Node 1' },
          { id: 'node2', label: 'Node 2' },
        ],
        edges: [
          { source: 'node1', target: 'node2' },
        ],
      };

      const graph = new G6.Graph({
        container: this.$refs.container,
        width: this.$refs.container.clientWidth,
        height: this.$refs.container.clientHeight,
        layout: {
          type: 'dagre',
        },
        defaultNode: {
          shape: 'circle',
          size: [30],
          style: {
            fill: '#9fd5e1',
            stroke: '#5b8ff9',
          },
        },
        defaultEdge: {
          style: {
            stroke: '#5b8ff9',
          },
        },
      });

      graph.data(data);
      graph.render();
    },
  },
};
</script>

<style scoped>

</style>

在主组件中使用 Graph 组件

打开 App.vue，然后引入并使用 Graph 组件：

<template>

  <div id="app">
    <h1>AntV G6 & Vue Integration</h1>
    <Graph />
  </div>
</template>

<script>
import Graph from './components/Graph.vue';

export default {
  name: 'App',
  components: {
    Graph,
  },
};
</script>

<style>

</style>

启动项目

在终端中运行以下命令以启动 Vue 项目：

npm run serve

打开浏览器并访问 http://localhost:8080，你应该能看到一个简单的图形关系展示。

注意事项

• 确保 G6 的版本与 Vue 兼容，参考 G6 的官方文档以获取最新信息。
• 在调整图形样式时，可以自定义节点和边的形状及样式以满足需求。
• 使用 layout 属性可以改变图形的布局方式，不同的布局可能影响图形的可读性。

实用技巧

• 使用 graph.on(event, handler) 来监听图形的交互事件，例如节点点击或拖动。
• 可在 defaultNode 和 defaultEdge 中自定义节点和边的样式以增强可视化效果。