(G6)基础图

(G6)基础图

效果：

	<div id="result-graph"></div>
	
	import G6 from "@antv/g6";	
	//声明变量
	data(){
		return:{
			graph: null, 
		}
	}
    //G6可视化
    tupuShow() {
      // 1.图数据
      this.visualData = {
        nodes: [
          {
            id: "0",
            label: "test0",
            sortAttr: 0,
            size: 60,
          },
          {
            id: "1",
            label: "test1",
            sortAttr: 1,
            size: 60,
          },
          {
            id: "2",
            label: "test2",
            sortAttr: 1,
            size: 60,
          },
          {
            id: "3",
            label: "test3",
            sortAttr: 1,
            size: 60,
          },
        ],
        edges: [
          {
            source: "0",
            target: "1",
            label: "连线1",
          },
          {
            source: "0",
            target: "2",
            label: "连线2",
          },
          {
            source: "0",
            target: "3",
            label: "连线3",
          },
        ],
      };
      // 2.创建关系图
      if (this.graph) {
        this.graph.destroy();
      }
      this.graph = new G6.Graph({
        container: "result-graph",
        modes: {
          default: ["zoom-canvas", "drag-canvas", "drag-node"],
        },
        layout: {
          type: "force",
          preventOverlap: true,
          nodeSize: 100,
          linkDistance: 130,
        },
        defaultEdge: {
          labelCfg: {
            label: "line",
            refY: 10,
            autoRotate: true, // 使文本随边旋转
          },
          style: {
            lineWidth: 2,
            stroke: "#778899",
            endArrow: {
              path: G6.Arrow.vee(5, 10, 6), // 箭头的 宽、长、偏移
              d: 6,
            },
          },
        },
      });

      // 3.配置数据源，渲染
      this.graph.data(this.visualData);
      this.graph.render(); // 渲染图
      this.graph.refresh();
    },

接口数据替换：

	//声明变量
	data(){
		return:{
			graph: null,
		    nodeData: [],
		    edgeData: [],
		}
	}
 	//G6可视化
    tupuShow() { 
		//1.图数据
	   this.visualData = { nodes: [], edges: [] };
	   this.nodeData.forEach((item) => {
	     //设置 节点
	     let obj1 = {};
	     obj1 = {
	       id: item.id,
	       label: item.name,
	       sortAttr: 0,
	       size: 60,
	     };
	     this.visualData.nodes.push(obj1);
	   });
	   this.edgeData.forEach((item) => {
	     //设置 连接线
	     let obj2 = {};
	     obj2 = {
	       source: item.src,
	       target: item.dst,
	       label: item.name,
	     };
	     this.visualData.edges.push(obj2);
	   });
		...
		...
	}