vue2使用antvG6自定义折线方法

1. 安装antvG6

npm install @antv/g6 --save

2. 在Vue组件中引入antvG6

<template>
  <div id="container"></div>
</template>

<script>
import G6 from '@antv/g6';

export default {
  name: 'CustomLine',
  mounted() {
    this.initGraph();
  },
  methods: {
    initGraph() {
      const data = {
        nodes: [
          { id: 'node1', x: 100, y: 100 },
          { id: 'node2', x: 200, y: 200 },
          { id: 'node3', x: 300, y: 300 },
        ],
        edges: [
          { source: 'node1', target: 'node2', type: 'custom-line' },
          { source: 'node2', target: 'node3', type: 'custom-line' },
        ],
      };

      G6.registerEdge('custom-line', {
        draw(cfg, group) {
          const startPoint = cfg.startPoint;
          const endPoint = cfg.endPoint;

          const shape = group.addShape('path', {
            attrs: {
              stroke: '#333',
              lineWidth: 2,
              path: [
                ['M', startPoint.x, startPoint.y],
                ['L', endPoint.x, endPoint.y],
              ],
            },
            name: 'path-shape',
          });

          return shape;
        },
      });

      const graph = new G6.Graph({
        container: 'container',
        width: 500,
        height: 500,
        defaultEdge: {
          type: 'custom-line',
        },
      });

      graph.data(data);
      graph.render();
    },
  },
};
</script>

3. 在注册Edge时，通过draw方法自定义折线的绘制方式。在draw方法中，可以获取到边的起点和终点，然后通过group.addShape('path', {...})方法绘制出折线。最后将折线作为返回值即可。

4. 在Graph实例中，可以通过defaultEdge配置项来指定所有边的类型，也可以通过edges配置项来指定单个边的类型。通过type属性来指定边的类型为custom-line即可。

5. 在上面的示例中，我们仅仅是绘制了一条直线。如果需要绘制更复杂的折线，可以在path数组中添加更多的点来控制折线的形状。