Vue3+Antv X6流程图基本使用

安装 antv/X6

npm i @antv/x6

js 复制代码
<template>
  <div class="homes">
    <div class="Shang">上</div>
    <div class="Zhong">
      <div id="container"></div>
    </div>
    <div class="Xia">下</div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { Graph } from "@antv/x6";

const data = {
  // 节点
  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,节点标签
    },
  ],
  // 边
  edges: [
    {
      source: "node1", // String,必须,起始节点 id
      target: "node2", // String,必须,目标节点 id
    },
  ],
};
let graph = null;

const chushih = () => {
  graph = new Graph({
    container: document.getElementById("container"),
    width: 800,
    height: 600,
    background: {
      color: "#f7f7f7", // 设置画布背景颜色
    },
    grid: {
      size: 20, // 网格大小 10px
      visible: true, // 渲染网格背景
    type: 'dot', // 'dot' | 'fixedDot' | 'mesh'
    // args: { 
    //   color: '#36d', // 网格线/点颜色
    //   thickness: 2,     // 网格线宽度/网格点大小
    // },
    args: [
      { 
        color: '#36d', // 主网格线颜色
        thickness: 1,     // 主网格线宽度
      },
      { 
        color: '#ff0', // 次网格线颜色
        thickness: 1,     // 次网格线宽度
        factor: 4,        // 主次网格线间隔
      },
    ],
    },
  });
  graph.fromJSON(data);
};

onMounted(() => {
  chushih();
});
</script>
  
<style lang="less" scoped>
.homes {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  .Shang {
    width: 100%;
    height: 100px;
    background-color: burlywood;
  }

  .Zhong {
    flex: 1;
    box-sizing: border-box;
    padding: 10px;
    background-color: #d7c5c5;
  }

  .Xia {
    width: 100%;
    height: 100px;
    background-color: burlywood;
  }
}
</style>
  
相关推荐
阿蒙Amon几秒前
C#扩展方法全解析:给现有类型插上翅膀的魔法
开发语言·c#
江城开朗的豌豆10 分钟前
Vue路由动态生成秘籍:让你的链接'活'起来!
前端·javascript·vue.js
晓得迷路了10 分钟前
栗子前端技术周刊第 88 期 - Apache ECharts 6.0 beta、Deno 2.4、Astro 5.11...
前端·javascript·echarts
江城开朗的豌豆16 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆16 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆17 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆18 分钟前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js
尘浮72824 分钟前
60天python训练计划----day59
开发语言·python
前端 贾公子25 分钟前
monorepo + Turborepo --- 开发应用程序
java·前端·javascript
江城开朗的豌豆30 分钟前
Vue路由传参避坑指南:params和query的那些猫腻
前端·javascript·vue.js