从图里可以看出,edge 的长度计算(具体说是 edge 起始位置跟终点位置的计算)好像只对 圆形的 symbol 有效。对 'rect' 或者'roundRect' 都有一些遮盖。
配置项如下
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,
y: 300,
symbolSize: 100,
symbolOffset: ["-20%",0],
//相对于原本位置的偏移。默认情况下,会居中置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。
//这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
//可是 如果 这个节点 左边也有箭头指过来,怎么办???你把这个symbol 向左偏移左边的就遮住了。。
symbol: 'rect'
}, {
name: '节点2',
x: 800,
y: 300,
symbol: 'roundRect',
symbolOffset: ["20%",0],
//相对于原本位置的偏移。默认情况下,会居中置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。
//这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
symbolSize: [100, 80],
}, {
name: '节点3',
x: 550,
y: 100,
symbolSize: 50,
symbolOffset: [0,"-23%"],
//相对于原本位置的偏移。默认情况下,会居中置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。
//这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
symbol: 'rect'
}, {
name: '节点4',
x: 550,
y: 500,
symbolSize: 150,
symbolOffset: [0,"20%"],
//相对于原本位置的偏移。默认情况下,会居中置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。
//这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
symbol: 'rect',
}],
// links: [],
links: [{
source: 0,
target: 1,
symbolSize: [5, 20],
label: {
normal: {
show: true
}
},
lineStyle: {
normal: {
width: 5,
curveness: 0.2
}
}
}, {
source: '节点2',
target: '节点1',
label: {
normal: {
show: true
}
},
lineStyle: {
normal: { curveness: 0.2 }
}
}, {
source: '节点1',
target: '节点3'
}, {
source: '节点2',
target: '节点3'
}, {
source: '节点2',
target: '节点4'
}, {
source: '节点1',
target: '节点4'
}],
lineStyle: {
normal: {
opacity: 0.9,
width: 2,
curveness: 0
}
}
}
]
};