html頁面: <div class="echarts" style="height:800px" id="echarts-pie-chart"></div>
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);
});
最終展示效果如圖: