Antv 使用

Antv 使用

在线文档

https://antv.gitee.io/zh

安装

执行命令 npm install @antv/x6 --save
在文件中引入 x6 import { Graph } from '@antv/x6';

初始化

步骤:

• 1. 创建容器
• 2. 准备数据
• 3. 渲染画布

<template>
  <div class="antv_components">
// 1.  创建容器
    <div id="container"></div>
  </div>
</template>

<script>
import { Graph } from "@antv/x6";
export default {
  name: "antv",
  mounted() {
    this.initGraph();
  },
  data() {
    return {
        // 2. 准备数据
      antViewData: {
        // 节点
        nodes: [
          {
            id: "node1", // String，可选，节点的唯一标识
            x: 40, // Number，必选，节点位置的 x 值
            y: 40, // Number，必选，节点位置的 y 值
            width: 80, // Number，可选，节点大小的 width 值
            height: 40, // Number，可选，节点大小的 height 值
            label: "hello", // String，节点标签
          },
          {
            id: "node2", // String，节点的唯一标识
            x: 160, // Number，必选，节点位置的 x 值
            y: 180, // Number，必选，节点位置的 y 值
            width: 80, // Number，可选，节点大小的 width 值
            height: 40, // Number，可选，节点大小的 height 值
            label: "world", // String，节点标签
            shape: "ellipse",
          },
        ],
        // 边
        edges: [
          {
            source: "node1", // String，必须，起始节点 id
            target: "node2", // String，必须，目标节点 id
          },
        ],
      },
    };
  },
  methods: {
    initGraph() {
        // 3. 渲染画布
      const graph = new Graph({
        container: document.getElementById("container"),
        width: 800,
        height: 600,
        background: {
          color: "tomato",
        },
        grid: {
          size: 20,
          visible: true,
        },
      });
      graph.fromJSON(this.antViewData);
    },
  },
};
</script>

<style lang='less' scope>
.antv_components {
  color: tomato;
  div {
    margin: 0 auto;
  }
}
</style>