前端JS也可以连点成线详解(Vue中运用AntVG6)

npm install --save @antv/g6

//安装成功后在需要使用的文件中进行引用
//当然如果项目中我们大量页面需要用到 G6 也可在 main 文件中引入挂载原型中

import G6 from '@antv/g6';

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

// version >= 3.3
<script src="https://gw.alipayobjects.com/os/lib/antv/g6/{$version}/dist/g6.min.js"></script>

// version >= 4.0
<script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.3.11/dist/g6.min.js"></script>

<div id="zssBox"></div>

G6Obj: {
        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
          },
        ],
      },

mounted() {
    const graph = new G6.Graph({
      container: "zssBox", // 必须，这是我们第一步中创建的DOM的id
      width: 800, // Number，必须，图的宽度
      height: 500, // Number，必须，图的高度
    });
  },

graph.data(this.G6Obj); //读取第二步中的数据源到图上
graph.render(); // 渲染图

<template>
  <div class="counter vantG6">
    <p>VantG6 演示区</p>

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

<script>
import G6 from "@antv/g6";
export default {
  name: "vantG6",
  data() {
    return {
      G6Obj: {
        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
          },
        ],
      },
    };
  },
  methods: {},
  mounted() {
    const graph = new G6.Graph({
      container: "zssBox", // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身
      width: 800, // Number，必须，图的宽度
      height: 500, // Number，必须，图的高度
    });

    graph.data(this.G6Obj); // 读取 Step 2 中的数据源到图上
    graph.render(); // 渲染图
  },
};
</script>

<style>
.vantG6 {
  background-color: rgb(221, 188, 68) !important;
}
.vantG6 p {
  margin: 0 auto;
}
</style>