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>
相关推荐
前端小巷子14 分钟前
跨域问题解决方案:JSONP
前端·javascript·面试
eric*168821 分钟前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹
程序员爱钓鱼37 分钟前
Go语言中的反射机制 — 元编程技巧与注意事项
前端·后端·go
GIS之路1 小时前
GeoTools 结合 OpenLayers 实现属性查询(二)
前端·信息可视化
烛阴1 小时前
一文搞懂 Python 闭包:让你的代码瞬间“高级”起来!
前端·python
AA-代码批发V哥1 小时前
HTML之表单结构全解析
前端·html
聪聪的学习笔记1 小时前
【1】确认安装 Node.js 和 npm版本号
前端·npm·node.js
小磊哥er2 小时前
【前端工程化】你知道前端编码规范包含哪些内容吗
前端
菌菇汤2 小时前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
Ramos丶2 小时前
【ABAP】 从无到有 新建一个Webdynpro程序
java·前端·javascript