@antv g6 Day1 创建画布

<div id="graph" />
methods: {
  // 1.准备数据
  const data = {
    nodes: [
      {
         id: 1,
        x: 100,
        y: 100
      },
      {
        id: 2,
        x: 200,
        y: 200
      },
      {
        id: 3,
        x: 300,
        y: 300
      },
    ],
    edges: [
      {
        target: 1,
        source: 2
      },
      {
        target: 2,
        source: 3
      }
    ]
  },
  //2.绘制画布
  const graph = new G6.Graph({
    container: 'graph',
    width: window.innerWidth,
    height: window.innerHeight,
    modes: {
      default: ['drag-canvas', 'drag-node', 'zoom-canvas', 'click-select']
    },
    nodeStateStyles: { // 节点状态样式
      hover: {
        fill: 'yellow'
      },
      click: {
        stroke: 'blue',
        lineWidth: 2
      }
    }
  })
  //3.渲染数据
  graph.data(data)
  graph.render()
}