125Echarts - 关系图（Force Layout）

效果图

源代码

	
		
		ECharts
		
		
		
		
	

	
		
		

		
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));
			var option;

			function createNodes(count) {
				var nodes = [];
				for(var i = 0; i < count; i++) {
					nodes.push({
						id: i
					});
				}
				return nodes;
			}

			function createEdges(count) {
				var edges = [];
				if(count === 2) {
					return [
						[0, 1]
					];
				}
				for(var i = 0; i < count; i++) {
					edges.push([i, (i + 1) % count]);
				}
				return edges;
			}

			var datas = [];
			for(var i = 0; i < 16; i++) {
				datas.push({
					nodes: createNodes(i + 2),
					edges: createEdges(i + 2)
				});
			}

			option = {
				series: datas.map(function(item, idx) {
					return {
						type: 'graph',
						layout: 'force',
						animation: false,
						data: item.nodes,
						left: (idx % 4) * 25 + '%',
						top: Math.floor(idx / 4) * 25 + '%',
						width: '25%',
						height: '25%',
						force: {
							// initLayout: 'circular'
							// gravity: 0
							repulsion: 60,
							edgeLength: 2
						},
						edges: item.edges.map(function(e) {
							return {
								source: e[0],
								target: e[1]
							};
						})
					};
				})
			};

			myChart.setOption(option);