配置项如下
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]'
}],
}
]
};