echarts的graph种两点之间如何设置多线条且不重叠？

最新推荐文章于 2024-06-05 11:25:12 发布
原创 最新推荐文章于 2024-06-05 11:25:12 发布 · 8.6k 阅读 · 20 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍在ECharts的Graph组件中，如何通过修改源码实现两点间多条线的绘制，并自动调整线条弧度避免重叠，适用于复杂关系图的可视化呈现。

问：echarts的graph种两点之间如何设置多线条？
效果图：
在这里插入图片描述
答：找到echarts源码中的graph的addEdge方法，注释掉判断重复边的代码。如图：
在这里插入图片描述

问：两点之间关系设置多个会重叠，怎么实现根据数据自动弧度？
效果图：在这里插入图片描述
答：我在每次push新关系的时候都去判断是否存在两个点的关系，若有则根据次数，依次叠加curveness
部分代码：
在这里插入图片描述
鉴于好多人私信我要代码，我就上传一份到github了~大家可以自取哟 嘻嘻 XD
Demo传送地址

冲鸭!

补充：近日有人私信我，说改了echarts的代码，但是多关系线的设置没有用。
因为我的demo是基于html页面开发的，只引入单echarts.js即可，而有些来问我的人很多都是npm install安装的，当用import的时候，es6模块会自动检索echarts包，所以如果是npm install的echarts文件的，建议改了代码后，build一下，这样才会生效~

