我们通过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。
然后echarts的社区那里下载一个好看点的样式,样例地址:https://gallery.echartsjs.com/editor.html?c=x08gNxOWCS
在body区定义一个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会不知道连接哪个,从而报错。
下面就是追加后的样子:
整个页面代码如下:
Title
以上是个人学习心得,欢迎互相交流。