使用ECharts加载大数据量数据

这两天需要用到echarts渲染大数据  百度了不少  翻来覆去就是以下三种方法 现总结一下

言归正传，本次研究目的是通过echarts加载大数据量数据，测试数据点为24w左右，最终调试结果，加载一条曲线在2.5s左右，同时加载两条曲线为5s以为，8条曲线为10s以内，需前后端结合达到快速加载目的。

前端部分

一、考虑多曲线同时加载，建议使用异步请求加载，结合ECharts大数据加载方式（appendData，注意ECharts版本需3.0以上）：

主要支持ECharts GL，基础版本只支持 散点图（scatter） 和 线图（lines），注意是lines，不是line！（看错一个单词还试了半天的）

function appendDataToChart(id,index){

$.post(ext.contextPath +"/work/mpoint/getHistory4ECharts.do",{bizId:companyId,mpointCode:id,sdt:beginTimeStore1,edt:endTimeStore1},function(data){

//后端构造对应数据

mychart.appendData({

            seriesIndex:index,

            data : data

        })

        //刷新

        mychart.resize(); 

},'json');

}

其中seriesIndex为serial序列号，data数据格式为[[“2017-07-01 01:00”, “6.7488”],[“2017-07-01 01:00”, “6.7488”]]

appendData具体使用方法请参考ECharts官网API

同时为提高加载速度需设置禁用动画，

可设置dataZoom 局部加载，

设置加载其它属性（具体作用请参考ECharts官网API）

后端部分

建议使用Redis缓存处理，调试24w条数据使用Redis可以提速接近1s，也可以使用HBase（尚未测试）。

接口代码

/**

* 获取测量点历史曲线数据

* */

@RequestMapping("/getHistory4ECharts.do")

@ResponseBody

public List getHistory4ECharts(HttpServletRequest request,Model model,

@RequestParam(value = "bizId") String bizId,

@RequestParam(value = "mpointCode") String mpointCode,

@RequestParam(value = "sdt") String sdt,

@RequestParam(value = "edt") String edt) {

List result = new ArrayList<>();

try{

StringBuilder whereStr= new StringBuilder();

whereStr.append(" where MeasureDT >= '");

whereStr.append(sdt);

whereStr.append("' and MeasureDT<= '");

whereStr.append(edt);

whereStr.append("' order by MeasureDT");

List list = mPointHistoryService.selectListByTableAWhere(bizId,"[TB_MP_"+mpointCode+"]",whereStr.toString());

String[] item ;

for (MPointHistory mPointHistory : list) {

item = new String[2];

item[0]=mPointHistory.getMeasuredt().substring(0, 16);

item[1]=mPointHistory.getParmvalue().toString();

result.add(item);

}

} catch (Exception e) {

        // TODO: handle exception

    e.printStackTrace();

    }

        return result;

}

此处接口返回数据直接使用EChats需要格式，减少前端组装数据耗时；使用@ResponseBody可直接返回json，也可使用ModelAndView，建议Json转化时使用FastJson（速度快）。

————————————————

版权声明：本文为CSDN博主「王小坏xp」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/mulangqq/article/details/103595059

二、sampling 降采样渲染

官方提供的方法，亲测有效，降采样直接取平均值，肉眼可见的app不会卡死，两万五千多个点渲染速度约3s（app渲染时间不好监控，没有截图）

三、更改datazoom的startValue、endValue

这么做的目的就是一次性渲染一部分数据，相当于分段渲染，查看的时候拖动datazoom，也是分段查看，效果没有一次性看整体的好，不过也是看项目需求。