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

大得369

已于 2024-07-18 14:53:36 修改

阅读量1k

点赞数 10

文章标签： vue.js 流程图前端

于 2024-07-18 14:07:13 首次发布

本文链接：https://blog.csdn.net/qq_34631220/article/details/140521773

版权

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

安装
npm install @antv/x6 --save

使用

<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、一个一个节点添加

<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>