vue使用antvG6笔记

正函数　

已于 2022-02-25 16:00:46 修改

阅读量1.1k

点赞数

分类专栏： antv/g6 文章标签： antv/g6

于 2022-02-25 13:45:29 首次发布

本文链接：https://blog.csdn.net/weixin_45799605/article/details/123131269

版权

antv/g6 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文档展示了如何在Vue项目中安装并使用AntV G6库来创建一个简单的图谱。首先通过npm安装G6，然后在组件中导入并初始化图谱，设置容器、宽高，加载数据并渲染。示例代码包括了节点和边的数据结构，以及模板和脚本部分的实现。

摘要由CSDN通过智能技术生成

安装

 npm install --save @antv/g6

引入

import G6 from "@antv/g6";

代码

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

<script>
import G6 from "@antv/g6";
export default {
  name: "Home",
  data() {
    return {
      data: {
        // 点集
        nodes: [
          {
            id: "node1", // String，该节点存在则必须，节点的唯一标识
            x: 100, // Number，可选，节点位置的 x 值
            y: 200 // Number，可选，节点位置的 y 值
          },
          {
            id: "node2", // String，该节点存在则必须，节点的唯一标识
            x: 300, // Number，可选，节点位置的 x 值
            y: 200 // Number，可选，节点位置的 y 值
          }
        ],
        // 边集
        edges: [
          {
            source: "node1", // String，必须，起始点 id
            target: "node2" // String，必须，目标点 id
          }
        ]
      },
      gaph: null //实例
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    //初始化图谱方法
    init() {
      this.graph = new G6.Graph({
        container: "home", // 指定图画布的容器 id，与第 9 行的容器对应
        // 画布宽高
        width: 800,
        height: 500
      });
      // 读取数据
      this.graph.data(this.data);
      // 渲染图
      this.graph.render();
    }
  }
};
</script>
<style>
.home {
  width: 100%;
  height: 500px;
}
</style>