data: [
{
name: 'Node 1',
x: 300,
y: 300
},
{
name: 'Node 2',
x: 800,
y: 300
},
{
name: 'Node 3',
x: 550,
y: 100
},
{
name: 'Node 4',
x: 550,
y: 500
}
],
// links: [],
links: [
{
source: 0,
target: 1,
symbolSize: [5, 20],
label: {
show: true
},
lineStyle: {
width: 5,
curveness: 0.2
}
},
{
source: 'Node 2',
target: 'Node 1',
label: {
show: true
},
lineStyle: {
curveness: 0.2
}
},
{
source: 'Node 1',
target: 'Node 3'
},
{
source: 'Node 2',
target: 'Node 3'
},
{
source: 'Node 2',
target: 'Node 4'
},
{
source: 'Node 1',
target: 'Node 4'
}
],
难点在于如何让x/y轴根据一定规律根据数据动态生成,节点数据是无限的,又要兼顾页面的样式布局怎么办?
let data = [
{
name: 'Node 1',
// x: 100,
// y: 300
},
{
name: 'Node 2',
// x: 200,
// y: 300
},
{
name: 'Node 3',
// x: 300,
// y: 300
},
{
name: 'Node 4',
// x: 400,
// y: 300
},
{
name: 'Node 5',
// x: 400,
// y: 350
},
{
name: 'Node 6',
// x: 300,
// y: 350
},
{
name: 'Node 7',
// x: 200,
// y: 350
},
{
name: 'Node 8',
// x: 100,
// y: 350
},
{
name: 'Node 9',
// x: 100,
// y: 400
},
{
name: 'Node 10',
// x: 200,
// y: 400
},
{
name: 'Node 11',
// x: 300,
// y: 400
},
{
name: 'Node 12',
// x: 400,
// y: 400
}
]
data.forEach((ele,index) =>{
if (index<1){
ele.x = 100;
ele.y = 300;
}
let indexNum = index + 1;
const s = parseInt(indexNum / 4);
const l = indexNum % 4;
// 商数是偶数
if(s%2==0) {
let XArr = [100,200,300,400];
if (l<1) {
ele.x = XArr[0];
} else {
ele.x = XArr[l-1]
}
} else {
let XArr = [400,300,200,100];
// 商数是基数
if (l<1) {
ele.x = XArr[0]
} else {
ele.x = XArr[l-1]
}
}
if (l==0){
ele.y = 300+50*(s-1)
} else {
ele.y = 300+50*s
}
})
this.data = data;