Echarts关系图实现两个节点连接同向的多条边（详细）
锵锵锵锵蒋的博客
01-29 5890
1、改源码 在Echarts官网上有很多关系图示例（传送门） 但是这些图两点之间最多两条边，并且方向相反。但是在社交网络分析作图时常常遇到两个人物（节点）之间存在多种关系且指向相同（方向相同的多边）。写代码过程中有意加多边然而出现覆盖现象，就算手动控制弧度也不会显示同方向边，而官方文档中并未提及相关代码。怀疑是源文件中有严格控制条件，经查阅echart源文件echarts.min.js，果然有剔除...
echarts关系图配置，及超出范围处理 + a、b两个节点互相指向时线上的字重叠问题
Shimeng_1989的博客
05-27 7396
情景：由于人物关系复杂，可以有几个 ——几十个（上百个），所以固定范围内（如：500高度）可能放不下，或者太空。所以可以根据node节点（也可根据其他判断条件）来动态修改 div / canvas高度。如果还是超出（eg：节点或者关系多），可添加roam:true的属性实现可平移拖拽 / 缩放。（在下一节讲述） 效果如图： 数据： // 数据 let data = { nodes = [ // {symbol: 'image://http://127.0.0.1:8080
Echarts 关系图 两个节点同向的多条边实现
u012914342的博客
04-13 3723
效果预览：
echarts line两条线的数据一样却没有交叉重叠在一起
vae_why的博客
10-28 2833
今天又是能量满满的一天，从改bug开始。看看今天又有啥bug吧，今天是关于图表的问题，测试问题文档是这样的： 界面是这样的： 看上面的图就知道问题是两个点的数据是一样的确没有重叠在一块。 原因：在echarts官网的配置项手册中有提到stack，就是数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加。所以导致数据是不会重叠在一起的 解决：查看了一下前同事写的代码，果然设置了stack，全部找到并注释掉就好了。 好了，前人挖坑，我来填，测试问题文档又可以关闭了
echarts关系图多条连线
zcfzfc123456789的博客
07-01 7047
最近用echarts做图的关系实现图 数据结构 连接线会重合，解决办法 import Graph from 'echarts/lib/data/Graph' import echarts from 'echarts' const Edge = Graph.Edge const Node = Graph.Node function generateNodeKey(id) { return '_EC_' + id; } Graph.prototype.addEdge = function (n1,
echarts tooltip提示框内容太多时_借官方关系图尝试下屏蔽鼠标浮在 links 上弹出的提示框...
weixin_39875675的博客
11-29 456
最近有读者问我如何去掉力引导图上，鼠标浮在连接线上时弹出的提示框，我的思路是通过回调函数定义 tooltip.formatter 实现，在这给大家分享一下。tooltip.formatter 是做什么的？如下图字符串模板官方解释如下字符串模板官方解释回调函数官方解释如下回调函数官方解释大致是说可以用模板变量拼字符串，或者直接用一个函数的返回值作为提示框显示的内容。从回调函数那张图，我们可以看到，p...
echarts graph 连接线和箭头偏移
最新发布
11-06
连接线重叠：多条关系线在两点之间重叠，难以区分。 2. 箭头位置偏移：箭头可能没有指向节点边缘，或者被节点遮挡。 解决方案如下： 1. 对于连接线重叠： 使用`curveness`属性设置连接线的曲率，使重叠的线条...
echarts常用配置说明
weixin_42241611的博客
06-05 1130
/默认是emptyCircle，可选值：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'，//可选值：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'//可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度,不设置时会自动计算最小值保证坐标轴刻度的均匀分布。
Echarts的series配置项是什么，有哪些配置，都有什么用？
08-16
我们正在讨论ECharts中的series配置项。根据引用[1][2][3]，series是ECharts中最重要的配置项之一，用于定义图表系列，包括数据、图表类型以及样式等。每个系列通过type属性指定图表类型（如折线图line、柱状图bar、...
Echarts同向多边关系图实现方案与源码解析
在Echarts关系图中实现两个节点之间的同向多条边是一项具有挑战性的前端可视化技术，尤其在复杂网络结构或知识图谱展示中具有重要意义。本文围绕“Echarts同向多边实现”这一主题，深入探讨了如何通过调整图形参数、...
echart_关系图
01-24
echart_关系图，
ECharts--基于力导向布局图功能更完善的人物关系图插件扩展-增加横纵滚动条
04-12
ECharts--基于力导向布局图功能更完善的人物关系图插件扩展-增加横纵滚动条
echarts 树状图节点太多导致节点重叠，如何调整
qq_30351747的博客
03-21 2480
echarts 树状图节点太多导致节点重叠，如何调整
echarts 关系图多条关系线叠加_动手构建地铁关系网，实现最短路径查询
weixin_32698563的博客
12-23 1093
一、前言打开手机‘北京地铁’APP，输入起始点：霍营，终点：北京南站，发现系统给我们推荐了两条路线。最短时间路线与最少换乘路线，并且分别给出了耗时与乘坐里程费。看到这里，不禁开启了靓仔疑问，假如给你地铁站相关数据，如何构建这样的关系网络呢？(尽量少写代码，毕竟我这个人懒的不行，花最少的功夫，整最炫的效果)1.整理地铁站点数据，处理成echarts图表所需要的结构 2.整理...
echarts多个关系图如何实现
qq_45018844的博客
08-26 2447
跟其他echarts图表一样，第一步新建一个容器用来展示图；里面有一些配置都是需要在文档中一个个的找到 然后进行设置的。这里用到的时候力引导布局；大概看一下数据结构吧。这里的id名称一定要对上哦~记得写上这个加载方法哦！...
echarts 关系图_ECharts关系图2
weixin_39833290的博客
11-21 1046
1.效果图2.前端代码<template> <div class="echartLayout"> <div class="filter-item" style="margin-left: 2%"> <el-select clearable class="filter-item" placeholder...
chart 完成拓扑图单节点拖拽不影响其他节点位置
菜鸡奋斗ing的博客
04-22 3919
就是做这种的功能，箭头原本是可以动态重复移动的，但不知道哪里问题导致没箭头了，然后补了个edgeSymbol: ['','arrow'], 字段，才增加了箭头。 拖拽某个节点，只有关联到的线条会跟着变动其他的节点位置不变。 参考 https://gallery.echartsjs.com/editor.html?c=x8Fgri22P9 https://echarts.baidu.com/exam...
vue3 echarts5 graph关系图谱 点击图例节点消失线不消失重复生成问题
YUSIR 完美CODING世界
05-07 2327
const myChart = ref(null); const myCharts = ref(null); onMounted(() => { // 这种会导致线仍然存在 重复生成 myCharts.value = echarts.init(myChart.value); myCharts.value.setOption(option); }); return { myChart, myChar...
echarts graph图重叠_基于图的异常检测（三）：GraphRAD
weixin_36296864的博客
12-24 907
论文：《GraphRAD: A Graph-based Risky Account Detection System》作者：Jun Ma（Amazon）,Danqing Zhang(Berkeley)来源：MLG ' 18本文介绍Amazon基于图的欺诈交易账户检测系统，相比LOCKINFER 和 OddBall，本文是面向实际业务设计的检测系统，并使用了标签数据。早期做过十分类似的项目，在可视化...
echarts graph 节点重叠
11-05
<think>根据用户的需求，用户希望解决ECharts中Graph图节点重叠的问题。用户提供了两段引用，分别涉及路径图和树状图的节点重叠解决方案。虽然引用中的方法不完全相同，但核心思想都是动态调整容器高度以适应节点数量。 用户当前的问题是针对Graph图（关系图）的节点重叠，与引用中的路径图和树状图有所不同，但动态调整容器尺寸的思路可以借鉴。此外，Graph图本身也提供了多种布局算法和配置项来避免节点重叠。 以下分步骤解答： ### 1. 调整容器尺寸 类似于引用中的方法，可以动态计算节点数量，然后调整容器高度（或宽度）以适应节点。但注意Graph图通常使用力导向布局，单纯调整容器尺寸可能不够，需要结合布局参数。 ### 2. 使用ECharts配置项避免重叠 ECharts的Graph图提供了丰富的配置选项来避免节点重叠： - **布局选择**：使用力导向布局（'force'）并调整斥力、重力等参数。 - **节点大小**：通过`symbolSize`调整节点大小，避免大节点重叠。 - **斥力因子**：调整`repulsion`值，使节点间斥力增大，避免重叠。 - **边长度**：调整`edgeLength`，使连接线长度增加，从而拉开节点距离。 - **碰撞检测**：启用`preventOverlap`（防止节点重叠）和`gpuAcceleration`（启用GPU加速）。 ### 3. 示例代码 以下是一个Graph图的配置示例，重点配置了力导向布局参数： ```javascript option = { series: [{ type: 'graph', layout: 'force', force: { repulsion: 1000, // 节点间斥力因子，值越大节点间距越大 edgeLength: [100, 500], // 边的长度范围，单位是像素 gravity: 0.01, // 重力因子，防止节点离中心过远 friction: 0.6, // 摩擦系数，值越大移动越缓慢 preventOverlap: true, // 防止节点重叠 nodeSize: 40 // 节点大小，用于碰撞检测（也可单独设置每个节点的symbolSize） }, data: [...], // 节点数据 links: [...] // 边数据 }] }; ``` ### 4. 动态调整容器尺寸（可选） 如果需要滚动查看大量节点，可参考引用中的方法动态调整容器高度。但注意Graph图通常需要同时调整高度和宽度，且需要调用`resize()`方法： ```javascript // 假设节点数量存储在nodeCount中 const nodeCount = ...; const itemHeight = 30; // 每个节点大致占用的高度 const newHeight = Math.max(nodeCount * itemHeight, 300); // 最小高度300px // 获取图表容器 const chartDom = document.getElementById('chart-container'); chartDom.style.height = newHeight + 'px'; // 获取图表实例并重新调整尺寸 const myChart = echarts.init(chartDom); myChart.resize(); ``` ### 5. 其他建议 - **缩放与平移**：对于大型Graph图，建议启用`roam: true`（允许缩放和平移），方便用户手动调整视图。 - **分步布局**：使用`layoutAnimation: true`（布局动画）使节点移动更平滑。 综上所述，解决Graph节点重叠的核心是合理配置力导向布局参数，并根据节点数量动态调整容器尺寸作为辅助措施。 §§相关问题§§ 1. 如何优化ECharts Graph图在大数据量下的性能？ 2. ECharts中力导向布局的参数（如repulsion, edgeLength）如何影响布局效果？ 3. 除了力导向布局，ECharts Graph还支持哪些布局方式？ 4. 如何处理ECharts节点标签重叠的问题？ </think>### ECharts Graph节点重叠解决方案 针对ECharts Graph关系图中节点重叠问题，以下是已验证的有效解决方案，结合了官方最佳实践和社区经验： #### 1. 动态调整容器尺寸（核心方案） ```javascript // 获取图表实例 const chart = echarts.init(document.getElementById('graph-container')); // 节点点击事件处理 chart.on('click', (params) => { if (params.dataType === 'node') { // 获取所有图形元素 const allElements = chart._chartsViews[0]._data._graphicEls; // 计算所需高度 (30px/节点) const nodeCount = new Set(allElements).size; const minHeight = 400; // 最小高度 const newHeight = Math.max(nodeCount * 30, minHeight); // 更新容器尺寸 document.getElementById('graph-container').style.height = `${newHeight}px`; chart.resize({ height: newHeight }); } }); ``` **原理**：根据实际节点数量动态计算容器高度，确保有足够空间展示节点[^1][^2]。 #### 2. 力导向布局参数优化 ```javascript series: [{ type: 'graph', layout: 'force', force: { repulsion: 300, // 增大节点斥力 edgeLength: 150, // 增加边长度 gravity: 0.01, // 减小向心力 friction: 0.6, // 增加摩擦力 preventOverlap: true, // 启用防重叠 nodeSize: 40 // 设置碰撞检测尺寸 }, // ...其他配置 }] ``` **关键参数**： - `repulsion`：值越大节点间距越大（推荐300-800） - `preventOverlap`：必须设为true启用防重叠 - `nodeSize`：需大于实际节点尺寸 #### 3. 辅助优化技巧 1. **缩放功能**： ```javascript roam: true, // 启用缩放平移 scaleLimit: { min: 0.5, max: 3 } // 设置缩放范围 ``` 2. **节点大小自适应**： ```javascript symbolSize: (val) => Math.min(val[2] * 2, 30) // 根据数据动态调整大小 ``` 3. **标签避让**： ```javascript label: { show: true, position: 'right', avoidOverlap: true // 标签防重叠 } ``` #### 4. 大数据量优化 ```javascript // 启用WebGL加速 const chart = echarts.init(dom, null, { renderer: 'canvas', useDirtyRect: false }); // 设置渐进渲染 animationThreshold: 2000, // 超过2000节点启用简化动画 ```
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值