目录
前言
目前的项目中后端组的小伙伴已经设计好了api，在我成功请求数据渲染的时候出现了一个很严重的问题，由于数据项过多使散点渲染太慢，这样不能一次性渲染出点就会导致我之前做的刷选功能无法实现。这里出现的问题是：当调用echarts的实例接口dispatchAction()自动刷选时，散点会重新渲染，这样又回到了上一个问题，部分点还未渲染出来，而这时刷选已经结束，导致的结果就是刷选失败。
我们最终要做的一个很重要的功能就是要对刷选后的数据生成的小图表的相似性进行排序。这里，查找资料之后得到了当前我们使用的排序方法。
渲染过慢
这个问题大概纠结了有一周，由于刚开始问题定位不准确，还以为数据本身有问题（某项数据超出范围），仔细一看才恍然大悟，我之前的测试数据比目前的真实数据差了1000+的数据项，我通过二分法测出了一个临界值——2999（其实就是删一部分数据测试，再不停循环），当数据项超过这个值，渲染马上变慢，在此，问题终于定位。之后的几天便混迹各大论坛寻找解决方案。然而很不幸，大家似乎还没遇到这个问题，或者是解决方案没有公布，最后在C**N上找的两篇提到过这个问题的同学，但是却没有提到如何解决这个问题，在留言等待回复的几天后的中午突然想到了解决方案——设置多个series！So Easy！
一不小心扯多了，想出这样的解决方案实在是又兴奋又打脸。
没错，问题就是这么轻松的解决掉了。
对DOM节点重新排序
随便搜了一下，找到了几个实现方式，我仿照了其中一位的方法。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
let parentNode; //父节点 let children = parentNode.children; //子节点集合 //子节点保存在临时数组变量中，方便调用数组的接口 let temp = []; for(let i in children) { if(children[i].nodeType == 1) temp[i] = children[i]; } //通过比较每个distance属性来对DOM节点排序，这个属性我们在前面的将会对其赋值 temp.sort((a, b) => { return a.distance - b.distance }) //重新插入DOM树 temp.forEach(item => { parentNode.appendChild(item) }) |
主要代码和注释如上。有必要解释一点，我们使用appendChild()将原来的节点重新插入DOM树中，这个方法将当前DOM树中存在的节点插入当前DOM树某一个节点中时，会将这个节点先在DOM树中删除，然后又插入DOM树中。
