121Echarts - 关系图（Les Miserables）

效果图

源代码

	
		
		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.value = node.symbolSize;
					node.symbolSize /= 1.5;
					node.label = {
						normal: {
							show: node.symbolSize > 30
						}
					};
					node.category = node.attributes.modularity_class;
				});
				option = {
					title: {
						text: 'Les Miserables',
						subtext: 'Default layout',
						top: 'bottom',
						left: 'right'
					},
					tooltip: {},
					legend: [{
						// selectedMode: 'single',
						data: categories.map(function(a) {
							return a.name;
						})
					}],
					animationDuration: 1500,
					animationEasingUpdate: 'quinticInOut',
					series: [{
						name: 'Les Miserables',
						type: 'graph',
						layout: 'none',
						data: graph.nodes,
						links: graph.links,
						categories: categories,
						roam: true,
						focusNodeAdjacency: true,
						itemStyle: {
							normal: {
								borderColor: '#fff',
								borderWidth: 1,
								shadowBlur: 10,
								shadowColor: 'rgba(0, 0, 0, 0.3)'
							}
						},
						label: {
							position: 'right',
							formatter: '{b}'
						},
						lineStyle: {
							color: 'source',
							curveness: 0.3
						},
						emphasis: {
							lineStyle: {
								width: 10
							}
						}
					}]
				};

				myChart.setOption(option);
			}, 'xml');

			//myChart.setOption(option);
		
	

les-miserables.gexf

  
    Gephi 0.8.1