-
-
姜糖 初学数据Lv2
发表于2022-9-26 09:42
悬赏1
已解决
楼主
var data = [{
name: 'node01',
des: 'nodedes01',
symbolSize: 70,
category: 0,
}, {
name: 'node02',
des: 'nodedes02',
symbolSize: 50,
category: 1,
}, {
name: 'node03',
des: 'nodedes3',
symbolSize: 50,
category: 1,
}, {
name: 'node04',
des: 'nodedes04',
symbolSize: 50,
category: 1,
}, {
name: 'node99',
des: 'nodedes99',
symbolSize: 50,
category: 1,
}, {
name: 'node05',
des: 'nodedes05',
symbolSize: 50,
category: 1,
}];
var links = [{
source: 'node01',
target: 'node02',
name: 'link01',
des: 'link01des'
}, {
source: 'node01',
target: 'node03',
name: 'link02',
des: 'link02des'
}, {
source: 'node01',
target: 'node04',
name: 'link03',
des: 'link03des'
}, {
source: 'node04',
target: 'node99',
name: 'link99',
des: 'link99des'
}, {
source: 'node01',
target: 'node05',
name: 'link04',
des: 'link05des'
}];
var categories = [];
for (var i = 0; i < 2; i++) {
categories = {
name: '类目' + i
};
}
var pieChart = echarts.init(document.getElementById("HHH3"));
var pieoption = {
title : {
text: '某用户画像分析',
},
tooltip : {
formatter: function (x) {
return x.data.des;
}
},
legend: [{
// selectedMode: 'single',
data: categories.map(function (a) {
return a.name;
})
}],
series : [
{
type:'graph',
layout: 'force', //图的布局,类型为力导图
symbolSize: 40, // 调整节点的大小
roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [2, 10],
edgeLabel: {
normal: {
textStyle: {
fontSize: 20
}
}
},
force: {
//力引导图基本配置
layoutAnimation:true,
// xAxisIndex : 0, //x轴坐标 有多种坐标系轴坐标选项
// yAxisIndex : 0, //y轴坐标
gravity:0.02, //节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
edgeLength: 30, //边的两个节点之间的距离,这个距离也会受 repulsion。[10, 50] 。值越小则长度越长
repulsion: 2500 //节点之间的斥力因子。支持数组表达斥力范围,值越大斥力越大。
// repulsion: 3000, //节点之间的斥力因子。支持数组表达斥力范围,值越大斥力越大。
// edgeLength: 80 //边的两个节点之间的距离,这个距离也会受 repulsion。[10, 50] 。值越小则长度越长
},
draggable: true,
lineStyle: {
normal: {
width: 2,
color: '#4b565b',
}
},
label: {
normal: {
show: true,
textStyle: {}
}
},
edgeLabel: {
normal: {
show: true,
formatter: function (x) {
return x.data.name;
}
}
},
data:data,
links:links,
categories: categories
}
]
};
pieChart.setOption(pieoption);
// $(window).resize(pieChart.resize);
);
name: 'node01',
des: 'nodedes01',
symbolSize: 70,
category: 0,
}, {
name: 'node02',
des: 'nodedes02',
symbolSize: 50,
category: 1,
}, {
name: 'node03',
des: 'nodedes3',
symbolSize: 50,
category: 1,
}, {
name: 'node04',
des: 'nodedes04',
symbolSize: 50,
category: 1,
}, {
name: 'node99',
des: 'nodedes99',
symbolSize: 50,
category: 1,
}, {
name: 'node05',
des: 'nodedes05',
symbolSize: 50,
category: 1,
}];
var links = [{
source: 'node01',
target: 'node02',
name: 'link01',
des: 'link01des'
}, {
source: 'node01',
target: 'node03',
name: 'link02',
des: 'link02des'
}, {
source: 'node01',
target: 'node04',
name: 'link03',
des: 'link03des'
}, {
source: 'node04',
target: 'node99',
name: 'link99',
des: 'link99des'
}, {
source: 'node01',
target: 'node05',
name: 'link04',
des: 'link05des'
}];
var categories = [];
for (var i = 0; i < 2; i++) {
categories = {
name: '类目' + i
};
}
var pieChart = echarts.init(document.getElementById("HHH3"));
var pieoption = {
title : {
text: '某用户画像分析',
},
tooltip : {
formatter: function (x) {
return x.data.des;
}
},
legend: [{
// selectedMode: 'single',
data: categories.map(function (a) {
return a.name;
})
}],
series : [
{
type:'graph',
layout: 'force', //图的布局,类型为力导图
symbolSize: 40, // 调整节点的大小
roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [2, 10],
edgeLabel: {
normal: {
textStyle: {
fontSize: 20
}
}
},
force: {
//力引导图基本配置
layoutAnimation:true,
// xAxisIndex : 0, //x轴坐标 有多种坐标系轴坐标选项
// yAxisIndex : 0, //y轴坐标
gravity:0.02, //节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
edgeLength: 30, //边的两个节点之间的距离,这个距离也会受 repulsion。[10, 50] 。值越小则长度越长
repulsion: 2500 //节点之间的斥力因子。支持数组表达斥力范围,值越大斥力越大。
// repulsion: 3000, //节点之间的斥力因子。支持数组表达斥力范围,值越大斥力越大。
// edgeLength: 80 //边的两个节点之间的距离,这个距离也会受 repulsion。[10, 50] 。值越小则长度越长
},
draggable: true,
lineStyle: {
normal: {
width: 2,
color: '#4b565b',
}
},
label: {
normal: {
show: true,
textStyle: {}
}
},
edgeLabel: {
normal: {
show: true,
formatter: function (x) {
return x.data.name;
}
}
},
data:data,
links:links,
categories: categories
}
]
};
pieChart.setOption(pieoption);
// $(window).resize(pieChart.resize);
);
最佳答案