Echarts树状图节点收缩后线条残留的问题

bubble____

已于 2022-10-12 18:05:30 修改

阅读量1.1k

点赞数 2

分类专栏： Bug

于 2022-09-02 18:40:10 首次发布

本文链接：https://blog.csdn.net/bubble____/article/details/126668702

版权

Echarts 树状图线条残留 Bug修复版本问题

关键词由CSDN通过智能技术生成

Bug 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

问题：

Echarts树状图节点收缩后线条残留的问题。

解决方案：

echarts.min.js新版本Bug，博主的换成5.0.0版本即可解决。

经验：

1. 大问题肯定是自己代码逻辑，奇奇怪怪的小Bug很大概率是所使用工具的问题。
2. 旧版本真的稳定好用。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

bubble____

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
Echarts树状图节点收缩后线条残留的问题

解决方案
复制链接

扫一扫

专栏目录

echarts，tree 图，节点收缩，option 配置即可

01-10

echarts tree目前只能用initialTreeDepth来控制显示的层数，不能逐个控制每个节点的收缩放开状态，很不方便。因此我在配置项里面增加了一个字段mcHereShow（命名觉得不美观，可以全部替换成你要修改的字段），在配置项里面与"name"同级的位置，配置上mcHereShow：true 或者false即可逐个控制该节点的展开和收缩，子节点也是同样层级的配置，如：var data ={ "name": "核心交换机", "children": childrenData， 'symbolSize': 47, 'mcHereShow':true } series: [ { type: 'tree', data: [data], ...... }

echarts tree 点击节点收缩(关闭子节点)功能实现

08-18

实现echarts中的树形tree图的节点收缩功能,子节点最多支持扩展9个,通过value作为层级的标识.能够完美实现子节点的缩放功能.

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

Vue3使用Echarts的关系图, 连接线残留的问题

qq_65079752的博客

06-25

253

关系图数据隐藏后，连接线一直存在，看了很多文章提供的解决问题，都是在setOption中设置第二个参数为true，但是一直没有生效，最后挨个排查发现是响应数据的问题，ref定义的数据.value没有反应，改为reactive定义的数据后成功解决问题。

echarts节点折叠实现

SongJingzhou的博客

04-02

6923

问题描述：工作用到echarts制作图表（graph关系型图），需要实现点击节点后隐藏其节点下的所有的子节点，而echarts官方并没有可用方法使用思路：首先获取点击节点的操作事件，然后获取节点的所有子节点，将这些子节点全部保存在自己定义的一个全局数组变量中，并且将原数组中的这些数据删除（如果不删除原数组的数据，不管怎么设置结果都是图表不发生任何变化，这是一个大坑！！！），然后重新渲染图表；而显示...

Vue3.x使用Echarts关系图, 连接线残留问题(已解决)

rita_bin的博客

04-11

637

然后把ref的 .value全都去掉, 用reactive的方式即可, 残留的线就没有了!看了好多人的文章, 都是setOption第二个参数加true;加true这个应该是可以解决的, 但是我犯二了;我用的ref操作的Echarts的Dom。应该用reactive来操作。很简单的问题, 记录一下;

【已解决】echarts有残留的连线

小鱼干儿的博客

07-21

2700

echarts有残留的连线前言解决方法解释前言今天做好了一个图，每次查询显示对应数据的echarts图，发现了bug，当我第一次查询时应该有5条线，第二次查询时应该有4条线，但第二次显示在页面中的却有5条线，应当不存在的那条线是第一次查询时残留下来的。解决方法在每一次绘制前我的数据都有先置空再填充，但依旧会残留一条线，后来发现，在设置option的时候加上true即可解决： this.myChart.setOption(this.option, true) 解释先看一下echarts的官方文档中的

Echarts 树状图 线条残留问题

秋雨夕照的博客

01-13

799

当树状图中，图形数量增多，超过默认值，或者animation属性为False时，都会导致动画关闭。这时，如果点击一个节点收缩子树，节点会消失，而线还在。

关于echarts数据变化残留数据问题

sinat_41694829的博客

08-04

2130

利用echarts加载图表的时候，当你切换图表的查询条件的时候，会发现有上次数据残留，所以这时候需要clear以下图表，再重新加载就好了 let barV = this.$refs.banlishixiaoPeople; this.chartBar = echarts.init(barV); this.chartBar.clear();//主要是这行代码 this.chartBar.setOption(option); ...

echarts树图实现点击收缩子节点

05-02

ECharts是一款由百度开发的开源JavaScript图表库，它提供了丰富的图表类型，如柱状图、折线图、饼图以及我们这里讨论的树图。ECharts基于SVG和Canvas技术，支持跨浏览器和跨平台使用，并且遵循MIT开源协议，允许自由...

Echarts 实现树状图的展示与编辑示例

07-14

echarts 实现树形图的增加，编辑，删除操作示例内含静态JSON数据文件flare.json 重要的页面html文件,echart_demo.html 功能说明：当鼠标移动到节点上时，会有节点描叙信息提示框。当在节点处右键时，会弹出右键...

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

01-03

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

echarts折线图数据残留解决办法

weixin_60842212的博客

07-18

590

echarts折线图数据残留解决办法

Echarts实现一键取消 / 显示所有曲线

qq_36122157的博客

12-17

1866

在展示的曲线，也就是legend很多的时候，不太好只展示其中几条。配置中是可以默认设置初始化是否展示，但不适用于全选和全不选的场景。研究了文档后发现，可以通过修改配置，然后再次调用setOption方法实现。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>...

Echarts树图，点击根节点整个图消失

m0_48639280的博客

08-19

647

那么自己换一个版本，据说官方已经修复，换一个高一点版本即可。------------------------记录。开启roam：true(移动和缩放)后，要是不想换版本，就关掉移动缩放功能。echarts.js（4x版本）点击根节点进行折叠树图会消失。

记录使用vue2+vue-echarts树状图切换时，连线混乱的问题

qq_40186915的博客

05-31

262

1、给v-chart增加ref。

Echarts绘制树图遇到问题与对应解决方案

哎呦的博客

10-13

2480

Echarts绘制树图遇到问题与对应解决方案

05_ Electron 自定义菜单、主进程与渲染进程通信

最新发布

所学所思

08-09

433

单独写在一个 js 文件中，然后再在主进程中引入labe: "文件",submenu: [label: "新建文件",},label: "编辑",submenu: [label: "复制",},submenu: [// main.js// 1、引入初始化remote 模块width:800,})// __dirname 表示获取我们当前目录， path.join 会将两个参数合并成 d://electrondemo/index.html// 打开调试模式。

echarts 树状图节点后面加元素

06-10

要在 Echarts 树状图的节点后面添加元素，可以通过 Echarts 的 `graphic` 组件和 `renderItem` 函数来实现。首先，需要在树状图节点的数据中添加一个 `symbol` 属性，用于指定节点的图标类型。然后，可以在 `renderItem` 函数中根据节点的数据来绘制节点的图标和后面的元素。以下是一个简单的示例代码，可以在树状图节点后面添加一个数字元素： ```javascript option = { series: [{ type: 'tree', data: [{ name: '节点1', symbol: 'rect', children: [{ name: '节点1-1', symbol: 'rect' }, { name: '节点1-2', symbol: 'rect' }] }, { name: '节点2', symbol: 'rect' }], // 渲染节点 renderItem: function(params, api) { var nodeData = params.node.data; var symbolType = nodeData.symbol || 'circle'; // 绘制节点图标 var symbolPath = api.symbolPath({ type: symbolType, shape: { r: 10 }, style: api.style({ fill: '#fff', stroke: '#000', lineWidth: 2 }) }); var group = new echarts.graphic.Group(); group.add(symbolPath); // 绘制节点后面的数字元素 var value = nodeData.value || ''; if (value !== '') { var text = new echarts.graphic.Text({ style: { text: value, font: 'bold 12px sans-serif', fill: '#000' }, position: [symbolPath.position[0] + 20, symbolPath.position[1]] }); group.add(text); } return group; } }] }; ``` 在上面的示例代码中，树状图节点的数据中添加了一个 `symbol` 属性，用于指定节点的图标类型。在 `renderItem` 函数中，根据节点的数据来绘制节点的图标和后面的数字元素。如果节点的数据中有 `value` 属性，则绘制一个文本元素，显示该属性的值。除了数字元素，也可以添加其他类型的元素，比如图片、线条等。具体的使用方式可以参考 Echarts 的官方文档。