如何同时快速的为table表格和echarts图形准备数据

Question

从数据库中查询得到的数据事行级数据的集合，但是echarts图形的数据源却是列级的数据集合，那么如何快速的为两个展现类型准备好数据呢？

       比如，我从数据库中查询得到得数据是Data是List<Map<String,Object>>，属性A，属性B分别是我查询得两个字段，然后这个List数据就可以直接给页面table去渲染，但是echarts要得数据却是属性A的List<Double> 和属性B的List<Double>.目前，我的处理方式是得到去遍历Data，取出每一个Map，得到A和B添加到各自的List中。这样我就只用查询一次数据库就可以了，但是我发现这样的方法在数据量越多时，效率越低。我试验了一下，直接在数据库中查询，1660条数据，只用了10ms，但是，通过页面请求，得到结果再遍历再返回页面，花了近300ms，去除网速的因素，也有20多倍的差距。

       不懂就问，小伙伴们有这种需求经历吗？你们是怎么加快这种响应的？多次查询吗？

Answer 1

典型的前后端交互问题，有以下建议：

1、后台发回来的数据，最好是直接赋值就能使用的，不需要处理的。比如这个你可能数据重构为‘ A的List<Double> 和B的List<Double>. ’之后，A，B正常显示了。但是一番操作你又要发回后台，就得把数据格式整理为 “ List<Map<String,Object>> ”。同一数据，要是页面交互频繁，代码繁琐，维护的人就哭了

2、既然你说了请求只用10ms，数据复杂的情况下可以拆分多个请求啊。没必要一次性整个页面全部加载。

3、数组的循环尽量别用 for forEach 遍历然后 找到DOM元素，操作实体DOM最费内存。js除了操作元素之外，就是循环最费内存，不慢才怪。ES6不是更新好久了么。filter ，map 不都挺好用的，建议看一看

 

真的不建议前端做数据重构格式，实在不行，你请人吃顿饭把，，后端真的是大哥哇。。