這兩天需要用到echarts渲染大數(shù)據(jù)? 百度了不少? 翻來(lái)覆去就是以下三種方法 現(xiàn)總結(jié)一下
言歸正傳肩豁，本次研究目的是通過(guò)echarts加載大數(shù)據(jù)量數(shù)據(jù)必尼，測(cè)試數(shù)據(jù)點(diǎn)為24w左右娜遵，最終調(diào)試結(jié)果诞挨，加載一條曲線在2.5s左右，同時(shí)加載兩條曲線為5s以為鳖眼，8條曲線為10s以內(nèi)，需前后端結(jié)合達(dá)到快速加載目的即纲。
前端部分
一具帮、考慮多曲線同時(shí)加載，建議使用異步請(qǐng)求加載低斋，結(jié)合ECharts大數(shù)據(jù)加載方式（appendData蜂厅，注意ECharts版本需3.0以上）：
主要支持ECharts GL，基礎(chǔ)版本只支持 散點(diǎn)圖（scatter） 和 線圖（lines）膊畴，注意是lines掘猿，不是line！（看錯(cuò)一個(gè)單詞還試了半天的）
function appendDataToChart(id,index){
$.post(ext.contextPath +"/work/mpoint/getHistory4ECharts.do",{bizId:companyId,mpointCode:id,sdt:beginTimeStore1,edt:endTimeStore1},function(data){
//后端構(gòu)造對(duì)應(yīng)數(shù)據(jù)
mychart.appendData({
? ? ? ? ? ? seriesIndex:index,
? ? ? ? ? ? data : data
? ? ? ? })
? ? ? ? //刷新
? ? ? ? mychart.resize();?
},'json');
}
其中seriesIndex為serial序列號(hào)唇跨，data數(shù)據(jù)格式為[[“2017-07-01 01:00”, “6.7488”],[“2017-07-01 01:00”, “6.7488”]]
appendData具體使用方法請(qǐng)參考ECharts官網(wǎng)API
同時(shí)為提高加載速度需設(shè)置禁用動(dòng)畫稠通，
可設(shè)置dataZoom 局部加載，
設(shè)置加載其它屬性（具體作用請(qǐng)參考ECharts官網(wǎng)API）
后端部分
建議使用Redis緩存處理买猖，調(diào)試24w條數(shù)據(jù)使用Redis可以提速接近1s改橘，也可以使用HBase（尚未測(cè)試）。
接口代碼
/**
* 獲取測(cè)量點(diǎn)歷史曲線數(shù)據(jù)
* */
@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;
}
此處接口返回?cái)?shù)據(jù)直接使用EChats需要格式玉控，減少前端組裝數(shù)據(jù)耗時(shí)飞主；使用@ResponseBody可直接返回json，也可使用ModelAndView高诺，建議Json轉(zhuǎn)化時(shí)使用FastJson（速度快）碌识。
————————————————
版權(quán)聲明：本文為CSDN博主「王小壞xp」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議虱而，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明筏餐。
原文鏈接：https://blog.csdn.net/mulangqq/article/details/103595059
二、sampling 降采樣渲染
官方提供的方法牡拇，親測(cè)有效魁瞪，降采樣直接取平均值穆律，肉眼可見的app不會(huì)卡死，兩萬(wàn)五千多個(gè)點(diǎn)渲染速度約3s（app渲染時(shí)間不好監(jiān)控佩番，沒有截圖）
三众旗、更改datazoom的startValue、endValue
這么做的目的就是一次性渲染一部分?jǐn)?shù)據(jù)趟畏，相當(dāng)于分段渲染贡歧，查看的時(shí)候拖動(dòng)datazoom，也是分段查看赋秀，效果沒有一次性看整體的好利朵，不過(guò)也是看項(xiàng)目需求。
