g6基本配置

export function treeVisualization(graph: any, clickTreeData: any, treeDom: any, Treedata: any) {
    //初始化定义
    graph.value = new G6.TreeGraph({
        container: "container", //容器
        width: 1300, //显示树的内容区宽度
        height: 1000,//显示树的内容区高度
        pixelRatio: 2,
        linkCenter: true, //线是否从元素内中间穿过
        fitView: true, //是否自适应且剧中

        //   设置节点收到某些事件后的样式变化
        nodeStateStyles: {
            //   例:点击节点，节点背景颜色变为#057E98  注：须在下面调用
            click: {
                fill: "#057E98",
            },
        },

        modes: {
            // 设置改default当点击节点有子节点可收缩
            default: [
                {
                    type: "collapse-expand",
                    onChange: function onChange(item: any, collapsed: any) { },
                },
                "drag-canvas",
                "zoom-canvas",
            ],
        },
        // 设置node节点
        defaultNode: {
            // 设置节点的形状 circle：圆，rect：矩形，ellipse：椭圆；polygon：多边形；fan：扇形；image：图片；marker：标记；path：路径；text：文本；dom(svg)：DOM（图渲染方式 renderer 为 'svg' 时可用）。
            type: "rect",
            // 设置图形样式
            style: {
                // 内边距
                lineWidth: 2,
                // 边框
                stroke: "#0C1D36",
                // 背景色、、
                fill: "#25344A",
            },
        },

        layout: {
            // 设置布局样式compactBox//紧凑树
            type: "compactBox",
            // 佩列方向 TB竖向排列
            direction: "TB",
            getId: function getId(d: any) {
                let str = "";
                // 因为如果组件展示name时竖向的的话，他的字时横向排列的，所以每一个字之间加一个换行可以实现竖向排列
                if (d.name != undefined && JSON.stringify(d.name)[3] !== "n") {
                    for (let i = 0; i < d.name.length; i++) {
                        if (i == d.name.length - 1) {
                            str += d.name[i];
                        } else {
                            str += d.name[i] + "\n";
                        }
                    }
                    d.name = str;
                }

                return d.id;
            },
            getHeight: function getHeight() {

                return 16;
            },
            getWidth: function getWidth() {
                return 16;
            },
            getVGap: function getVGap() {
                return 80;
            },
            getHGap: function getHGap() {
                return 100;
            },
        },
    });
    // 当点击节点时触发
    graph.value.on("node:click", (e: any) => {
        // 调用上面定义的点击换背景色
        const clickNodes = graph.value.findAllByState("node", "click");
        clickNodes.forEach((cn: any) => {
            graph.value.setItemState(cn, "click", false);
        });
        const nodeItem: any = e.item;
        // 设置目标节点的 click 状态 为 true
        graph.value.setItemState(nodeItem, "click", true);
    });

    var i = 0;
    //定义连线
    graph.value.edge(function (edge: any) {
        edge.type = "polyline"; //polyline

        i++;
        return {
            // 线的颜色
            color: "#A3B1BF",
            //   label: i
        };
    });
    //定义节点
    graph.value.node(function (node: any) {
        let position = "left";
        return {
            // 节点的宽和高
            size: [20, 120],
            // 节点显示的内容
            label: node.name,
            // 节点是剧中还是左或右默认center
            position,
            // 节点内的配置
            labelCfg: {
                // 偏移  是根据position的值来进行偏移的
                offset: -10,
                position,
                style: {
                    // 字体颜色
                    fill: "white",
                    // 字体居中
                    textAlign: "center",
                },
            },
        };
    });

    var i = 0;
    //定义连线
    graph.value.edge(function () {
        i++;
        return {
            type: "cubic-vertical", //polyline
            color: "#A3B1BF",
            //label: i
        };
    });

    // 右击事件
    graph.value.on("node:contextmenu", function (evt) {
        clickTreeData.value = evt.item._cfg.model;
        treeDom.value.style.top = evt.clientY - 10 + "px";
        treeDom.value.style.left = evt.clientX - 10 + "px";
    });
    // 失去焦点事件
    graph.value.on("node:mouseleave", function (evt: any) {
        treeDom.value.style.left = "-1000px";
    });
    // 渲染页面Treedata.value[0]是一个对象
    graph.value.changeData(Treedata.value[0]);
}

// 调用实例的g6树图来新增节点，第一个是新增的对象，第二个参数为新增的父节点
graph.value.addChild();
// 调用g6实例来删除某一个树节点一个参数，要删除的id
graph.value.removeChild(clickTreeData.value.id);```