flow-chart-view v0.2.1

flow-chart-view

基于 G6 封装的流程图展示组件

节点：

• 支持圆形、椭圆形、矩形、图片类型的节点；
• 节点支持自定义文字显示的位置；
• 节点支持自定义样式；

线：

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

<flow-chart-layout
    direction="TB" // 显示方向：LR、RL、TB、BT
    :showTooltip="true"
    :data="layoutData"
    @node:click="nodeClick"
    @edge:click="edgeClick"
></flow-chart-layout>

基本的数据结构

layoutData: {
    nodes: [
        {
            id: "node1",
            shape: "circle",
            label: "圆形节点",
            labelCfg: {
                position: "bottom"
            },
            size: 50,
            style: {
                fill: "#ff0000",
                stroke: "#008800",
                lineWidth: 2
            }
        },
        {
            id: "node2",
            shape: "rect",
            label: "矩形节点",
            labelCfg: {
                position: "bottom"
            },
            size: [50, 100]
        },
        {
            id: "node3",
            shape: "ellipse",
            label: "椭圆形节点",
            labelCfg: {
                position: "bottom"
            },
            size: [60, 30]
        },
        {
            id: "node4",
            shape: "image",
            label: "图片节点",
            img: "https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg"
        }
    ],
    edges: [
        {
            id: "edge1",
            shape: "line",
            source: "node1",
            target: "node2",
            label: "文字",
            labelCfg: {
                style: {
                    fill: "#aacc00",
                    stroke: "#FFFFFF",
                    lineWidth: 10
                }
            },
            style: {
                endArrow: true,
                startArrow: true,
                stroke: "#FF6600",
                lineWidth: 2,
                lineDash: [10, 5]
            }
        },
        {
            id: "edge2",
            shape: "line",
            source: "node2",
            target: "node3",
            style: {
                endArrow: true,
                stroke: "#FF6600",
                lineWidth: 2
            }
        },
        {
            id: "edge3",
            shape: "line",
            source: "node1",
            target: "node3"
        },
        {
            id: "edge4",
            shape: "line",
            source: "node2",
            target: "node4"
        },
        {
            id: "edge5",
            shape: "loop",
            loopCfg: {
                dist: 50
            },
            source: "node2",
            target: "node2",
            label: "文字",
            labelCfg: {
                style: {
                    fill: "#aacc00",
                    stroke: "#FFFFFF",
                    lineWidth: 10
                }
            },
            style: {
                endArrow: true,
                startArrow: false,
                stroke: "#FF6600",
                lineWidth: 2
            }
        }
    ]
}