【前端工具】使用Echats生成关系图谱，可展开折叠

最新推荐文章于 2024-05-06 12:49:24 发布
置顶 最新推荐文章于 2024-05-06 12:49:24 发布
阅读量2.1k 收藏 7
点赞数 3
分类专栏： DevOps Issues echarts 文章标签： 前端 echarts javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37822090/article/details/131419770
版权
DevOps 同时被 3 个专栏收录
4 篇文章 0 订阅
订阅专栏
Issues
4 篇文章 0 订阅
订阅专栏
echarts
1 篇文章 0 订阅
订阅专栏

目录

一、需求背景与效果

二、echarts源码

一、需求背景与效果

根据服务关系制作关系图谱，echarts官方关系图没有想要的案例，网上也没有好的效果，故参考网上已有的部分案例，自行写了一个，效果还不错。

当前echarts版本信息：

话不多说，直接上效果：

1、默认展示查询到的所有路径列表

 2、点击路径，可展开详细信息

二、echarts源码

 源码与案例数据：

let data = {
  nodes: [{
		"cNumber": 20207,
		"category": 0,
		"name": "custom/data/service1-aliyun/vault-activemq"
	}, {
		"cNumber": 20207,
		"category": 1,
		"name": "service1-aliyun"
	}, {
		"cNumber": 2248,
		"category": 2,
		"name": "192.168.44.73"
	}, {
		"cNumber": 2247,
		"category": 2,
		"name": "192.168.44.76"
	}, {
		"cNumber": 2247,
		"category": 2,
		"name": "192.168.48.186"
	}, {
		"cNumber": 2246,
		"category": 2,
		"name": "192.168.44.77"
	}, {
		"cNumber": 2244,
		"category": 2,
		"name": "192.168.44.74"
	}, {
		"cNumber": 2244,
		"category": 2,
		"name": "192.168.44.75"
	}, {
		"cNumber": 2244,
		"category": 2,
		"name": "192.168.48.184"
	}, {
		"cNumber": 2244,
		"category": 2,
		"name": "192.168.48.187"
	}, {
		"cNumber": 2243,
		"category": 2,
		"name": "192.168.48.185"
	}, {
		"cNumber": 9743,
		"category": 0,
		"name": "cloud/data/devops-service1/tencent-service2"
	}, {
		"cNumber": 9743,
		"category": 1,
		"name": "devops-service1"
	}, {
		"cNumber": 2244,
		"category": 2,
		"name": "192.168.129.172"
	}, {
		"cNumber": 1893,
		"category": 2,
		"name": "192.168.0.117"
	}, {
		"cNumber": 1844,
		"category": 2,
		"name": "192.168.6.149"
	}, {
		"cNumber": 3869,
		"category": 0,
		"name": "custom/data/service1-tencent/vault-activemq"
	}, {
		"cNumber": 3869,
		"category": 1,
		"name": "service1-tencent"
	}, {
		"cNumber": 1926,
		"category": 2,
		"name": "192.169.35.217"
	}, {
		"cNumber": 150,
		"category": 2,
		"name": "192.169.32.2"
	}, {
		"cNumber": 150,
		"category": 2,
		"name": "192.169.33.118"
	}, {
		"cNumber": 150,
		"category": 2,
		"name": "192.169.33.59"
	}, {
		"cNumber": 150,
		"category": 2,
		"name": "192.169.34.153"
	}, {
		"cNumber": 150,
		"category": 2,
		"name": "192.169.34.99"
	}, {
		"cNumber": 150,
		"category": 2,
		"name": "192.169.35.122"
	}, {
		"cNumber": 149,
		"category": 2,
		"name": "192.169.32.151"
	}, {
		"cNumber": 149,
		"category": 2,
		"name": "192.169.33.165"
	}, {
		"cNumber": 149,
		"category": 2,
		"name": "192.169.33.197"
	}, {
		"cNumber": 149,
		"category": 2,
		"name": "192.169.33.238"
	}, {
		"cNumber": 149,
		"category": 2,
		"name": "192.169.33.84"
	}, {
		"cNumber": 149,
		"category": 2,
		"name": "192.169.35.152"
	}, {
		"cNumber": 149,
		"category": 2,
		"name": "192.169.35.172"
	}, {
		"cNumber": 9743,
		"category": 0,
		"name": "custom/data/devops-service1/ci-jiratool"
	}, {
		"cNumber": 1906,
		"category": 2,
		"name": "192.168.13.11"
	}, {
		"cNumber": 1856,
		"category": 2,
		"name": "192.168.13.95"
	}, {
		"cNumber": 9743,
		"category": 0,
		"name": "cloud/data/devops-service1/tencent-service1"
	}],
	links: [{
		"name": "20207",
		"source": "service1-aliyun",
		"target": "custom/data/service1-aliyun/vault-activemq"
	}, {
		"name": "2248",
		"source": "192.168.44.73",
		"target": "service1-aliyun"
	}, {
		"name": "2247",
		"source": "192.168.44.76",
		"target": "service1-aliyun"
	}, {
		"name": "2247",
		"source": "192.168.48.186",
		"target": "service1-aliyun"
	}, {
		"name": "2246",
		"source": "192.168.44.77",
		"target": "service1-aliyun"
	}, {
		"name": "2244",
		"source": "192.168.44.74",
		"target": "service1-aliyun"
	}, {
		"name": "2244",
		"source": "192.168.44.75",
		"target": "service1-aliyun"
	}, {
		"name": "2244",
		"source": "192.168.48.184",
		"target": "service1-aliyun"
	}, {
		"name": "2244",
		"source": "192.168.48.187",
		"target": "service1-aliyun"
	}, {
		"name": "2243",
		"source": "192.168.48.185",
		"target": "service1-aliyun"
	}, {
		"name": "9743",
		"source": "devops-service1",
		"target": "cloud/data/devops-service1/tencent-service2"
	}, {
		"name": "2244",
		"source": "192.168.129.172",
		"target": "devops-service1"
	}, {
		"name": "1893",
		"source": "192.168.0.117",
		"target": "devops-service1"
	}, {
		"name": "1844",
		"source": "192.168.6.149",
		"target": "devops-service1"
	}, {
		"name": "3869",
		"source": "service1-tencent",
		"target": "custom/data/service1-tencent/vault-activemq"
	}, {
		"name": "1926",
		"source": "192.169.35.217",
		"target": "service1-tencent"
	}, {
		"name": "150",
		"source": "192.169.32.2",
		"target": "service1-tencent"
	}, {
		"name": "150",
		"source": "192.169.33.118",
		"target": "service1-tencent"
	}, {
		"name": "150",
		"source": "192.169.33.59",
		"target": "service1-tencent"
	}, {
		"name": "150",
		"source": "192.169.34.153",
		"target": "service1-tencent"
	}, {
		"name": "150",
		"source": "192.169.34.99",
		"target": "service1-tencent"
	}, {
		"name": "150",
		"source": "192.169.35.122",
		"target": "service1-tencent"
	}, {
		"name": "149",
		"source": "192.169.32.151",
		"target": "service1-tencent"
	}, {
		"name": "149",
		"source": "192.169.33.165",
		"target": "service1-tencent"
	}, {
		"name": "149",
		"source": "192.169.33.197",
		"target": "service1-tencent"
	}, {
		"name": "149",
		"source": "192.169.33.238",
		"target": "service1-tencent"
	}, {
		"name": "149",
		"source": "192.169.33.84",
		"target": "service1-tencent"
	}, {
		"name": "149",
		"source": "192.169.35.152",
		"target": "service1-tencent"
	}, {
		"name": "149",
		"source": "192.169.35.172",
		"target": "service1-tencent"
	}, {
		"name": "9743",
		"source": "devops-service1",
		"target": "custom/data/devops-service1/ci-jiratool"
	}, {
		"name": "1906",
		"source": "192.168.13.11",
		"target": "devops-service1"
	}, {
		"name": "1856",
		"source": "192.168.13.95",
		"target": "devops-service1"
	}, {
		"name": "9743",
		"source": "devops-service1",
		"target": "cloud/data/devops-service1/tencent-service1"
	}]

}

