123Echarts - 关系图（Force Layout）

效果图

源代码

	
		
		ECharts
		
		
		
		
	

	
		
		

		
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));
			var option;
			myChart.showLoading();
			$.get('data/les-miserables.gexf', function(xml) {
				myChart.hideLoading();

				var graph = echarts.dataTool.gexf.parse(xml);
				var categories = [];
				for(var i = 0; i < 9; i++) {
					categories[i] = {
						name: '类目' + i
					};
				}
				graph.nodes.forEach(function(node) {
					node.itemStyle = null;
					node.symbolSize = 10;
					node.value = node.symbolSize;
					node.category = node.attributes.modularity_class;
					// Use random x, y
					node.x = node.y = null;
					node.draggable = true;
				});
				option = {
					title: {
						text: 'Les Miserables',
						subtext: 'Default layout',
						top: 'bottom',
						left: 'right'
					},
					tooltip: {},
					legend: [{
						// selectedMode: 'single',
						data: categories.map(function(a) {
							return a.name;
						})
					}],
					animation: false,
					series: [{
						name: 'Les Miserables',
						type: 'graph',
						layout: 'force',
						data: graph.nodes,
						links: graph.links,
						categories: categories,
						roam: true,
						label: {
							normal: {
								position: 'right'
							}
						},
						force: {
							repulsion: 100
						}
					}]
				};
				myChart.setOption(option);
			}, 'xml');

			//myChart.setOption(option);
		
	

les-miserables.gexf

  
    Gephi 0.8.1