如何使用echart的Graph图实现一个流程控制图

发表于 2017/07/20

作者 luochao 6 分钟阅读

1.前言

最近接到一个新需求，需要写一个新模块，这个模块主要是用于查看当前每个生产计划的完成情况，然后所有的生产计划都列在了表格里，而流程控制图用于直观展示选中的生产计划的完成进度

2.流程控制图效果展示

3.分析后端数据接口

data属性对应后台返回的数据，是一个数组，数组里面的元素对应流程控制图的每一个节点，id字段表示当前节点的id号，用于关联其他节点，next-process字段是一个数组，用于表示该节点的子节点，process表示当前节点计划完成了多少，pre-process字段在这里不是表示该节点的所有父级节点

4.echart的Graph图及其配置

Graph图的原始配置，我稍微做了更改，就是links属性中的每一个元素代表了节点间的关系，由于生产计划的名称可能存在重名的情况，所以我们改用节点元素在data属性中的索引来建立节点之间的联系

  
option = {
    title: {
        text: 'Graph 简单示例'
    },
    tooltip: {},
    animationDurationUpdate: 1500,
    animationEasingUpdate: 'quinticInOut',
    series : [
        {
            type: 'graph',
            layout: 'none',
            symbolSize: 50,
            roam: true,
            label: {
                normal: {
                    show: true
                }
            },
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
                normal: {
                    textStyle: {
                        fontSize: 20
                    }
                }
            },
            data: [{
                name: '节点1',
                x: 300, //节点在图上的x坐标
                y: 300 //节点在图上的y坐标
            }, {
                name: '节点2',
                x: 800,
                y: 300
            }, {
                name: '节点3',
                x: 550,
                y: 100
            }, {
                name: '节点4',
                x: 550,
                y: 500
            }],
            // links: [],
            links: [{
                source: 0,
                target: 1,
                symbolSize: [5, 20],
                label: {
                    normal: {
                        show: true
                    }
                },
                lineStyle: {
                    normal: {
                        width: 5,
                        curveness: 0.2
                    }
                }
            }, {
                source: 1,
                target: 0,
                label: {
                    normal: {
                        show: true
                    }
                },
                lineStyle: {
                    normal: { curveness: 0.2 }
                }
            }, {
                source: 0,
                target: 2
            }, {
                source: 1,
                target: 2
            }, {
                source: 1,
                target: 3
            }, {
                source: 0,
                target: 3
            }],
            lineStyle: {
                normal: {
                    opacity: 0.9,
                    width: 2,
                    curveness: 0
                }
            }
        }
    ]
};