我们通过echarts框架实现网络设备关系图。
1.首先我们先去官网下载echarts的源码 echarts源码：https://github.com/apache/incubator-echarts/tree/4.6.0/dist（需要fork到自己的github上面才可以下载） 我fork了，你可以用我的去下载：https://github.com/zhonghuazhen/incubator-echarts 同时它官网上提供定制服务，你可以挑选自己想要的功能，然后再下载。https://www.echartsjs.com/zh/builder.html
然后导入到项目中去,引用jquery-3.3.1.min.js和echarts.min.js。
<script src="js/jquery-3.3.1.min.js"></script>
<script src="incubator-echarts-4.6.0/dist/echarts.min.js"></script>然后echarts的社区那里下载一个好看点的样式,样例地址：https://gallery.echartsjs.com/editor.html?c=x08gNxOWCS
在body区定义一个div，并设置好大小，如果不设置大小的话，关系图会不显示。
<div id="OdfMes" style="width: 1800px;height: 800px;float: right"></div>PS:id可以自己随便取，下面会用到这个id
然后我们就开始操作了：
在js的开头设置两个全局数组，分别装数据和连接关系，这样使用追加的时候，我们就可以通过push把数据和连接关系存入到数组中。
···
var datas=[];
var linkmes=[];//连接的信息
···
然后先把数据存进去,下面的数据都是使用上面的那个样例的数据：
datas.push({
name: '校园大数据',
symbolSize: 120,
draggable: true,
category: 0,
itemStyle: {
normal: {
borderColor: '#04f2a7',
borderWidth: 6,
shadowBlur: 20,
shadowColor: '#04f2a7',
color: '#001c43',
}
}
},
{
name: '舆情大数据',
symbolSize: 100,
itemStyle: {
normal: {
borderColor: '#04f2a7',
borderWidth: 4,
shadowBlur: 10,
shadowColor: '#04f2a7',
color: '#001c43',
}
},
category: 1,
},
{
name: '用户分析',
symbolSize: 80,
category: 1,
itemStyle: {
normal: {
borderColor: '#04f2a7',
borderWidth: 4,
shadowBlur: 10,
shadowColor: '#04f2a7',
color: '#001c43',
}
},
},
{
name: '话题分析',
symbolSize: 80,
category: 1,
itemStyle: {
normal: {
borderColor: '#82dffe',
borderWidth: 4,
shadowBlur: 10,
shadowColor: '#04f2a7',
color: '#001c43',
}
},
},
{
name: '评论分析',
symbolSize: 80,
category: 1,
itemStyle: {
normal: {
borderColor: '#82dffe',
borderWidth: 4,
shadowBlur: 10,
shadowColor: '#04f2a7',
color: '#001c43',
}
},
},
{
name: '图书馆分析',
symbolSize:100,
category: 2,
itemStyle: {
normal: {
borderColor: '#82dffe',
borderWidth: 4,
shadowBlur: 10,
shadowColor: '#04f2a7',
color: '#001c43',
}
},
},
{
name: '借阅分析',
symbolSize:80,
category: 2,
itemStyle: {
normal: {
borderColor: '#b457ff',
borderWidth: 4,
shadowBlur: 10,
shadowColor: '#b457ff',
color: '#001c43'
}
},
},
{
name: '借阅排行',
symbolSize:80,
itemStyle: {
normal: {
borderColor: '#82dffe',
borderWidth: 4,
shadowBlur: 10,
shadowColor: '#04f2a7',
color: '#001c43'
}
},
category: 2,
},
{
name: '图书收录',
symbolSize:80,
itemStyle: {
normal: {
borderColor: '#82dffe',
borderWidth: 4,
shadowBlur: 10,
shadowColor: '#04f2a7',
color: '#001c43'
}
},
category: 2,
},
{
name: '图书分析',
symbolSize:80,
category: 2,
itemStyle: {
normal: {
borderColor: '#82dffe',
borderWidth: 4,
shadowBlur: 10,
shadowColor: '#04f2a7',
color: '#001c43'
}
},
});然后把连接的信息存进去：
linkmes.push({
source: '校园大数据',
target: '舆情大数据'
},
{
source: '校园大数据',
target: '图书馆分析',
},
{
source: '舆情大数据',
target: '用户分析',
},
{
source: '舆情大数据',
target: '话题分析',
},
{
source: '舆情大数据',
target: '评论分析',
},
{
source: '校园大数据',
target: '图书馆分析',
},
{
source: '图书馆分析',
target: '图书分析',
},
{
source: '图书馆分析',
target: '借阅分析',
},
{
source: '图书馆分析',
target: '借阅排行',
value: 'DNA',
},{
source: '图书馆分析',
target: '图书收录'
});下面就由echarts来创建关系图了：
var myChart = echarts.init(document.getElementById('OdfMes'));
option = {
backgroundColor: '#1a4377',
tooltip: {},
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
color:['#83e0ff','#45f5ce','#b158ff'],
series: [
{
type: 'graph',
layout: 'force',
force:{
repulsion:1000,
edgeLength:50
},
roam: true,
label: {
normal: {
show: true
}
},
data: datas,
links: linkmes,
lineStyle: {
normal: {
opacity: 0.9,
width: 5,
curveness: 0
}
},
categories:[
{name: '0'},
{name: '1'},
{name: '2'}
]
}
]
}
myChart.setOption(option);这时一个简单的关系图就出来了：
接下来就是追加数据了，通过点击这些节点来添加数据：
myChart.on('click', function (params) {
//只要点击这些节点就会触发这个事件，params里面有我们点击的那个节点的信息
}然后添加操作：
myChart.on('click', function (params) {
if(params.name!=null){
//var mes=params.name.replace(/\d+/g,"")
if(params.name=="话题分析"){
//这里我用到了params.name，当我们点击的节点的name的值为“话题分析”时就会进入下面的方法
datas.push({
name: '图书分析a',
symbolSize: 80,
category: 2,
itemStyle: {
normal: {
borderColor: '#82dffe',
borderWidth: 4,
shadowBlur: 10,
shadowColor: '#04f2a7',
color: '#001c43'
}
}
});
//上面就是把新数据添加到datas里面
linkmes.push({
source: '图书分析a',
target: '话题分析'
})
//上面就是把连接关系添加到linkmes数组中
//下面这个就是重新画关系图
myChart.setOption({
series: [{
data: datas,
links: linkmes
}]
});
}
}
})PS：不能有两个或两个以上的name相同，不然links会不知道连接哪个，从而报错。
下面就是追加后的样子：
整个页面代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="incubator-echarts-4.6.0/dist/echarts.min.js"></script>
<body>
<div id="OdfMes" style="width: 1800px;height: 800px;float: right"></div>
<script>
var datas=[];
var linkmes=[];//连接的信息
datas.push({
name: '校园大数据',
symbolSize: 120,
draggable: true,
category: 0,
itemStyle: {
normal: {
borderColor: '#04f2a7',
borderWidth: 6,
shadowBlur: 20,
shadowColor: '#04f2a7',
color: '#001c43',
}
}
},
{
name: '舆情大数据',
symbolSize: 100,
itemStyle: {
normal: {
borderColor: '#04f2a7',
borderWidth: 4,
shadowBlur: 10,
shadowColor: '#04f2a7',
color: '#001c43',
}
},
category: 1,
},
{
name: '用户分析',
symbolSize: 80,
category: 1,
itemStyle: {
normal: {
borderColor: '#04f2a7',
borderWidth: 4,
shadowBlur: 10,
shadowColor: '#04f2a7',
color: '#001c43',
}
},
},
{
name: '话题分析',
symbolSize: 80,
category: 1,
itemStyle: {
normal: {
borderColor: '#82dffe',
borderWidth: 4,
shadowBlur: 10,
shadowColor: '#04f2a7',
color: '#001c43',
}
},
},
{
name: '评论分析',
symbolSize: 80,
category: 1,
itemStyle: {
normal: {
borderColor: '#82dffe',
borderWidth: 4,
shadowBlur: 10,
shadowColor: '#04f2a7',
color: '#001c43',
}
},
},
{
name: '图书馆分析',
symbolSize:100,
category: 2,
itemStyle: {
normal: {
borderColor: '#82dffe',
borderWidth: 4,
shadowBlur: 10,
shadowColor: '#04f2a7',
color: '#001c43',
}
},
},
{
name: '借阅分析',
symbolSize:80,
category: 2,
itemStyle: {
normal: {
borderColor: '#b457ff',
borderWidth: 4,
shadowBlur: 10,
shadowColor: '#b457ff',
color: '#001c43'
}
},
},
{
name: '借阅排行',
symbolSize:80,
itemStyle: {
normal: {
borderColor: '#82dffe',
borderWidth: 4,
shadowBlur: 10,
shadowColor: '#04f2a7',
color: '#001c43'
}
},
category: 2,
},
{
name: '图书收录',
symbolSize:80,
itemStyle: {
normal: {
borderColor: '#82dffe',
borderWidth: 4,
shadowBlur: 10,
shadowColor: '#04f2a7',
color: '#001c43'
}
},
category: 2,
},
{
name: '图书分析',
symbolSize:80,
category: 2,
itemStyle: {
normal: {
borderColor: '#82dffe',
borderWidth: 4,
shadowBlur: 10,
shadowColor: '#04f2a7',
color: '#001c43'
}
},
});
linkmes.push({
source: '校园大数据',
target: '舆情大数据'
},
{
source: '校园大数据',
target: '图书馆分析',
},
{
source: '舆情大数据',
target: '用户分析',
},
{
source: '舆情大数据',
target: '话题分析',
},
{
source: '舆情大数据',
target: '评论分析',
},
{
source: '校园大数据',
target: '图书馆分析',
},
{
source: '图书馆分析',
target: '图书分析',
},
{
source: '图书馆分析',
target: '借阅分析',
},
{
source: '图书馆分析',
target: '借阅排行',
value: 'DNA',
},{
source: '图书馆分析',
target: '图书收录'
});
$(function () {
var myChart = echarts.init(document.getElementById('OdfMes'));
option = {
backgroundColor: '#1a4377',
tooltip: {},
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
color:['#83e0ff','#45f5ce','#b158ff'],
series: [
{
type: 'graph',
layout: 'force',
force:{
repulsion:1000,
edgeLength:50
},
roam: true,
label: {
normal: {
show: true
}
},
data: datas,
links: linkmes,
lineStyle: {
normal: {
opacity: 0.9,
width: 5,
curveness: 0
}
},
categories:[
{name: '0'},
{name: '1'},
{name: '2'}
]
}
]
}
myChart.setOption(option);
myChart.on('click', function (params) {
if(params.name!=null){
//var mes=params.name.replace(/\d+/g,"")
if(params.name=="话题分析"){
datas.push({
name: '图书分析a',
symbolSize: 80,
category: 2,
itemStyle: {
normal: {
borderColor: '#82dffe',
borderWidth: 4,
shadowBlur: 10,
shadowColor: '#04f2a7',
color: '#001c43'
}
}
});
linkmes.push({
source: '图书分析a',
target: '话题分析'
})
myChart.setOption({
series: [{
data: datas,
links: linkmes
}]
});
}
}
})
})
</script>
</body>
</html>以上是个人学习心得，欢迎互相交流。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