const color1 = '#006acc';
const color2 = '#ff7d18';
const color3 = '#45b97c';

data.nodes.forEach(node => {
  if (node.category === 0) {
    node.symbolSize = 70;
    node.itemStyle = {
      color: color1
    };
  } else if (node.category === 1) {
    node.symbolSize = 50;
    node.itemStyle = {
      color: color2
    };
  } else if (node.category === 2) {
    node.symbolSize = 30;
    node.itemStyle = {
      color: color3
    };
  }
  node.symbolSize = node.symbolSize + node.cNumber/1000
  node.open = false
});

data.links.forEach(link => {
  link.label = {
    align: 'center',
    fontSize: 12
  };

});

let categories = [{
    name: '路径',
    itemStyle: {
        color: color1
    }
  },
  {
    name: '目标对象',
    itemStyle: {
        color: color2
    }
},
{
    name: '客户端IP',
    itemStyle: {
        color: color3
    }
}]

option = {
  title: {
    text: '关系图谱',
  },
  legend: [{
    data: categories.map(x => x.name),
  }],
  series: [{
    type: 'graph',
    layout: 'force',
    symbolSize: 58,
    draggable: true,
    roam: true,
    focusNodeAdjacency: true,
    categories: categories,
    edgeSymbol: ['', 'arrow'],
    // edgeSymbolSize: [80, 10],
    edgeLabel: {
      normal: {
        show: true,
        textStyle: {
          fontSize: 20
        },
        formatter(x) {
          return x.data.name;
        }
      }
    },
    label: {
      fontSize: 12,
        show: true
    },
    force: {
      repulsion: 2000,
      edgeLength: 120
    },
    data: data.nodes,
    links: data.links
  }]
}

