使用echarts实现网络设备关系图，可追加数据

最新推荐文章于 2024-05-17 13:57:45 发布
最新推荐文章于 2024-05-17 13:57:45 发布
阅读量2.6k 收藏 15
点赞数 5
分类专栏： 前端 文章标签： javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41369374/article/details/104559820
版权

我们通过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>

以上是个人学习心得，欢迎互相交流。

No上善若水
关注
  • 5
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
专栏目录
ECharts实现数据可视化入门教程（超详细）
weixin_58091723的博客
09-04 521
ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。通俗的理解：是一个JS插件性能好可流畅运行PC与移动设备兼容主流浏览器提供很多常用图表【折线图、柱状图、散点图、饼图、K线图】，且可定制（支持自定义）
Echarts数据可视化
FellAsleep的博客
01-07 357
border-image:相关说明 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />
echarts图例增加数据信息
weixin_56542271的博客
01-21 1939
在legend中增加formatter才行，注意尽量不要写function函数，因为函数内只有一个name值，value是改不了的，要将数据遍历返回才行 代码： 最终呈现：
echarts 关系图graph
weixin_43294560的博客
11-06 1万+
1、配置数据类型 data:[ { name:'节点名称', value:'节点值' x:节点坐标, 在不指定的时候需要指明layout属性选择布局方式。 y:节点坐标, symbolSize: 80, draggable: true, 节点是否可拖拽，只在使用力引导布局的时候有用。 itemStyle: {} } ] 2、配置series series:[{ type: 'graph',
ECharts实现地图飞线
最新发布
六六的小帅的博客
05-17 504
v5.x.x版本：不提供china.js和china.json文件v4.x.x版本：使用npm安装echarts，默认包含china.js和china.json文件。
echart绘制关系图、拓扑图
qq_37642495的博客
12-29 2353
今天有个画流程图的需求，在echarts官网上看到了一个简单关系图的案例， 链接如下： https://echarts.apache.org/examples/zh/editor.html?c=graph-simple 这个是个简单的例子，节点是根据坐标来的，在现实的开发中不太容易实现，毕竟找坐标是很麻烦的，根据改进可以用force布局，实现了功能，贴下代码： initCharts(chartList, linkList) { let self = this let myCh
echarts关系图
科小洋的博客
07-08 660
option = { title: { text: '人民的名义关系图谱' }, tooltip: { formatter: function (x) { return x.data.des; } }, series: [ { type:
MFC实现在文件尾追加数据的方法
01-01
本文实例讲述了MFC实现在文件尾追加数据的方法。分享给大家供大家参考。具体如下： BOOL CDelDlg::WritetoFile(CString sValue) { CString sFile = GetExePath() + \\1.log; CStdioFile file; if(file....
java 如何往已经存在的excel表格里面追加数据的方法
08-25
在本文中，我们将介绍如何使用 Java 往已经存在的 Excel 表格里面追加数据。 导入必要的 jar 包 要使用 Apache POI 库，首先需要下载并导入必要的 jar 包。可以从以下网址下载 poi.jar 和 jxl.jar 文件： * poi....
利用pandas向一个csv文件追加写入数据的实现示例
12-20
我们越来越多的使用pandas进行数据处理，有时需要向一个已经存在的csv文件写入数据，传统的方法之前我也有些过，向txt，excel文件写入数据，传送门：Python将二维列表（list）的数据输出（TXT，Excel） pandas to_...
echarts实现知识图谱，生产项目
清澈明朗 积极向上
02-28 2012
通过使用echarts的关系图实现知识图谱展示和管理。
Vue下使用Echart绘制树形关系图谱
fangshuiguang的博客
06-25 8427
某日接到需求说做个这样的关系图 前期因为用到echart，所以没有考虑别的d3.js来实现，主要是节点的更新，echart2有refresh来实现，但是在echart4已不存在该方法，于是用setOption来重新渲染Tree数据，同层级之间的距离一直不好设置，如果数据节点过大的时候会出现重叠的烦恼。 解决问题1，使用自定义节点图片； 解决问题2，当节点数量过多时，初始化节点全在当...
echart 关系图 ---- 配置 可自定义图片
HuangsTing的博客
10-12 2167
代码如下： var myChart = echarts.init(document.getElementById("relation-chart")); var echartJson ={ "series":[ { "edgeLabel":{ "normal":{ "format...
vue项目中实际构建echarts拓扑关系图业务
SHALLNY
11-15 8494
由于现在echarts的利用率增强，需要用到拓扑图的设计，如果单纯针对echarts文档来看，虽然可以利用API详细了解到功能点，但具体的实际运用与开发场景经验案例还是略有欠缺，下面将针对echarts关系拓扑图进行实例讲解。关系拓扑图，顾名思义，是有具体的关系存在的点，具有向量指向特点。那么就要求数据具备和的属性。思路是这样的，首先描绘物体（关系点），再者是描绘连接关系点的连线。 简单效果图如上图，共4层类型，同一层为同一个类型，分别是：运维人员、数据库、应用、用户，连接线为起始到终点的指向关系 2.测
echarts图如何调整上下左右空间的大小
前端小陈的成长记录
09-13 2139
echarts图调整上下左右空间的大小
vue实现 【echarts中graph关系图图例】，制作一个知识点的关系图表，其中包含 “点击节点” 和 “提示弹窗按钮点击事件” 实现【页面跳转】
weixin_50450473的博客
11-09 7700
1、安装echarts npm install echarts --save 2、在需要的页面引入 import * as echarts from "echarts" KnowChart.vue <template> <div> <div id="atlasChart"></div> </div> </template> <script> import * as echarts f...
Echart 双图使y轴0刻度对齐/折线和统计图上下分离、不重叠
林中明月间丶
10-13 2612
【代码】Echart 双图使y轴0刻度对齐/Echarts双y轴0刻度线不对齐解决思路。
Echarts 绘制关系图（知识图谱可视化）
热门推荐
学习笔记
04-05 7万+
1.前言 正在做知识图谱 ，以前可视化用的是D3，因为D3不是太会，而且D3学习成本比较高，所以改用Echarts，Echarts做出来的关系图还是挺好的，记录下来，给以后实验室的学弟学妹们使用。 2.关系图实例 样例代码如下： <!DOCTYPE html> <html> <head> <title>ECharts 关系图&l...
ECharts关系图、流程图、导向图(详细示例——满满的注释)
陈新科的博客
12-22 9926
具体代码如下： init() { var myChart = this.$echarts.init(document.getElementById("main")); var option = { title: { // text: "流程", }, series: [ { type: "graph", //关系图 layout:...
qt 使用函数实现字符串追加数据
06-06
在 Qt 中，可以使用 QString 类的 append() 函数来实现字符串追加数据。该函数的语法如下： ```c++ QString& QString::append(const QString& str) ``` 其中，str 表示要追加的字符串。 例如，如果要在一个字符串...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 13
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值