<template>
    <div class="bsx6"></div>
</template>

<script>
import { Graph } from "@antv/x6";

export default {
    // 名称
    name: "bsx6",
    // 使用组件
    components: {},
    // 传入参数
    props: {},
    // 自定义事件
    emits: {},
    // 数据
    data() {
        return {
            graph: null,
        };
    },
    // 函数
    methods: {
        initGraph: function () {
            this.graph = new Graph({
                container: this.$el, // 画布的容器
                // width: undefined, // 默认使用容器宽度
                // height: undefined, // 默认使用容器高度
                autoResize: true, // boolean | Element | Document 是否监听容器大小改变，并自动更新画布大小 默认监听画布容器，也可以指定监听的元素
            });
        },
        initData: function () {
            const data = {
                // 节点
                nodes: [
                    {
                        id: "node1",
                        shape: "rect",
                        x: 174,
                        y: 270,
                        width: 1480,
                        height: 3,
                        attrs: {
                            body: {
                                fill: "#efdbff",
                            },
                        },
                        movable: false,
                    },
                ],
            };
            this.graph.fromJSON(data);
        },
        initX6: function () {
            this.initGraph();
            this.initData();
        },
    },
    // 生命周期钩子
    beforeCreate() {
        // 创建前
    },
    created() {
        // 创建后
    },
    beforeMount() {
        // 渲染前
    },
    mounted() {
        // 渲染后
        this.initX6();
    },
    beforeUpdate() {
        // 数据更新前
    },
    updated() {
        // 数据更新后
    },
};
</script>

<style lang="less" scoped>
.bsx6 {
}
</style>
