这两天需要用到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<String[]> 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<String[]> 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<MPointHistory> 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，也是分段查看，效果没有一次性看整体的好，不过也是看项目需求。
