一、安装与引用

1. 使用以下命令行安装依赖

npm install --save @antv/g6
或
cnpm install --save @antv/g6

2. 引用依赖包

import G6 from '@antv/g6';

二、快速使用

1. 创建关系图的 HTML 容器；

需要在 HTML 中创建一个用于容纳 G6 绘制的图的容器，通常为 div  标签。G6 在绘制时会在该容器下追加 canvas 标签，然后将图绘制在其中。

<div id="container"></div>

2. 数据准备；

引入 G6 的数据源为 JSON 格式的对象。该对象中需要有节点（nodes）和边（edges）字段，分别用数组表示：

const data = {
  // 点集
  nodes: [
    {
      id: 'node1', // String，该节点存在则必须，节点的唯一标识
      label: 'node1', // 节点名字
      x: 100, // Number，可选，节点位置的 x 值
      y: 200, // Number，可选，节点位置的 y 值
    },
    {
      id: 'node2', // String，该节点存在则必须，节点的唯一标识
      label: 'node2', // 节点名字
      x: 300, // Number，可选，节点位置的 x 值
      y: 200, // Number，可选，节点位置的 y 值
    },
  ],
  // 边集
  edges: [
    {
      source: 'node1', // String，必须，起始点 id
      target: 'node2', // String，必须，目标点 id
    },
  ],
};

注意

• nodes 数组中包含节点对象。每个节点对象中唯一的、必要的 id 以标识不同的节点，x、 y 指定该节点的位置；
• edges 数组中包含边对象。source 和 target 是每条边的必要属性，分别代表了该边的起始点 id 与 目标点 id。

3. 创建关系图；

创建关系图（实例化）时，至少需要为图设置容器、宽和高。

const graph = new G6.Graph({
  container: 'container', // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身
  width: 800, // Number，必须，图的宽度
  height: 500, // Number，必须，图的高度
});

4. 配置数据源，渲染。

graph.data(data); // 读取 Step 2 中的数据源到图上
graph.render(); // 渲染图

5. 最后的结果

6、完整代码

<template>
  <div>
    <!-- // 用法就是一下几个步骤：
    // 1、 npm install --save @antv/g6 //下载组件
    // 2、import G6 from '@antv/g6'; //在需要的地方引入组件
    // 3、具体使用：
    // （1）、创建容器
    // （2）、数据准备
    // （3）、创建关系图
    // （4）、配置数据源，渲染 -->
    <!-- 1、创建容器 -->
    <div id="container"></div>
  </div>
</template>

<script>
import G6 from '@antv/g6';
export default {
  data () {
    return {
    }
  },
  created () {},
  mounted () {
    const data = {
      // 点集
      nodes: [
        {
          id: 'node1', // String，该节点存在则必须，节点的唯一标识
          label: 'node1',
          x: 100, // Number，可选，节点位置的 x 值
          y: 200, // Number，可选，节点位置的 y 值
        },
        {
          id: 'node2', // String，该节点存在则必须，节点的唯一标识
          label: 'node2',
          x: 300, // Number，可选，节点位置的 x 值
          y: 200, // Number，可选，节点位置的 y 值
        },
      ],
      // 边集
      edges: [
        {
          source: 'node1', // String，必须，起始点 id
          target: 'node2', // String，必须，目标点 id
        },
      ],
    };
    const graph = new G6.Graph({
      container: 'container', // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身
      width: 800, // Number，必须，图的宽度
      height: 500, // Number，必须，图的高度
    });
    graph.data(data); // 读取 Step 2 中的数据源到图上
    graph.render(); // 渲染图
  },
  methods: {}
}
</script>

<style lang="less" scoped>
</style>