Echarts在线免费图表

 
            var paraterItemStyle = {
    normal: {
        color: '#1b9e77'
    }
};

var opItemStyle = {
    normal: {
        color: '#d95f02'
    }
};

option = {
    title: {
        text: 'Dataflow 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
                    }
                }
            },
            lineStyle: {
                normal: {
                    opacity: 0.9,
                    width: 2,
                    curveness: 0
                }
            },
            
            data: [{
                name: 'X\ndatatype=float\nshape=[1,2,3]',
                x: 12.5,
                y: 10,
                symbol: 'roundRect',
                symbolSize: 60,
                itemStyle: paraterItemStyle
            }, {
                name: 'W1\ndatatype=float\nshape=[1]',
                x: 87.5,
                y: 10,
                symbol: 'roundRect',
                itemStyle: paraterItemStyle
                
            }, {
                name: 'B1\ndatatype=float\nshape=[1]',
                x: 162.5,
                y: 10,
                symbol: 'roundRect',
                itemStyle: paraterItemStyle
            }, {
                name: 'W2\ndatatype=float\nshape=[1]',
                x: 125,
                y: 150,
                symbol: 'roundRect',
                itemStyle: paraterItemStyle
            }, {
                name: 'B2\ndatatype=float\nshape=[1]',
                x: 200,
                y: 150,
                symbol: 'roundRect',
                itemStyle: paraterItemStyle
            }, {
                name: '1\nFC',
                x: 50,
                y: 80,
                itemStyle: {
                    normal: {
                        color: '#e6550d'
                    }
                }
            }, {
                name:'2\nRelu',
                x: 50 ,
                y: 150,
                itemStyle: opItemStyle
            }, {
                name: '3\nFC',
                x: 162.5,
                y: 220
            }, {
                name: 'Y\ndatetype=float\nshape=[1]',
                x: 162.5,
                y: 290,
                symbol: 'roundRect',
                itemStyle: paraterItemStyle
            }],
            links: [{
                source: 'X\ndatatype=float\nshape=[1,2,3]',
                target: '1\nFC',
                symbolSize: [5, 20],
                // label: {
                //     normal: {
                //         show: true
                //     }
                // },
                lineStyle: {
                    normal: {
                        width: 5,
                        curveness: 0.2
                    }
                }
            }, {
                source: 'W1\ndatatype=float\nshape=[1]',
                target: '1\nFC',
                // label: {
                //     normal: {
                //         show: true
                //     }
                // },
                lineStyle: {
                    normal: { curveness: 0.2 }
                }
            }, {
                source: 'B1\ndatatype=float\nshape=[1]',
                target: '1\nFC'
            }, {
                source: '1\nFC',
                target: '2\nRelu'
            }, {
                source: '2\nRelu',
                target: '3\nFC'
            }, {
                source: 'W2\ndatatype=float\nshape=[1]',
                target: '3\nFC'
            }, {
                source: 'B2\ndatatype=float\nshape=[1]',
                target: '3\nFC'
            }, {
                source:'3\nFC',
                target:'Y\ndatetype=float\nshape=[1]'
            }],
            
        }
    ]
};