g6 node 进度条

以下是使用AntV-G6实现node进度条的示例代码：

// 定义节点
const node = {
  id: 'node1',
  x: 100,
  y: 100,
  label: 'node1',
  status: 0, // 进度条状态，0表示未开始，1表示进行中，2表示已完成
  progress: 0, // 进度条进度，取值范围为0~100
};

// 渲染节点
graph.node({
  id: node.id,
  x: node.x,
  y: node.y,
  label: node.label,
  shape: 'node-progress-bar',
  status: node.status,
  progress: node.progress,
});

// 定义节点进度条的自定义形状
G6.registerNode('node-progress-bar', {
  draw(cfg, group) {
    const width = 100;
    const height = 20;
    const r = 10;
    const progressWidth = cfg.progress / 100 * width;

    // 绘制背景
    group.addShape('rect', {
      attrs: {
        x: -width / 2,
        y: -height / 2,
        width,
        height,
        fill: '#f0f0f0',
        radius: r,
      },
    });

    // 绘制进度条
    group.addShape('rect', {
      attrs: {
        x: -width / 2,
        y: -height / 2,
        width: progressWidth,
        height,
        fill: '#1890ff',
        radius: r,
      },
    });

    // 绘制进度文本
    group.addShape('text', {
      attrs: {
        x: 0,
        y: 0,
        textAlign: 'center',
        textBaseline: 'middle',
        text: `${cfg.progress}%`,
        fill: '#fff',
        fontSize: 12,
      },
    });
  },
});

以上代码中，我们首先定义了一个节点对象，其中包含了节点的id、坐标、标签、进度条状态和进度条进度。然后，我们使用AntV-G6的node方法渲染节点，并指定节点的形状为自定义的node-progress-bar。接着，我们使用G6.registerNode方法注册了一个名为node-progress-bar的自定义形状，并在其中绘制了进度条的背景、进度条和进度文本。