echarts关系图自定义节点坐标相互影响的问题

原创

已于 2023-03-23 11:06:58 修改 · 2.2k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript

于 2023-03-22 11:52:09 首次发布

在使用Echarts的无布局（layout:none）关系图时，修改节点数据的x或y值会导致图表整体移动。由于关系图没有坐标轴，其位置基于节点数据的最大和最小值。通过在数据中添加basepoint固定图表坐标尺寸，可以防止节点位置因数据改变而变动。解决方案是在图表的四个角设置basepoint，限定节点坐标在特定范围内，确保坐标轴大小不变，从而稳定节点位置。

问题现象：

使用的是echarts是 <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
使用echarts关系图的layout: "none"布局，当修改节点数据们中最小或最大的x或y值时，整个图表移动。
问题分析：(可能的原因)
关系图图表不是典型的二维图表，没有坐标轴，当然可以通过

  xAxis: {
   
   
    show: true,
    type: 'value',
    min: 0,
    max: 1000,
    axisLabel: {
   
   
      show:

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

晨灰ash2

关注关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

Echarts 展示——自定义折线图的拐点与图标

虎康的博客

04-02

1887

如图所示需要自定义节点的图标展示。这里是我的几个图片转出来的svg。

Echarts Graph关系图优化显示

用生命研发技术

10-12

2960

Echarts Graph关系图优化显示一、修改前效果二、演示代码三、解决方式四、修改后效果一、修改前效果节点很多（项目上的更多，而且还在持续增加），如果对节点进行操作，需要进行放大，但也会引来另一个问题，节点也随之放大默认效果放大后效果二、演示代码 <!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> </head> <bo

1 条评论您还未登录，请先登录后发表或查看评论

1 条评论

weixin_40001424 2023.08.02
我最近也遇到了这个问题，非常感谢，终于找到一个解决办法了

vue2 eCharts实现自定义节点图标 graph关系图

weixin_50606255的博客

02-05

2358

vue2 eCharts实现自定义节点图标 graph关系图

echarts动态关系图示例

11-02

echarts动态加载关系图示例，三层结构，中心关系子层，子层再次关系子层。echarts动态加载关系图示例，三层结构，中心关系子层，子层再次关系子层。

echarts 关系图 graph 节点图动态设置x/y坐标

愿你走过半生，归来任是少年。

11-28

1万+

data: [ { name: 'Node 1', x: 300, y: 300 }, { name: 'Node 2', x: 800, y: 300 }, { name: 'Node 3', x: 550, y: 100 }, { name: 'Node 4', x: 550, y: 500 } ], // links: [], links: [ { source.

echarts关系图批量导出想要的坐标节点

dbeidouxingf的博客

03-22

824

给节点添加graphic类，注意要在基础的setOption上重新setOption。在拖拽事件onPointDragging中。找到更新的数据，批量导出新数据

查看 echarts 关系图的每个 node 的 xy 坐标

Fu_Tianshu的博客

09-25

1万+

一段 echarts 关系图代码 test.html &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt

vue+echarts实现可拖动节点的折线图（支持拖动方向和上下限的设置）

10-17

在本文中，我们将探讨如何使用Vue.js和ECharts库来创建一个可拖动节点的折线图，并且支持拖动方向和上下限的设置。首先，我们要了解Vue和ECharts的基本概念。 Vue.js是一个轻量级的前端JavaScript框架，它采用组件...

echarts人物关系图

12-04

ECharts是一款由百度开源的，基于JavaScript的数据可视化库，它提供了丰富的图表类型，包括柱状图、折线图、饼图、散点图、地图等，同时也支持自定义图表。在众多图表类型中，人物关系图是一种用于展示人际关系、...

ECharts图表插件(4.x版本)使用（一、关系图force节点显示为自定义图像/图片，带分类选择）...

aoqiao1146的博客

11-23

1498

导读 ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。本篇探讨的是ECharts关系图中节点显示为自定义图像，对应所用技术点：Asp...

echarts关系图(力引导)拖动节点不还原位置

01-03

echarts关系图(力引导)拖动节点不还原位置,在init创建时第三个参数对象添加myOpts_:{draggableFixed_:true}即可,如: var mychart = echarts.init(dom,null,{myOpts_:{draggableFixed_:true}});创建一个拖动不还原的力引导关系图(需要 type: 'graph',layout:'force',draggable :true,且所有节点fixed:true)

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关系图谱分析节点位置不动

weixin_43239880的博客

03-17

1955

echarts关系图谱分析节点位置不动因为项目中人物的关系比较多，所以需要根据某个人去推演出于其他人的关系，并且可以继续推演。难点： 1.后台不返回节点位置，需前端自己更新节点位置。2.在推演出数据之后，节点的位置不能发生改变。3.单个节点需要可以拖动并且记录位置。技术：echarts。

echarts_自定义graph关系图

热门推荐

编程知识分享，主打前端

01-13

3万+

自定义路径图参考自定义测试函数处理定义数据类型(树状结构)处理坐标x、y封装成组件效果参考 ecahrts官方文档 自定义测试探索：关系图的关键起点终点线条其次标签文字线条标签配置关键: { title: { text: "2021->2022 我的职业", color: "#fff", x: "left", width: 120, height: 80,

chart 完成拓扑图单节点拖拽不影响其他节点位置

菜鸡奋斗ing的博客

04-22

3962

就是做这种的功能，箭头原本是可以动态重复移动的，但不知道哪里问题导致没箭头了，然后补了个edgeSymbol: ['','arrow'], 字段，才增加了箭头。拖拽某个节点，只有关联到的线条会跟着变动其他的节点位置不变。参考 https://gallery.echartsjs.com/editor.html?c=x8Fgri22P9 https://echarts.baidu.com/exam...

echarts graph（关系图），force（力引导布局），circular（环形布局）

桂秋拾貳

03-21

2914

echarts graph类型 关系图，文章内我展示了数据结构，option的内容，以及成品展示，希望可以帮助到大家学习或工作当中用到

解决ECharts关系点击图例节点偏移问题

ggjklncffd的博客

07-16

2010

因为ECharts会开启自动布局算法所以在点击图例之后又将对应的图例进行的算法布局，所以才会导致数据偏移。如果在没有设置x和y的坐标会出现这个问题。1.设置layout为none （禁止开启算法布局）2.添加x和y坐标(如下所示)

echarts关系图(graph) 节点拖拽无法固定解决办法

freedom_zzz的博客

07-01

1万+

echarts关系图(graph) 节点拖拽无法固定解决办法方法一：echarts 绑定 mouseup事件 //节点拖拽固定 myChart.on('mouseup', function (params) { var option = myChart.getOption(); option.series[0].data[p...

echarts散点图中的点不固定问题地图移动点也会动解决

m-dididid的博客

11-29

1906

![在这里插入图片描述](https://img-blog.csdnimg.cn/20191129123912554.gif 像这样的问题解决; 在series中设置 animation: false 就ok啦

Echart graph图做人物关系图自定义坐标