最近在用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的递归多少个是极限，这个谁知道呢，但是尽量把要绑定的响应式对象做的尽量结构浅一些，因为大家也知道递归遍历，层次越深速度越慢，再给每一个都绑定响应式，会花费大量的时间，回归正题，别把echarts绑定到实例上，否则很卡。
第三个点是数据的优化点，数据的渲染名字，大小这些渲染到页面很耗费性能，如果不需要这些就把他们都去掉，速度提升一大截，
还有在beforeDestory里面加上__echats.clear()和__echats.clear()
就像这样，因为上面说过的echarts绑定在了export default 上面成为了全局变量，所以得写的特殊些，不要被别人的定义给换掉，
第四个点是配置项的优化，首先动画属性必须去了animation:false ， 其次是体验上面的优化，可以在series里面添加属性zoom(缩放：初始值是1，但是随着数据大量渲染，屏幕放不下，导致图例在加载的过程中缩放会很卡顿，而且力导向图的加载很好看，像孔雀开屏一样，也不容错过)，lenged里面的formatter可以自定义分类名称，接受一个回调，这个回调就是刚开始定义的categorys里面的分类数组遍历过后的每个结果，return后面跟要返回的名字就可以
第六个api上面的优化，建议在每个setOptin之前都加上.clear方法
然后每个绑定on之间都需要用off解绑避免重复绑定
顺便讲一下添加节点和关闭节点的思路，具体代码需要大家去细写，
准备工作，两个一摸一样且没有关系的数组，备用（方式可以使用lodash或者用json的方法去深拷贝）
用于渲染数组简称玄鼠，用于原始查询数组简称元鼠
添加节点方法会返回一个当前节点的对象值，这时候需要后端去配合在每个有下集节点的对象里面添加进去一个下集节点集合的数组， 拿着当前节点的下级数组遍历，在当前遍历的item中再次遍历玄鼠，两两遍历找出相同的对象在玄鼠中的index，使用方法findIndex方法，这个方法会直接返回找到的下表，然后使用splice(index,1)方法删除当前下级方法
删除节点方法和添加节点方法一样，把玄鼠换成元鼠就可以了，找到一个就添加到玄鼠里面一个，
未解决掉的坑点？:首次加载暂无问题，二次之后加载越来越卡，目前解决办法是使用location.reload方法进入时进行刷新，
这样是下下下之策，违背了spa应用的方式，未完待续。。。。
