Echarts中怎么實(shí)現(xiàn)一個(gè)力導(dǎo)向圖

今天就跟大家聊聊有關(guān)Echarts中怎么實(shí)現(xiàn)一個(gè)力導(dǎo)向圖，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

html頁(yè)面： <div class="echarts"   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', //圖的布局，類型為力導(dǎo)圖
				           	symbolSize: 40, // 調(diào)整節(jié)點(diǎn)的大小
				            roam: true, // 是否開啟鼠標(biāo)縮放和平移漫游。默認(rèn)不開啟。如果只想要開啟縮放或者平移,可以設(shè)置成 'scale' 或者 'move'。設(shè)置成 true 為都開啟
				            edgeSymbol: ['circle', 'arrow'],
				            edgeSymbolSize: [2, 10],
				            edgeLabel: {
				                normal: {
				                    textStyle: {
				                        fontSize: 20
				                    }
				                }
				            },
			
			            	force: {
				                //力引導(dǎo)圖基本配置
			                 	layoutAnimation:true,
			                    // xAxisIndex : 0, //x軸坐標(biāo) 有多種坐標(biāo)系軸坐標(biāo)選項(xiàng)
			                    // yAxisIndex : 0, //y軸坐標(biāo)
			                    gravity:0.02, //節(jié)點(diǎn)受到的向中心的引力因子。該值越大節(jié)點(diǎn)越往中心點(diǎn)靠攏。
			                    edgeLength: 30, //邊的兩個(gè)節(jié)點(diǎn)之間的距離，這個(gè)距離也會(huì)受 repulsion。[10, 50] 。值越小則長(zhǎng)度越長(zhǎng)
			                    repulsion: 2500 //節(jié)點(diǎn)之間的斥力因子。支持?jǐn)?shù)組表達(dá)斥力范圍，值越大斥力越大。
			                    // repulsion: 3000, //節(jié)點(diǎn)之間的斥力因子。支持?jǐn)?shù)組表達(dá)斥力范圍，值越大斥力越大。
			                    // edgeLength: 80 //邊的兩個(gè)節(jié)點(diǎn)之間的距離，這個(gè)距離也會(huì)受 repulsion。[10, 50] 。值越小則長(zhǎng)度越長(zhǎng)
				            },
				            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);
	
	
	    });

最終展示效果如圖：

看完上述內(nèi)容，你們對(duì)Echarts中怎么實(shí)現(xiàn)一個(gè)力導(dǎo)向圖有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。