SOURCE

console.log(G6)
const data = {
    // 点集
    nodes: [
        {
            id: 'node1', // String，该节点存在则必须，节点的唯一标识
            x: 10, // Number，可选，节点位置的 x 值
            y: 150, // Number，可选，节点位置的 y 值
            label: 'node1',
            size: 40
        },
        {
            id: 'node2', // String，该节点存在则必须，节点的唯一标识
            x: 300, // Number，可选，节点位置的 x 值
            y: 150, // Number，可选，节点位置的 y 值
            label: 'node2'
        },
    ],
    // 边集
    edges: [
        {
            source: 'node1', // String，必须，起始点 id
            target: 'node2', // String，必须，目标点 id
            label: 'node1 -> node2'
        },
        // {
        //   source: 'node2', // String，必须，起始点 id
        //   target: 'node1', // String，必须，目标点 id
        //   label:'node2 -> node1'
        // },
    ],
};


const minimap = new G6.Minimap({
    size: [100, 100],
    className: "minimap",
    type: 'delegate'
});

// 实例化 Grid 插件
const grid = new G6.Grid();

const graph = new G6.Graph({
    container: document.getElementById('g'),
    width: 500,
    height: 300,
    fitView:true,
    fitCenter:true,
    defaultNode: {
        labelCfg: {
            style: {
                fill: '#fff'
            }
        }
    },
    defaultEdge: {
        labelCfg: {
            autoRotate: true
        }
    },
    nodeStateStyles: {
        hover: {
            fill: 'lightsteelblue'
        },
        click: {
            stroke: '#000',
            lineWidth: 3
        }
    },
    edgeStateStyles: {
        click: {
            stroke: 'steelblue'
        }
    },
    layout: {
        type: 'force',
        linkDistance: 100,
        preventOverlap: true,
        nodeStrength: -30,
        edgeStrength: 0.1
    },
    modes: {
        default: ['drag-node', 'drag-canvas', 'zoom-canvas',
            // 点提示框交互工具的配置
            {
                type: 'tooltip',
                formatText(model) {
                    const text = 'label: ' + model.label
                        + '<br/> class: ' + model.class;
                    return text;
                },
                shouldUpdate: e => {
                    return true;
                }
            },
            // 边提示框交互工具的配置
            {
                type: 'edge-tooltip',
                formatText(model) {
                    const text = 'source: ' + model.source
                        + '<br/> target: ' + model.target
                        + '<br/> weight: ' + model.weight;
                    return text;
                },
                shouldUpdate: e => {
                    return true;
                }
            }
        ]
    },
    plugins: [minimap, grid],    // 将 Minimap 和 Grid 插件的实例配置到图上
    fitCenter: true,
})

graph.data(data)
graph.render()

<div id="g" style="border:1px solid red;" ></div>