myChart.setOption(option);
bindChartClickEvent(myChart);

/**
 * 绑定图表的点击事件
 * @param chart
 */
function bindChartClickEvent(chart) {
    chart.on('click', function (params) {
        var category = params.data.category,
            nodeType = params.data.nodeType;
            toggleShowNodes(chart, params);
    });
    
    for (var j = 0; j < data.nodes.length; j++) {
      if (data.nodes[j].category !==  0 ) {
          data.nodes[j].data = {};
          data.nodes[j].seriesIndex=0;
          data.nodes[j].open=false;
          data.nodes[j].category=-1;
          toggleShowNodes(chart, data.nodes[j]);
      }
    }
}

/**
 * 展开或关闭节点
 * @param chart
 * @param params
 */
function toggleShowNodes(chart, params) {
    var open = !!params.data.open,
        options = chart.getOption(),
        seriesIndex = params.seriesIndex,
        srcLinkName = params.name,
        serieLinks = options.series[seriesIndex].links,
        serieData = options.series[seriesIndex].data,
        serieDataMap = new Map(),
        serieLinkArr = [];
    // 当前根节点是展开的，那么就需要关闭所有的根节点
    if (open) {
        // 递归找到所有的link节点的target的值
        findLinks(serieLinkArr, srcLinkName, serieLinks, true);
        if (serieLinkArr.length) {
            serieData.forEach(sd => serieDataMap.set(sd.name, sd));
            for (var i = 0; i < serieLinkArr.length; i++) {
                if (serieDataMap.has(serieLinkArr[i])) {
                    var currentData = serieDataMap.get(serieLinkArr[i]);
                    currentData.category = -Math.abs(currentData.category);
                }
            }
            
            serieDataMap.get(srcLinkName).open = false;
            chart.setOption(options);
        }
    } else {
        // 当前根节点是关闭的，那么就需要展开第一层根节点
        findLinks(serieLinkArr, srcLinkName, serieLinks, true);
        if (serieLinkArr.length) {
            serieData.forEach(sd => serieDataMap.set(sd.name, sd));
            for (var j = 0; j < serieLinkArr.length; j++) {
                if (serieDataMap.has(serieLinkArr[j])) {
                    var currentData = serieDataMap.get(serieLinkArr[j]);
                    currentData.category = Math.abs(currentData.category);
                }
            }
            serieDataMap.get(srcLinkName).open = true;
            chart.setOption(options);
        }
    }
}

/**
 * 查找连接关系
 * @param links 返回的节点放入此集合
 * @param srcLinkName 源线的名称
 * @param serieLinks 需要查找的集合
 * @param deep 是否需要递归进行查找
 */
function findLinks(links, srcLinkName, serieLinks, deep) {
    var targetLinks = [];
    serieLinks.filter(link => link.target === srcLinkName).forEach(link => {
        targetLinks.push(link.source);
        links.push(link.source)
    });
    if (deep) {
        for (var i = 0; i < targetLinks.length; i++) {
            findLinks(links, targetLinks[i], serieLinks, deep);
        }
    }
}

