Antv G6

前言

一、使用步骤

1.引入库

Step 1: 使用命令行在项目目录下执行以下命令：

 npm install --save @antv/g6

 Step 2: 在需要用的vue文件中 G6 的 JS 文件中导入：

import G6 from '@antv/g6';

如果在HTML文件中写，在HTML文件中：

<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-{$version}/build/g6.js"></script>

 二、进行操作

1.首先需要创建画布

<template>
    <div id="graph"></div>
</template>

 2.数据处理

const data = {
  nodes: [
    {
      id: 'node1',
      label: 'node1',
    },
    {
      id: 'node2',
      label: 'node2',
    },
  ],
  edges: [
    {
      source: 'node1',
      target: 'node2',
    },
  ],
}

this.graph.data(data)
this.graph.render()

 3.对数据进行渲染

   mounted(){
        this.$nextTick(()=>{
            this.createGraphic();
        })
    },

 methods方法里方法&