Beispielschritte zur Verwendung von AntV X6 mit Vue.js

<div ref="containerRef" Klasse="Bereichszentrum-Container" />

const Daten = {
  // Knoten: [
    {
      id: 'node1', // String, optional, eindeutige Kennung des Knotens x: 40, // Zahl, erforderlich, x-Wert der Knotenposition y: 40, // Zahl, erforderlich, y-Wert der Knotenposition width: 80, // Zahl, optional, Breitenwert der Knotengröße height: 40, // Zahl, optional, Höhenwert der Knotengröße label: 'hello', // String, Knotenbezeichnung },
    {
      id: 'node2', // String, eindeutige Kennung des Knotens x: 160, // Zahl, erforderlich, x-Wert der Knotenposition y: 180, // Zahl, erforderlich, y-Wert der Knotenposition width: 80, // Zahl, optional, Breitenwert der Knotengröße height: 40, // Zahl, optional, Höhenwert der Knotengröße label: 'world', // String, Knotenbezeichnung },
  ],
  // Kanten: [
    {
      Quelle: 'node1', // String, erforderlich, Startknoten-ID
      Ziel: 'node2', // String, erforderlich, Zielknoten-ID
    },
  ],
}

Funktion initGraph() {
  const Graph = neuer Graph({
    Container: this.$refs.containerRef,
    Netz: {
      Größe: 10, // Rastergröße 10px
      sichtbar: true // Rendernetzhintergrund},
    Schnapplinie:
      aktiviert: true, // Ausrichtung scharf: true
    },
    Scroller:
      aktiviert: true,
      pageVisible: false,
      Seitenumbruch: false,
      schwenkbar: true
    }
  })
  //Zentrieren Sie die Leinwand graph.centerContent()

  graph.fromJSON(Daten)
}

<el-aside ref="stencilRef" Klasse="Bereich links" />

this.stencil = neue Schablone({
    Titel: 'Prozessknoten-Seitenleiste',
    Ziel: Graph,
    Suche: false,
    zusammenklappbar: wahr,
    stencilGraphWidth: this.$refs.stencilRef.$el.clientWidth,
    stencilGraphHeight: this.$refs.stencilRef.$el.clientHeight,
    Gruppen: [
        {
            Name: "Gruppe",
            Titel: 'Flussdiagrammknoten',
            zusammenklappbar: falsch
          }
        ],
    getDropNode: Knoten => {
        Lassen Sie cloneNode = node.clone()
        Schalter (Knoten.Form) {
            Fall 'Rechteck':
                cloneNode = neue Rechteckform()
                brechen
            Fall 'Kreis':
                cloneNode = neue Kreisform()
                brechen
            Fall 'Polygon':
                cloneNode = neue Polylinienform()
                brechen
        }
        cloneNode.updateInPorts(Grafik)
        KloneNode zurückgeben
    }
})
// Knoten laden this.stencil.load([new Rect(rectInfo), new Circle(circleInfo), new Polygon(polygonInfo)], 'group')