echarts 复杂关系图代码实例，

最新推荐文章于 2022-05-05 18:10:47 发布

万钧大圣

最新推荐文章于 2022-05-05 18:10:47 发布

阅读量871

点赞数 1

分类专栏： java javaScript 文章标签： js java javascript html 前端

本文链接：https://blog.csdn.net/qq_36862125/article/details/108982164

版权

java 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

javaScript

2 篇文章 0 订阅

订阅专栏

直接上代码因为echarts 官网中的Json数据太大了，所以我自己建了一个新的json 方便梳理之间的关系。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>ECharts</title>
		<!-- 引入 echarts.js -->
		<script src="js/echarts.min.js"></script>
		<script src="js/jquery.min.js"></script>
		<script src="js/dataTool.min.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;
			myChart.showLoading();
			$.getJSON('data/new.json', function(json) {
				myChart.hideLoading();
				myChart.setOption(option = {
					title: {
						text: 'NPM Dependencies'
					},
					animationDurationUpdate: 1500,
					animationEasingUpdate: 'quinticInOut',
					series: [{
						type: 'graph',
						layout: 'none',
						// progressiveThreshold: 700,
						data: json.nodes.map(function(node) {
							return {
								x: node.x,
								y: node.y,
								id: node.id,
								name: node.label,
								symbolSize: node.size,
								itemStyle: {
									normal: {
										color: node.color
									}
								}
							};
						}),
						edges: json.edges.map(function(edge) {
							return {
								source: edge.sourceID,
								target: edge.targetID
							};
						}),
						label: {
							emphasis: {
								position: 'right',
								show: true
							}
						},
						roam: true,
						focusNodeAdjacency: true,
						lineStyle: {
							normal: {
								width: 0.5,
								curveness: 0.3,
								opacity: 0.7
							}
						}
					}]
				}, true);
			});
			//myChart.setOption(option);
		</script>
	</body>

</html>

下面是json 数据代码

{
	"nodes": [{
			"color": "#4f19c7",
			"label": "中国",
			"attributes": {},
			"y": -404.26147,
			"x": -739.36383,
			"id": "jquery",
			"size": 114.7252817
		}, {
			"color": "#4f19c7",
			"label": "美国",
			"attributes": {},
			"y": -263.90924,
			"x": -799.74493,
			"id": "jsdom",
			"size": 9.56357
		}, {
			"color": "#4f19c7",
			"label": "日本",
			"attributes": {},
			"y": -38.15134,
			"x": -831.295,
			"id": "xmlhttprequest",
			"size": 1.8040513
		},
		{
			"color": "#34c719",
			"label": "韩国",
			"attributes": {},
			"y": 32.03244,
			"x": -571.7144,
			"id": "htmlparser",
			"size": 1.3780384
		},
		{
			"color": "#4f19c7",
			"label": "朝鲜",
			"attributes": {},
			"y": -187.65944,
			"x": -967.41296,
			"id": "contextify",
			"size": 3.4651538
		}
	],
	"edges": [{
		"sourceID": "jquery",
		"attributes": {},
		"targetID": "jsdom",
		"size": 100
	}, {
		"sourceID": "jquery",
		"attributes": {},
		"targetID": "xmlhttprequest",
		"size": 1
	}, {
		"sourceID": "jquery",
		"attributes": {},
		"targetID": "htmlparser",
		"size": 1
	}, {
		"sourceID": "jquery",
		"attributes": {},
		"targetID": "contextify",
		"size": 1
	},{
		"sourceID": "jsdom",
		"attributes": {},
		"targetID": "jquery",
		"size": 1
	}]
}

使用谷歌浏览器会报错跨域问题，博主目前尚未解决，但是用火狐浏览器是可以完美解决的，火狐浏览器解决跨域问题直接参考https://blog.csdn.net/tjj3027/article/details/81354350

附上本人做的小demo，直接可以用的，有兴趣的可以去下载一下看一看，如果有能顺利解决谷歌浏览器跨域的可以在下方留言讨论。。 demo地址 https://download.csdn.net/download/qq_36862125/12916071

万钧大圣

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
echarts 复杂关系图代码实例，

直接上代码因为echarts 官网中的Json数据太大了，所以我自己建了一个新的json 方便梳理之间的关系。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>ECharts</title>  <script src="js/echarts.min.js"></s..
复制链接

扫一扫

专栏目录