vue使用x6画流程图,简单使用

官网

https://x6.antv.antgroup.com/tutorial/getting-started

安装

npm install @antv/x6 --save

使用

csharp 复制代码
<template>
  <div>3333
    <div id="container" style="width: 800px;height: 800px;"></div>
  </div>
</template>
<script>
import { Graph } from '@antv/x6'
export default {

  data() {
    return {
    }
  },
  computed: {

  },
  mounted() {
    const data = {
      nodes: [
        {
          id: 'node1',
          shape: 'rect',
          x: 40,
          y: 40,
          width: 100,
          height: 40,
          label: 'hello',
          attrs: {
            // body 是选择器名称,选中的是 rect 元素
            body: {
              stroke: '#8f8f8f',
              strokeWidth: 1,
              fill: '#fff',
              rx: 6,
              ry: 6,
            },
          },
        },
        {
          id: 'node2',
          shape: 'rect',
          x: 160,
          y: 180,
          width: 100,
          height: 40,
          label: 'world',
          attrs: {
            body: {
              stroke: '#8f8f8f',
              strokeWidth: 1,
              fill: '#fff',
              rx: 6,
              ry: 6,
            },
          },
        },
      ],
      edges: [
        {
          shape: 'edge',
          source: 'node1',
          target: 'node2',
          label: 'x6',
          attrs: {
            // line 是选择器名称,选中的边的 path 元素
            line: {
              stroke: '#8f8f8f',
              strokeWidth: 1,
            },
          },
        },
      ],
    }
    const graph = new Graph({
      container: document.getElementById('container'),
      width: 800,
      height: 600,
      background: {
        color: '#F2F7FA',
      },
    })
    graph.fromJSON(data) // 渲染元素
    graph.centerContent() // 居中显示
  },
  methods: {

  }
};
</script>
<style>

</style>

2、一个一个节点添加

csharp 复制代码
<template>
  <div style="margin: 10px;">
    <el-button size="mini"  @click="rowclick('/#/new/purchase/request?background=1','请购单')">请购单</el-button>
    <el-button size="mini"  @click="rowclick('/#/new/purchase/purchaseplan?background=1','采购计划单')">采购计划单</el-button>
    <el-button size="mini"  @click="rowclick('/#/new/purchase/order?background=1','采购订单')">采购订单</el-button>

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

<script>
  import { Graph } from '@antv/x6'
  export default {
    props:['win'],
    data() {
      return {

      };
    },
    mounted() {
      //画布
      const graph = new Graph({
        container: document.getElementById('container'),
        width: 800,
        height: 600,
        background: {
          color: '#F2F7FA',
        },
      })
      //节点1
      graph.addNode({
        id: 'node1',
        shape: 'rect',
        label: 'hello',
        x: 100,
        y: 40,
        width: 100,
        height: 40,
        attrs: {
          // body 是选择器名称,选中的是 rect 元素
          body: {
            stroke: '#8f8f8f',
            strokeWidth: 1,
            fill: '#fff',
            rx: 6,
            ry: 6,
          },
        },
      })
      //节点2
      graph.addNode({
        id: 'node2',
        shape: 'rect',
        label: 'hello',
        x: 100,
        y: 100,
        width: 100,
        height: 40,
        attrs: {
          // body 是选择器名称,选中的是 rect 元素
          body: {
            stroke: '#8f8f8f',
            strokeWidth: 1,
            fill: '#fff',
            rx: 6,
            ry: 6,
          },
        },
      })
      //节点1连接节点2
      graph.addEdge({
        shape: 'edge',
        source: 'node1',
        target: 'node2',
        attrs: {
          // line 是选择器名称,选中的边的 path 元素
          line: {
            stroke: '#8f8f8f',
            strokeWidth: 1,
          },
        },
      })
      graph.centerContent() // 居中显示
    },
    methods: {
      //点击
      rowclick(id, path, name){
        this.win(id,path,name);
      },
    }
  };
  </script>
</script>

<style>
</style>
相关推荐
Hockor28 分钟前
用 Kimi K2 写前端是一种什么体验?还支持 Claude Code 接入?
前端
杨进军29 分钟前
React 实现 useMemo
前端·react.js·前端框架
海底火旺31 分钟前
浏览器渲染全过程解析
前端·javascript·浏览器
你听得到1131 分钟前
揭秘Flutter图片编辑器核心技术:从状态驱动架构到高保真图像处理
android·前端·flutter
驴肉板烧凤梨牛肉堡33 分钟前
浏览器是否支持webp图像的判断
前端
Xi-Xu34 分钟前
隆重介绍 Xget for Chrome:您的终极下载加速器
前端·网络·chrome·经验分享·github
摆烂为不摆烂36 分钟前
😁深入JS(九): 简单了解Fetch使用
前端
杨进军36 分钟前
React 实现多个节点 diff
前端·react.js·前端框架
用户408128120038136 分钟前
拓展运算符和剩余参数
前端
再见了那维莱特40 分钟前
6.29 drilling notes
前端