Vue.js 는 AntV X6 의 예제 절 차 를 사용 합 니 다.

선언
프로젝트 는 프로 세 스 맵 을 사용 하고 수요 도 상세 하지 않 기 때문에 비교적 유연 한 x6 그래 픽 편집 기 를 프로 세 스 맵 편집기 로 선택 하 십시오.문 서 를 보면 복잡 하지 않 습 니 다.여 기 는 참고 튜 토리 얼 입 니 다.
Antv X6 문서
0x1 설치
튜 토리 얼 알림 에 따라 x6 의존 을 설치 한 다음 에 새 용 기 를 예화 합 니 다.

<div ref="containerRef" class="area-center-container" />

const data = {
  //   
  nodes: [
    {
      id: 'node1', // String，  ，       
      x: 40,       // Number，  ，      x  
      y: 40,       // Number，  ，      y  
      width: 80,   // Number，  ，      width  
      height: 40,  // Number，  ，      height  
      label: 'hello', // String，    
    },
    {
      id: 'node2', // String，       
      x: 160,      // Number，  ，      x  
      y: 180,      // Number，  ，      y  
      width: 80,   // Number，  ，      width  
      height: 40,  // Number，  ，      height  
      label: 'world', // String，    
    },
  ],
  //  
  edges: [
    {
      source: 'node1', // String，  ，     id
      target: 'node2', // String，  ，     id
    },
  ],
}

function initGraph() {
  const graph = new Graph({
    container: this.$refs.containerRef,
    grid: {
      size: 10, //      10px
      visible: true //       
    },
    snapline: {
      enabled: true, //    
      sharp: true
    },
    scroller: {
      enabled: true,
      pageVisible: false,
      pageBreak: false,
      pannable: true
    }
  })
  //     
  graph.centerContent()

  graph.fromJSON(data)
}

이렇게 가장 간단 한 예 가 실현 되 었 습 니 다.위의 서로 다른 매개 변 수 는 문서 에 대응 하 는 설명 을 참고 하 십시오.
0x2 노드 사 이 드 바
문서 의stencil예 를 들 어 많은 코드 양 을 간소화 할 수 있 고 봉 인 된 업무 로 직접 하면 됩 니 다.위 와 같이 용기 의 실례 화 를 직접 쓰 면 됩 니 다.

<el-aside ref="stencilRef" class="area-left" />

this.stencil = new Stencil({
    title: '       ',
    target: graph,
    search: false,
    collapsable: true,
    stencilGraphWidth: this.$refs.stencilRef.$el.clientWidth,
    stencilGraphHeight: this.$refs.stencilRef.$el.clientHeight,
    groups: [
        {
            name: 'group',
            title: '     ',
            collapsable: false
          }
        ],
    getDropNode: node => {
        let cloneNode = node.clone()
        switch (node.shape) {
            case 'rect':
                cloneNode = new RectShape()
                break
            case 'circle':
                cloneNode = new CircleShape()
                break
            case 'polygon':
                cloneNode = new PolylineShape()
                break
        }
        cloneNode.updateInPorts(graph)
        return cloneNode
    }
})
//     
this.stencil.load([new Rect(rectInfo), new Circle(circleInfo), new Polygon(polygonInfo)], 'group')

0x3 통합 예
온라인:https://codesandbox.io/s/icy-meadow-rqihx

이상 은 Vue.js 가 Antv X6 를 사용 하 는 예제 절차 에 대한 상세 한 내용 입 니 다.Vue.js 가 Antv X6 를 사용 하 는 것 에 관 한 자 료 는 저희 의 다른 관련 글 을 주목 하 세 요!