创建项目

ng new angularAntvX6
npm i @antv/x6 --save
# PS：请使用^1.30.2版本，最新版ng上会有问题

修改styles.scss

html,body{ height: 100%; width: 100%; margin: 0; padding: 0;}

修改tsconfig.app.json

{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "outDir": "./out-tsc/app",
        "types": [],
        "skipLibCheck": true,// 新加的代码
    },
    "files": [
        "src/main.ts",
        "src/polyfills.ts"
    ],
    "include": [
        "src/**/*.d.ts"
    ]
}

Html代码

<div id="dddd" class="dddd" style="height: 100%; width: 100%;">
    ng1024.com
</div>

组件代码

import { Component, Input, OnInit } from '@angular/core';
import { Graph, Shape } from '@antv/x6'
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
    constructor() { }
    ngOnInit(): void {
        this.x6init();
    }

    public graph: any = ''

    x6init() {
        const elll: any = document.querySelector('#dddd');
        console.log(elll)
        this.graph = new Graph({ container: elll, grid: true })

        const rect = new Shape.Rect({
            id: 'node1',
            x: 40,
            y: 40,
            width: 100,
            height: 40,
            label: 'rect',
            zIndex: 2
        })
        const circle = new Shape.Circle({
            id: 'node2',
            x: 280,
            y: 200,
            width: 60,
            height: 60,
            label: 'circle',
            zIndex: 2,

        })

        const edge = new Shape.Edge({
            id: 'edge1',
            source: rect,
            target: circle,
            zIndex: 1,
        })
        this.graph.addNode(rect)
        this.graph.addNode(circle)
        this.graph.addEdge(edge)
    }
}