效果图

124Echarts - 关系图（Graph Dynamic）_Echarts

源代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>ECharts</title>
		<!-- 引入 echarts.js -->
		<script src="js/echarts.min.js"></script>
		<script src="js/jquery-1.11.0.min.js"></script>
		<script src="dist/extension/dataTool.js"></script>
	</head>

	<body>
		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		<div id="main" style="width: 600px;height:400px;"></div>
		<script type="text/javascript">
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));
			var option;

			var data = [{
				fixed: true,
				x: myChart.getWidth() / 2,
				y: myChart.getHeight() / 2,
				symbolSize: 20,
				id: '-1'
			}];

			var edges = [];

			option = {
				series: [{
					type: 'graph',
					layout: 'force',
					animation: false,
					data: data,
					force: {
						// initLayout: 'circular'
						// gravity: 0
						repulsion: 100,
						edgeLength: 5
					},
					edges: edges
				}]
			};

			setInterval(function() {
				data.push({
					id: data.length
				});
				var source = Math.round((data.length - 1) * Math.random());
				var target = Math.round((data.length - 1) * Math.random());
				if(source !== target) {
					edges.push({
						source: source,
						target: target
					});
				}
				myChart.setOption({
					series: [{
						roam: true,
						data: data,
						edges: edges
					}]
				});

				// console.log('nodes: ' + data.length);
				// console.log('links: ' + data.length);
			}, 500);

			myChart.setOption(option);
		</script>
	</body>

</html>