直接上代码 因为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