122Echarts - 关系图（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 > 10
						}
					};
					node.category = node.attributes.modularity_class;
				});
				option = {
					title: {
						text: 'Les Miserables',
						subtext: 'Circular layout',
						top: 'bottom',
						left: 'right'
					},
					tooltip: {},
					legend: [{
						// selectedMode: 'single',
						data: categories.map(function(a) {
							return a.name;
						})
					}],
					animationDurationUpdate: 1500,
					animationEasingUpdate: 'quinticInOut',
					series: [{
						name: 'Les Miserables',
						type: 'graph',
						layout: 'circular',
						circular: {
							rotateLabel: true
						},
						data: graph.nodes,
						links: graph.links,
						categories: categories,
						roam: true,
						label: {
							normal: {
								position: 'right',
								formatter: '{b}'
							}
						},
						lineStyle: {
							normal: {
								color: 'source',
								curveness: 0.3
							}
						}
					}]
				};

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

			//myChart.setOption(option);
		
	

les-miserables.gexf

  
    Gephi 0.8.1