AntvX6-初探

前言

  antv X6 是基于 HTML 和 SVG 的图编辑引擎，提供低成本的定制能力和开箱即用的内置扩展，方便我们快速搭建 DAG 图、ER 图、流程图、血缘图等应用
官网：https://x6.antv.antgroup.com/

框架：

vue3 + vite + TS + antv x6

引依赖

首先需要在 package.json 的文件中引入依赖，博主使用的是 2.17.1

 "@antv/x6": "2.17.1"

各版本地址：https://www.yuque.com/antv/x6/bbfu6r

代码

<template>
  <div id="container"></div>
</template>
<script setup lang="ts">
import { Graph } from "@antv/x6";
import { onMounted } from "vue";
//需要在挂载后的生命周期中去使用，否则无法识别container容器
onMounted(() => {
  const graph = new Graph({
    container: document.getElementById("container"),
    width: "800",
    height: "800",
    grid: true,
  });

  graph.addNode({
    id: "a",
    x: 120,
    y: 40,
    width: 100,
    height: 40,
    attrs: {
      body: {
        fill: "#f5f5f5",	//填充
        stroke: "#d9d9d9",	//描边
      },
    },
  });

  graph.addNode({
    id: "b",
    x: 400,
    y: 260,
    width: 100,
    height: 40,
    attrs: {
      body: {
        fill: "#f5f5f5",
        stroke: "#d9d9d9",
      },
    },
  });

  graph.addEdge({
    source: "a",
    target: "b",
    vertices: [
      { x: 200, y: 200 },
      { x: 380, y: 120 },
    ],
    // https://x6.antv.vision/zh/docs/api/registry/connector#normal
    connector: { name: "normal" },
    attrs: {
      line: {
        stroke: "#722ed1",
      },
    },
  });
});
</script>

效果预览