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

最新推荐文章于 2022-06-23 14:59:25 发布
最新推荐文章于 2022-06-23 14:59:25 发布
阅读量7.7k 收藏 18
点赞数 6
分类专栏： JavaScript 前端 echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Fimooo/article/details/102853093
版权
前端 同时被 3 个专栏收录
27 篇文章 0 订阅
订阅专栏
JavaScript
19 篇文章 0 订阅
订阅专栏
echarts
4 篇文章 1 订阅
订阅专栏

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

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

冲鸭!

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

Fimooo
关注
  • 6
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
专栏目录
graph_demo:echarts图表引擎
05-17
graph_demo echarts 图表引擎
Echarts关系图实现两个节点连接同向的多条边（详细）
锵锵锵锵蒋的博客
01-29 4851
1、改源码 在Echarts官网上有很多关系图示例（传送门） 但是这些图两点之间最多两条边，并且方向相反。但是在社交网络分析作图时常常遇到两个人物（节点）之间存在多种关系且指向相同（方向相同的多边）。写代码过程中有意加多边然而出现覆盖现象，就算手动控制弧度也不会显示同方向边，而官方文档中并未提及相关代码。怀疑是源文件中有严格控制条件，经查阅echart源文件echarts.min.js，果然有剔除...
Echarts水管图标
10-16
Echarts做的水管图表，自适应，可控制管道内动态水流
Echarts的地图实现拖拽缩放同步功能（解决多层geo缩放、拖动卡顿问题）
06-14
Echarts的地图实现拖拽缩放同步功能（解决多层geo缩放、拖动卡顿问题），大屏项目显示云南省3D的地图，可拖拽缩放、地图打点、点击图标弹框等等功能。 ## 使用 - 启动调试服务: `npm start` - 构建 dist: `npm run build` ## 目录结构 - 应用配置: `src/app.js` - 路由配置: `src/routes.js` - 布局文件: `src/layouts` - 通用组件: `src/components` - 页面文件: `src/pages` ## 效果图 ![screenshot](https://img-blog.csdnimg.cn/db6034f6187c4a0fa6295af60c36803b.png)
Graph:两个顶点之间的最小边
04-28
图形 两个顶点之间的最小边
echarts datazoom 显示位置与坐标系会有重叠部分解决方案
menghuannvxia的专栏
03-22 7226
echarts中使用datazoom发现会与横坐标的值有重叠部分，如下： 仔细查阅echarts的配置项，发现了里面有个grid属性，可以控制绘制的图表和容器之间的距离，尝试设置： 发现成功了，效果如下： ...
echarts关系图多条连线
zcfzfc123456789的博客
07-01 6458
最近用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的中国地图去掉南海诸岛
Zxiuping的博客
04-04 1万+
geo: { map: "china", roam: true, zoom:1, //默认显示级别 scaleLimit:{min:0,max:3}, // 缩放级别 regions: [ { name: "南海诸岛", ...
基于echarts 3.8.4，tree图中，连线的颜色，可每条线独立设置
01-19
基于echarts 3.8.4开发的，直接使用这个js文件即可，定义在data层，myLinkStyle，指定节点位置，或者节点名称（名称不重复时），节点位置可参考我的博客 http://blog.csdn.net/wusefengye/article/details/79110195 ...
ECHARTS仪表盘IE8不兼容修复
11-30
工作中遇到一个问题，客户需要用IE8的浏览器，但是经过测试发现ECHARTS的仪表盘功能在IE8不能正常使用，经过调试后解决问题，希望可以帮助到大家。
解决echarts中饼图标签指示线重叠的问题
Kimser
11-09 4155
饼图中的series有个avoidLabelOverlap属性， avoidLabelOverlap:是否启用防止标签重叠策略，默认开启，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠。 var option = { tooltip: { trigger: "item", formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { //orient: "vertical",
Echarts5.* 关系图谱(relation graph)添加节点拖拽、点击节点高亮效果
zwf193071的专栏
06-23 6785
echarts关系图谱添加节点拖拽、点击高亮效果
echarts 关系图_ECharts关系图2
weixin_39833290的博客
11-21 782
1.效果图2.前端代码<template> <div class="echartLayout"> <div class="filter-item" style="margin-left: 2%"> <el-select clearable class="filter-item" placeholder...
echarts关系图谱交互实现
weixin_43239880的博客
02-23 981
echarts关系图谱交互实现 具体实现的效果如图（主要是使用了echarts的力引导图），主要是为了展现人与人还有人与物之间的关系。 如果你的项目只是用于展示的话，那么使用这个demo应该就能帮助到你。 demo地址： 但是如果你的项目不只是用户展示这部分的信息，还要求点击事件，并且要求可以用户自己手动去添加关系的话，那么你就应该需要下面这个demo了 实现效果：点击图标会显示具体该图标的信息（入人，则显示人的信息），点击关系线会显示关系线的信息，点击空白则是添加模板，默认是去添加微信的模板（这里的添
Echarts 关系图 两个节点同向的多条边实现
u012914342的博客
04-13 3009
效果预览：
echarts关系图配置，及超出范围处理 + a、b两个节点互相指向时线上的字重叠问题
Shimeng_1989的博客
05-27 6330
情景：由于人物关系复杂，可以有几个 ——几十个（上百个），所以固定范围内（如：500高度）可能放不下，或者太空。所以可以根据node节点（也可根据其他判断条件）来动态修改 div / canvas高度。如果还是超出（eg：节点或者关系多），可添加roam:true的属性实现可平移拖拽 / 缩放。（在下一节讲述） 效果如图： 数据： // 数据 let data = { nodes = [ // {symbol: 'image://http://127.0.0.1:8080
echarts+bmap（百度地图）的Demo
热门推荐
Fimooo的博客
11-07 2万+
好开心！自己的小demo照亮了别人！所以我又来记录一下最近的一个需求！ 捣鼓了一天，终于搞定了echarts结合百度地图，鉴于项目需求是基于html，非任何框架。 所以要下载资源js文件，用script标签引入。 所需支撑 1、echarts.js；2、bmap.js；3、jquery；4、百度地图adk（百度地图adk就是获取使用地图权限的编码，自行上百度地图SDK中注册申请一下即可~） 资源地...
echarts graph
最新发布
10-18
ECharts 是一个基于 JavaScript 的开源可视化库，可以用来制作各种类型的图表，如折线图、柱状图、饼图等等。它提供了丰富的配置项和交互功能，可以让用户轻松地定制自己想要的图表效果。 如果你想使用 ECharts 制作图表，可以先引入 ECharts 库，然后创建一个容器元素，最后通过 JavaScript 代码来配置和渲染图表。以下是一个简单的示例： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts Demo</title> <!-- 引入 ECharts 库 --> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> </head> <body> <!-- 创建一个容器元素 --> <div id="myChart" style="width: 600px;height:400px;"></div> <script> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('myChart')); // 配置项 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值