G6 图可视化引擎基本使用

  const data1 = {
    nodes: [
      { id: '1', label: '采购申请', x: 100, y: 200, labelCfg: { style: { fill: 'red' } } },
      { id: '2', label: '采购申请', x: 300, y: 200 },
      { id: '3', label: '采购申请关联表', x: 500, y: 200 },
      { id: '4', label: '军事闭关', x: 700, y: 100 },
      { id: '5', label: '文化闭关', x: 700, y: 300 },
      { id: '6', label: '性别', x: 900, y: 0 },
      { id: '7', label: '省市县', x: 900, y: 200 }
    ],
    edges: [
      { source: '1', target: '2', label: '影响1', style: { endArrow: true } },
      { source: '2', target: '3', label: '影响2', style: { endArrow: true } },
      { source: '3', target: '4', label: '影响22', style: { endArrow: true } },
      { source: '3', target: '5', label: '影响3', style: { endArrow: true } },
      { source: '4', target: '6', label: '影响4', style: { endArrow: true } },
      { source: '4', target: '7', label: '影响5', style: { endArrow: true } },
      {
        source: '7',
        target: '1',
        label: '影响6',
        style: { endArrow: true },
        controlPoints: [
          { x: 1000, y: 200 },
          { x: 1000, y: 400 }, // 设置控制点的坐标，让边从下方经过
          { x: 25, y: 400 }, // 设置第二个控制点的坐标
          { x: 25, y: 200 } // 设置第二个控制点的坐标
        ]
      }
    ]
  }
  graph.value = new G6.Graph({
    container: 'mountNode', // 指定图画布的容器 id，与第 9 行的容器对应
    // 画布宽高
    width: offsetWidth - 50,
    height: offsetHeight - 50,
    defaultEdge: {
      type: 'polyline',
      shape: 'flow-smooth-arrow', // 设置箭头形状
      style: {
        stroke: '#e2e2e2'
      },
      labelCfg: {
        style: {
          fill: '#00287E',
          fontSize: 10
        }
      }
    },
    modes: {
      default: ['zoom-canvas', 'drag-canvas']
    },
    // 默认的节点设置
    defaultNode: {
      type: 'rect',
      size: [100, 40],
      style: {
        fill: '#C6E5FF',
        stroke: '#5B8FF9',
        lineWidth: 2,
        radius: 10
      },
      labelCfg: {
        style: {
          fill: '#00287E',
          fontSize: 12
        }
      }
    }
  })
  // 监听节点点击事件
  graph.value.on('node:click', (event: any) => {
    console.log(event, 'e')
    const node = event.item // 获取点击的节点实例
    const nodeId = node.get('id') // 获取节点的 ID
    const nodeLabel = node.getModel().label // 获取节点的标签内容

    // 在控制台输出节点的信息
    console.log('Clicked Node ID:', nodeId)
    console.log('Clicked Node Label:', nodeLabel)

    // 在这里你可以根据需要处理节点信息，比如弹出详情框等操作
  })

  // 读取数据
  graph.value.data(data1)
  // 渲染图
  graph.value.render()

效果: