g6-flow-chart v0.1.0

flow-chart

节点：

• 支持圆形、矩形、图片类型的节点；
• 节点支持文字下方显示和文字右方显示；
• 圆形、矩形类型的节点支持自定义尺寸、颜色、边框色、边框粗细；

线：

• 图片类型的节点支持自定义尺寸；
• 支持实线、虚线类型的连接线;
• 线支持自定义颜色、粗细；
• 线支持箭头单向、双向显示，或者不显示箭头。

暂不支持节点的拖动，正在开发中...

<FlowChart
    :showGrid="false"
    :showTooltip="false"
    direction="LR"
    :styleConfig="style"
    :data="chartData"
    @node:click="nodeClick"
    @edge:click="edgeClick"
/>

基本的数据结构

{
  nodes: [
    {
      id: "节点id",
      type: "rect"
      label: "文字"
    },
    {
      id: "节点id",
      type: "circle"
      label: {
        text: "节点文字",
        fontSize: 12,
        fill: "#595959",
        location: "bottom"
      }
    }
  ],
    edges: [
      {
        id: "线id",
        type: "dashed",
        source: "源节点的id",
        target: "目标节点的id",
        label: {
            text: "线的文字",
            fontSize: 12,
            fill: "#ff0000"
        }
      }
    ]
}

矩形节点

{
    type: "rect",
    width: 100,
    height: 100,
    stroke: "#006DD5",
    fill: "#23B0FB",
    lineWidth: 2
}

圆形节点

{
    type: "circle",
    size: 30,
    stroke: "#006DD5",
    fill: "#23B0FB",
    lineWidth: 2
}

图片节点

{
    type: 'image',
    image: 'url',
    width: 200,
    height: 200
}

节点的文字

{
    text: "节点文字",
    fontSize: 12,
    fill: "#595959",
    location: "bottom" // "right"
}

自定义线的样式

{
    type: "dashed", //solid
    stroke: "blue",
    lineWidth: 2,
    endArrow: true,
    startArrow: true,
    label: {
        text: "线的文字",
        fontSize: 12,
        fill: "#ff0000"
    }
}