13518219792
今天就跟大家聊聊有关Echarts中怎么实现一个力导向图，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
创新互联是一家专注于网站制作、网站建设与策划设计,高密网站建设哪家好?创新互联做网站,专注于网站建设十年,网设计领域的专业建站公司;建站业务涵盖:高密等地区。高密做网站价格咨询:18982081108
html页面：
js代码：
$(function () {
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[i] = {
name: '类目' + i
};
}
var pieChart = echarts.init(document.getElementById("echarts-pie-chart"));
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);
});最终展示效果如图：
看完上述内容，你们对Echarts中怎么实现一个力导向图有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。