xbl丶
关注
  • 3
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
基于Vue+echarts关系图实现的知识图谱+源代码+文档说明
01-19
<项目介绍> 基于Vue+echarts关系图的知识图谱+源代码+文档说明 - 不懂运行，下载完可以私聊问，可远程教学 该资源内项目源码是个人的毕设，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 --------
基于知识图谱的问答+echarts展示图谱.zip
03-15
知识图谱是一种结构化的知识表达形式，它以图形的方式组织和存储了大量实体（如人、地点、事件等）及其相互关系。在知识图谱中，实体作为节点，实体之间的各种语义关联则通过边进行连接，形成了一个庞大的数据网络。 知识图谱的核心价值在于其能够精确、直观地表示复杂世界中的知识，并支持高效的知识查询与推理。例如，在搜索引擎中，知识图谱可以提升搜索结果的相关性和准确性，为用户提供直接的答案而非仅仅是网页链接。同时，知识图谱还能支撑高级的人工智能应用，比如问答系统、推荐系统、决策支持等领域。 构建知识图谱的过程通常包括数据抽取、知识融合、实体识别、关系抽取等多个步骤，涉及到自然语言处理、机器学习、数据库技术等多种技术手段。知识图谱的不断完善有助于实现从海量信息中挖掘深层次、有价值的知识，从而推动人工智能向着更加理解人类世界的智慧方向发展。 总之，知识图谱是一个大规模、多领域、多源异构知识集成的载体，是实现智能化信息系统的基础工具和关键基础设施，对于提升信息检索质量、推动智能应用研发具有重要作用。
用echarts制作红楼梦关系图——保姆级教程（照做可出结果）
zgmssy的博客
03-20 475
/ 为复选框添加事件监听});});// 搜索功能});});});// 找到搜索节点对应的所有关联节点});// 去重// 将搜索到的节点以及其关联节点添加到结果中if (!});});});});} else {alert('未找到匹配节点。');// 更新图表数据});// 更新图表数据});t=N7T8。
【前端可视化】ECharts 关系图力导图（知识图谱）类型配置
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
09-28 826
记录下 效果图 配置项 let myChart: any = null; const categories = [ { name: "错误码", }, { name: "原因", }, { name: "设备", }, { name: "用户操作", }, { name: "现象", }, ]; // 初始化分布...
前端-relation-graph实现关系数据展示（关系图/流程图）
weixin_47917431的博客
11-18 4345
今天公司同事的项目新需求需要实现数据关系展示，我在CSDN上找的了答案，并分享给大家。具体在哪位大佬分享，我会在文章末尾引用标注给出链接。话不多说，接下来介绍这个为我们开发人员提供的关系数据组件。
echart 图谱_vue + echarts 实现有层级关系图的图谱
weixin_42326661的博客
01-12 3102
因为接下来要做的事是一个关系图的东西，所以自己先写一个小demo，特次记录一下，主要实现的点有如下：节点的颜色的更改自定义提示框配置，以及在里面的点击事件提示框中的点击事件可以获取到vue实例图列的自定义先上效果图截屏2020-11-18下午4.31.28.png我们说关键吧：颜色的配置，直接配置color ，它是一个数组，不同级别的的节点根据数组来color:['red', 'orange', ...
echart_关系图
01-24
echart_关系图，
Echarts 绘制关系图（知识图谱可视化）
热门推荐
学习笔记
04-05 7万+
1.前言 正在做知识图谱 ，以前可视化用的是D3，因为D3不是太会，而且D3学习成本比较高，所以改用Echarts，Echarts做出来的关系图还是挺好的，记录下来，给以后实验室的学弟学妹们使用。 2.关系图实例 样例代码如下： <!DOCTYPE html> <html> <head> <title>ECharts 关系图&l...
echarts关系图图谱配置详解
WuqibuHuan的博客
03-10 7626
** title 图表标题样式 ** title: { text: "ECharts简单线形图表及其配置展示实例", //正标题 link: "http://www.stepday.com", //正标题链接 点击可在新窗口中打开 top: 'bottom',//上下位置 left: 'right'//左右位置 subtext: "From:http://www.stepday.com", //副标题 sublink: "http://www.stepda
Echarts graph关系图的使用（入门级）
qq_53986004的博客
01-07 7620
echarts graph关系图的使用
ecchart关系图展示（知识图谱）
weixin_42045968的博客
02-03 1431
ecchart关系图展示（知识图谱）
知识图谱可视化之Echarts-静态图谱与Django构建动态图谱项目源码
03-15
2）使用Python的django框架进行开发，并将后台业务逻辑生成的数据传送到前端js中进行展示，实现动态图谱构建，满足工程实际需要。 动态与静态图谱均整合至项目源码中，使用不同路由即可访问。 注：结合博客理解本...
在Vue中使用echarts的方法
08-28
主要介绍了Vue中使用echarts的方法，非常不错，具有参考借鉴价值,需要的朋友可以参考下
vue利用echarts简单实现具有中心节点的知识图谱代码
08-02
vue利用echarts简单实现具有中心节点的知识图谱，其中边缘节点可拖动，其大小可以根据传入的值而变化
web server apache tomcat11-32-rewrite
05-06 657
整理这个官方翻译的系列，原因是网上大部分的 tomcat 版本比较旧，此版本为 v11 最新的版本。重写阀门实现了 URL 重写功能，与 Apache HTTP Server 中的 mod_rewrite 非常相似。
前端调用WebSocket协议接口获取数据
m0_56023096的博客
04-29 514
createWs("测试数据", (res) => {
菜鸡学习netty源码（三）—— Reactor 模型
u013127325的博客
05-03 616
我们先进行理解一下Reactor模型，知道什么是Reactor模型，它有什么特别之处。我们先来简单介绍一下这个Reactor模型。Reactor模型的核心思想：就是将所关注的I/O事件进行注册到一个多路复用器上，一旦有I/O事件的发生，将事件进行分发到对应的事件处理器中，执行I/O事件对应的函数。Rector模型有3中模型的实现：单Reactor单线程模型，单Reactor多线程模型，多Reactor多线程模型。
前端 | iframe框架标签应用（二）| 外部页面导入
最新发布
因为健忘，所以记点有的没的〒▽〒
05-06 969
点击右上角喇叭，弹出iframe页面框，链接bilibili白噪音视频页面；点击关闭按钮，关闭弹出框。
uni框架下的前端小知识
weixin_53908842的博客
04-30 364
1、direction：移动方向，可选值为all、vertical、horizontal分别表示所有方向、垂直、水平方向。3、out-of-bunds：移动超出界限是的处理策略，可选值为fail, bounce,分别表示失败、回弹。9、 scale-value:缩放的值，当scale为true时有效。7、friction:摩擦系数，取值范围【0，100】6、damping:阻尼系数，取值范围【0，100】8、scale：缩放比例，取值范围【0.5，10】4、x:水平方向的移动距离，单位制px。
echarts 企业关系图谱详细代码
06-10
以下是一个示例代码，用于展示企业组织结构关系图谱： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts企业组织结构关系图谱示例</title> <!-- 引入 ECharts 文件 --> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> </head> <body> <!-- 绘制图表的容器 --> <div id="chart" style="width: 1000px;height: 600px;"></div> <!-- 图表的 JavaScript 代码 --> <script> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('chart')); // 数据 var data = { "name": "公司总部", "children": [ { "name": "财务部", "children": [ { "name": "会计" }, { "name": "出纳" }, { "name": "审计师" } ] }, { "name": "人力资源部", "children": [ { "name": "人事专员" }, { "name": "薪酬专员" }, { "name": "培训专员" } ] }, { "name": "研发部", "children": [ { "name": "前端开发工程师" }, { "name": "后端开发工程师" }, { "name": "测试工程师" } ] } ] }; // 配置项 var option = { tooltip: { trigger: 'item', triggerOn: 'mousemove' }, series: [ { type: 'tree', data: [data], top: '1%', left: '7%', bottom: '1%', right: '20%', symbolSize: 7, label: { position: 'left', verticalAlign: 'middle', align: 'right', fontSize: 14 }, leaves: { label: { position: 'right', verticalAlign: 'middle', align: 'left' } }, expandAndCollapse: true, animationDuration: 550, animationDurationUpdate: 750 } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html> ``` 以上代码中，我们使用 ECharts 的 `tree` 类型来绘制企业组织结构关系图谱。具体来说，我们通过一个 JSON 数据来定义组织结构的层级关系，然后在配置项中设置相关参数，例如节点大小、标签位置、动画效果等，最后调用 `setOption` 方法来绘制图表。 需要注意的是，这只是一个简单的示例代码，实际情况下，我们可能需要根据具体的业务需求来调整相关参数和样式，以达到更好的可视化效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值