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

原创 已于 2023-03-23 11:06:58 修改 · 2.2k 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 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元/天 解锁文章
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
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 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;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 2915
echarts graph类型 关系图，文章内我展示了数据结构，option的内容，以及成品展示，希望可以帮助到大家学习或工作当中用到
解决ECharts关系点击图例节点偏移问题
ggjklncffd的博客
07-16 2011
因为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图做人物关系图自定义坐标
最新发布
10-30
在使用 ECharts 的 graph 图制作人物关系图时，可通过为节点数据设置 `x` 和 `y` 属性来实现自定义坐标。以下是具体步骤和示例代码： ### 1. 引入 ECharts 库 在 HTML 文件中引入 ECharts 库，可以使用 CDN 链接： ```html <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script> ``` ### 2. 创建 DOM 容器 在 HTML 文件中创建一个用于显示图表的 DOM 元素： ```html <div id="main" style="width: 600px;height:400px;"></div> ``` ### 3. 编写 JavaScript 代码 在 JavaScript 代码中，为节点数据设置 `x` 和 `y` 属性，示例如下： ```javascript // 初始化 echarts 实例 var myChart = echarts.init(document.getElementById('main')); // 定义节点和边的数据 var nodes = [ { name: '人物 A', x: 100, y: 100 }, { name: '人物 B', x: 200, y: 200 }, { name: '人物 C', x: 300, y: 100 } ]; var links = [ { source: '人物 A', target: '人物 B' }, { source: '人物 A', target: '人物 C' } ]; // 配置项 var option = { series: [ { type: 'graph', layout: 'none', // 不使用内置布局，使用自定义坐标 data: nodes, links: links, label: { show: true }, roam: true // 允许鼠标缩放和平移 } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); ``` 在上述代码中，`nodes` 数组中的每个对象代表一个人物节点，通过 `x` 和 `y` 属性指定了节点的坐标。`links` 数组定义了人物之间的关系。`layout` 设置为 `'none'` 表示不使用 ECharts 内置的布局算法，而是使用自定义坐标。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

晨灰ash2

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值