使用ECharts加载大数据量数据

使用ECharts加载大数据量数据

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

前端部分

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

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（速度快）。