antv g6绘制时间轴 ，时间线可根据数据量进行缩放

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

export default {
  data() {
    return {
      chartSwapOne: null,
      chartData: [],
      colors: [],
      option: {},
      FishBoneDiagramInfo: {},
      fishBoneShow: false,
    };
  },
  mounted() {
    this.renderChartSwapOne()
  },
  methods: {
    renderChartSwapOne() {
      /**
       * by fengzhang
       * https://blog.csdn.net/fengfeng_zhan?spm=1000.2115.3001.5343
       */

      const width = document.getElementById('container').scrollWidth;;
      const height = 500;

      /** ====== data preparation ======= */

      const baseData = {
        nodes: [
          { id: "intention0", time: "2022/03/25", title: "￥5 00", label: '预付款', index: '0' },
          { id: "intention1", time: "2022/03/20", title: "￥1,000", label: '首付款', index: '1' },
          { id: "intention2", time: "2022/03/22", title: "￥2,000", label: '前期款', index: '2' },
          { id: "intention3", time: "2022/03/23", title: "￥3,000", label: '中期款', index: '3' },
          { id: "intention4", time: "2022/03/24", title: "￥4,000", label: '后期款', index: '4' },
          { id: "intention5", time: "2022/03/25", title: "￥5,000", label: '尾款', index: '5' },
          // { id: "intention6", time: "2022/03/26", title: "￥5,000", label: '尾款', index:'5'},
          // { id: "intention7", time: "2022/03/27", title: "￥5,000", label: '尾款', index:'5'},
          // { id: "intention8", time: "2022/03/28", title: "￥5,000", label: '尾款', index:'5'},
        ],
      };
      baseData.nodes.forEach(node => {
        node.type = 'customNode';
      });
      let lastId = baseData.nodes[baseData.nodes.length - 1].id
      let nodesLenth = baseData.nodes.length
      let r = width / nodesLenth / 2 - 10
      r = r > 50 ? 50 : r;
      let lineLen = (width - 2 * r * nodesLenth) / nodesLenth
      // 均匀分布
      const gridLayout = new G6.Layout['grid']({
        rows: 1,
        width,
        sortBy: 'id'
      });
      gridLayout.init(baseData);
      gridLayout.execute()
      const graphData = {
        nodes: baseData.nodes,
        edges: baseData.edges
      }

      /** ====== custom a node type ======= */
      G6.registerNode('customNode',
        {
          draw(cfg, group) {
            group.shapeMap = {};
            const rect = group.addShape('circle', {
              attrs: {
                x: 0,
                y: 180,
                r: r,
                lineWidth: 1,
                fillOpacity: 1,
                radius: 12,
                stroke: 'rgba(0,0,0,0.2)',
                lineWidth: 1,
                fill: '#fff',
              },
              name: 'rect-intention',
            });
            if (cfg.id !== lastId) {

              group.addShape('path', {
                attrs: {
                  stroke: '#e57c40',
                  path: [
                    ['M', r, 180],
                    ['L', r + lineLen, 180],
                    ['L', r + lineLen, 182],
                    ['L', r, 182],
                    ['Z'], // 封闭
                  ],
                },
                // must be assigned in G6 3.3 and later versions. it can be any value you want
                name: 'path-shape',
              });
            }
            //
            // label
            group.addShape('text', {
              attrs: {
                x: 0,
                y: 190,
                text: cfg.label,
                fontSize: 18,
                fill: 'rgb(29, 65, 149)',
                fontWeight: 'bold',
                textAlign: 'center'
              },
              name: 'rect-title',
            });
            // title
            group.addShape('text', {
              attrs: {
                x: 0,
                y: -10,
                text: cfg.title,
                fontSize: 18,
                fill: 'rgb(29, 65, 149)',
                fontWeight: 'bold',
                textAlign: 'center'
              },
              name: 'rect-title',
            });
            // time
            group.addShape('text', {
              attrs: {
                x: 0,
                y: 20,
                text: cfg.time,
                fontSize: 14,
                fill: '#666',
                textAlign: 'center'
              },
              name: 'rect-time',
            });

            // 多边形
            const expandShape = group.addShape('polygon', {
              attrs: {
                points: [
                  [30, 30],
                  [-30, 30],
                  [0, 200],
                  [0, 200],
                ],
                fill: 'l(90) 0:rgba(255,97,7,0.18)  1:rgba(255,97,7,0)',
                opacity: 0.5
              },
              visible: true,
              name: 'polygon-shape',
            });
            if (cfg.expandRange) {
              group.shapeMap['rectBtn-text'] = expandShape;
            }
            expandShape.toBack();
            group.shapeMap['polygon-shape'] = expandShape;

            return rect;
          },

        },
        'single-node'
      );
      /** ====== init the graph ======= */
      const graph = new G6.Graph({
        container: 'container',
        width,
        height,
        modes: {
          default: ['drag-canvas']
        },
        defaultNode: {
          type: 'circle',
          style: {
            r: 30,
            fill: '#fff',
            stroke: '#ccc',
            lineWidth: 1,
          },
        },
        defaultEdge: {
          style: {
            color: "#fff",
            stroke: "#FF6107",
            lineWidth: 12,
            opacity: 0.6
          }
        }
      });
      graph.read(graphData);
      if (typeof window !== 'undefined')
        window.onresize = () => {
          if (!graph || graph.get('destroyed')) return;
          if (!container || !container.scrollWidth || !container.scrollHeight) return;
          graph.changeSize(container.scrollWidth, container.scrollHeight);
        };
    }
  },

  beforeDestroy() { },
};
</script>

 改写法为vue2.0版本，其中template中的挂在元素为div id=‘container’ ，该组件可以随数据缩放