option = {
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
series: [
{
type: 'graph',//关系图
symbolSize: 1,
roam: true,
draggable: true, //单节点可以托运
label: {
show: true,
backgroundColor: '#eee',
//以下是设置富文本标签的样式
borderColor: '#777',
borderWidth: 1,
borderRadius: 4,
rich: {
title: {
color: '#eee',
align: 'center'
},
abg: {
backgroundColor: '#333',
width: '100%',
align: 'right',
height: 25,
borderRadius: [4, 4, 0, 0]
},
name: {
height: 15,
align: 'center',
color: '#777'
},
columns: {
height: 15,
align: 'center',
color: '#777'
},
hr: {
borderColor: '#777',
width: '100%',
borderWidth: 0.5,
height: 0
},
value: {
align: 'center',
color: '#777'
}
}
},
//以上是设置富文本标签的样式
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [4, 10],
edgeLabel: {
fontSize: 20
},
data: [//数据
{
name: '表1',
x: 300,
y: 300,
label: {//富文件标签的关键 name和value要对应样式中的名字才会有样式
//可以增加多列内容 加新的列就可以,记得增加对应的样式。
formatter: [
'{title|{b}}{abg|}',
'{hr|}',
' {name|202}{value|55.3%}',
' {name|142}{value|38.9%}',
' {name|21}{value|5.8%}'
].join('\n')
}
},
{
name: '表2',
label: {
formatter: [
'{title|{b}}{abg|}',
'{hr|}',
' {name|202}{value|55.3%}',
' {name|142}{value|38.9%}',
' {name|21}{value|5.8%}'
].join('\n')
},
x: 800,
y: 300
},
{
name: '表3',
label: {
formatter: [
'{title|{b}}{abg|}',
'{hr|}',
'<a> {name|202}{value|55.3%}</a>',
' {name|142}{value|38.9%}',
' {name|21}{value|5.8%}'
].join('\n')
},
x: 900,
y: 400
}
],
links: [//关联关系
{
source: '表1',
target: '表2',
label: {
normal: {
show: true,
formatter: '关联字段'
}
}
},
{
source: '表1',
target: '表3',
label: {
normal: {
show: true,
formatter: '外键关系'
}
}
}
],
lineStyle: {
opacity: 0.9,
width: 1,
curveness: 0//线是否弯曲
}
}
]
};
若要从后端接数据,则需要认真拼接数据
只需要关注以下代码的拼接方式。(仅有label标签的代码)
StringBuffer formatter = new StringBuffer();
formatter.append(" {title|"+dto.getTitle()+"("+dto.getBid()+")"+"}{abg|}\n{hr|}\n");
for (DataSubjectModelDefDto defDto: listModel){
formatter.append("{name|"+defDto.getTitle()+"|}{columns|"+defDto.getFieldType()+"|}{value|"+defDto.getBid()+"}\n");
}
map.put("name",dto.getTitle()+"("+dto.getBid()+")");
formatterMap.put("formatter",formatter);
map.put("label",formatterMap);