本文记录了一次使用Echarts关系图时遇到的性能问题及解决方案。在处理大量数据时，Echarts 5.0以上的版本提供了优化。避免将Echarts实例绑定到Vue的this上，以减少响应式带来的性能损失。数据优化包括去除不必要的渲染属性，以及在销毁时使用$.echarts.clear()。配置项方面，禁用动画和调整缩放选项能提升加载速度。此外，通过.on().off()防止重复绑定事件，并介绍了添加和删除节点的思路。然而，目前二次加载仍存在卡顿问题，临时解决方案是使用location.reload()刷新页面。
最近在用echarts做需求的时候用到了其中的关系图类型的力导向图，因为之前也用到过多次，但是本次开发遇到了很多问题，记录下来，以备后看.
需求很简单，要展示关系，开始开发也很快 大概用了一个上午(熟悉关系图的数据以及配置项)
里面有三个大点:
1、数据，nodes里面主要用于显示的的有name 这个是展示标签需要用到的,catecory是需要在legend分类里面来进行分类的，id最关键了 一般都是通过id进行线的连接 ，而不是用name
2、links ，主要注意的点是字符串和数字两种类型都可以使用，但是如果要做节点点击缩放功能的话必须要是字符串类型的，否则就会出现节点错连的未知bug。
3、cotegorys， 这个暂时没什么好讲的
刚开始做的时候因为数据量不是很多所以没有考虑到几千条数据的情况，所以在跟后端进行联调的时候问题才暴露出来，节点渲染四五千个 光加载就把浏览器cpu占满，如果要做echats数据比较多的展示时，第一件事就是要把echarts升级到5版本以上，因为5版本做了很多优化，三版本的echarts直接被卡死，第二件事是不要把echarts创建的初始化实例放到框架身上 比如vue的this身上，因为vue的响应式方式会深度递归导致性能很差。
插播一个题外话，vue的递归多少个是极限，这个谁知道呢，但是尽量把要绑定的响应式对象做的尽量结构浅一些，因为大家也知道递归遍历，层次越深速度越慢，再给每一个都绑定响应式&#
最低0.47元/天 解锁文章
扫一扫
2157
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
