vue 使用 antv G6

1.需求：微服务之间调度关系图

2.插件选取

因为echarts的关系图每个点需要对应的左边，所以采用 antv G6

3.使用方法

//安装
npm install --save @antv/g6
//在需要使用 G6 的文件中引用
import G6 from '@antv/g6'

html

<div class="graph-echart"  id="graph" ref="graph"></div>

配置项

1. 修改为自定义图片需要在数据中引用
2. 如果有切换变化图形，需要一个变量来实例化
3. 具体配置见g6.antv.vision/zh/docs/api…

const data = {
    "nodes": [
        {
            "id": "web-service",
            "label": "web-service",
            "img": require("@/assets/images/Rectangle_this.png")
        },
        {
            "id": "dubbo-chain-web",
            "label": "dubbo-chain-web",
             "img": require("@/assets/images/Rectangle_this.png")
        },
        {
            "id": "login-service",
            "label": "login-service",
             "img": require("@/assets/images/Rectangle_this.png")
        },
        {
            "id": "data-service",
            "label": "data-service",
             "img": require("@/assets/images/Rectangle_this.png")
        },
        {
            "id": "auth-service",
            "label": "auth-service",
             "img": require("@/assets/images/Rectangle_this.png")
        }
    ],
    "edges": [
        {
            "source": "web-service",
            "target": "dubbo-chain-web",
            "callCount": 43
        },
        {
            "source": "login-service",
            "target": "web-service",
            "callCount": 1
        },
        {
            "source": "data-service",
            "target": "auth-service",
            "callCount": 2
        },
        {
            "source": "auth-service",
            "target": "login-service",
            "callCount": 1
        }
    ]
}
const width = window.innerWidth - 330;
const height = 280;
this.graph = new G6.Graph({
  container: 'graph', // 图例的容器 id 名称
  width,
  height,
  controlPoints: false,
  modes: {
    default: ['drag-canvas', 'drag-node', 
    ],
  },
  layout: {
    type: 'dagre', //图例层级铺开
    nodeSize: [150, 100],
    nodesep: 4,
    ranksep: 4,
    rankdir: 'LR',
    align: 'UR'
  },
  animate: true,
  defaultNode: {
    size: [40, 40],
    type: 'image',
    style: {
      lineWidth: 2,
      stroke: '#000',
      fill: '#fff',
    },
  },
  defaultEdge: {
    size: 2,
    color: '#3BB5A0',//线的颜色
    style: {
      endArrow: {
        path: 'M 0,0 L 8,4 L 8,-4 Z',
        fill: '#3BB5A0',//线的颜色
      },
    },
  },
});