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>
相关推荐
zjjuejin1 天前
Maven项目的核心蓝图:POM文件
前端·maven
小气小憩1 天前
“暗战”百度搜索页:Monica悬浮球被“围剿”,一场AI Agent与传统巨头的流量攻防战
前端·人工智能
前端付豪1 天前
1、震惊!99% 前端都没搞懂的 JavaScript 类型细节
前端·javascript·面试
朝与暮1 天前
js符号(Symbol)
前端·javascript
恋猫de小郭1 天前
对于普通程序员来说 AI 是什么?AI 究竟用的是什么?
前端·flutter·ai编程
大怪v1 天前
前端:人工智能?我也会啊!来个花活,😎😎😎“自动驾驶”整起!
前端·javascript·算法
我是天龙_绍1 天前
vue3 props 如何写ts,进行类型标注
前端
叫我詹躲躲1 天前
n8n 自动化工作流平台完整部署
前端·langchain·领域驱动设计
遂心_1 天前
为什么 '1'.toString() 可以调用?深入理解 JavaScript 包装对象机制
前端·javascript
IT_陈寒1 天前
JavaScript 性能优化:5 个被低估的 V8 引擎技巧让你的代码快 200%
前端·人工智能·后端