Echarts在线免费图表

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

var paraSymbolSize = [90, 50];
var paraSynbol = 'rect';
var opSymbolSize = [80, 50];


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,
                    color: 'black'
                }
            },
            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: 100,
                y: 10,
                symbol: 'roundRect',
                symbolSize: paraSymbolSize,
                itemStyle: paraterItemStyle
            }, {
                name: 'W1\ndatatype=float\nshape=[1]',
                x: 0,
                y: 80,
                symbol: 'roundRect',
                itemStyle: paraterItemStyle,
                symbolSize: paraSymbolSize
                
            }, {
                name: 'B1\ndatatype=float\nshape=[1]',
                x: 200,
                y: 80,
                symbol: 'roundRect',
                itemStyle: paraterItemStyle,
                symbolSize: paraSymbolSize
            }, {
                name: 'W2\ndatatype=float\nshape=[1]',
                x: 0,
                y: 220,
                symbol: 'roundRect',
                itemStyle: paraterItemStyle,
                symbolSize: paraSymbolSize
            }, {
                name: 'B2\ndatatype=float\nshape=[1]',
                x: 200,
                y: 220,
                symbol: 'roundRect',
                itemStyle: paraterItemStyle,
                symbolSize: paraSymbolSize
            }, {
                name: '1\nFC',
                x: 100,
                y: 80,
                itemStyle: opItemStyle,
                symbolSize: opSymbolSize
            }, {
                name:'2\nRelu',
                x: 100 ,
                y: 150,
                itemStyle: opItemStyle,
                symbolSize: opSymbolSize
            }, {
                name: '3\nFC',
                x: 100,
                y: 220,
                itemStyle: opItemStyle,
                symbolSize: opSymbolSize
            }, {
                name: 'Y\ndatetype=float\nshape=[1]',
                x: 100,
                y: 290,
                symbol: 'roundRect',
                itemStyle: paraterItemStyle,
                symbolSize: paraSymbolSize
            }],
            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]'
            }],
            
        }
    ]
};