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>
相关推荐
GIS程序媛—椰子10 分钟前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_00116 分钟前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端19 分钟前
Content Security Policy (CSP)
前端·javascript·面试
木舟100923 分钟前
ffmpeg重复回听音频流,时长叠加问题
前端
王大锤439133 分钟前
golang通用后台管理系统07(后台与若依前端对接)
开发语言·前端·golang
我血条子呢1 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
黎金安1 小时前
前端第二次作业
前端·css·css3
啦啦右一1 小时前
前端 | MYTED单篇TED词汇学习功能优化
前端·学习
半开半落1 小时前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt