范培忠 2018-05-10
需求描述:使用热力图显示某活动的日期分布强度,并当鼠标移动到某日期方块时,显示该日的明细活动信息。
因为显示的时间周期以年为单位,一次性加载全年明细数据不太现实。故选择鼠标移动至某日期时,后台异步加载明细数据。加载期间显示Loading,待加载完成后,显示明细信息到echarts图表上。
另外发现echarts会在鼠标在同一个日期小方块上每移动1px时都会触发tooltip的加载过程,鼠标随便一划拉就会向后端发送几十次加载请求,会导致不必要的性能占用,故在自定义加载方法细节上进行了优化。
还有就是鼠标在同一个日期小方块上每移动1px时还会触发callback方法重新显示tooltip,导致画面闪烁,故在echarts tooltip接口处也需要进行简单的判断优化。
最后Echarts在鼠标移入的时候会触发两次事件,其中一次会得到空白数据,不清楚是否为bug,故需对触发时的data进行校验(typeof(date) === "string")。
关键代码如下,文章最后附上实际效果GIF演示。
异步加载数据:
var bReady = false;
var cTooltip = "";
var sLastDateInputofDoAjaxGetTooltip = "";
function doAjaxGetTooltip(date) {
bReady = false;//设置状态为不可用
if(sLastDateInputofDoAjaxGetTooltip === date){
bReady = true;
return;
}else {
sLastDateInputofDoAjaxGetTooltip = date;
}
if (typeof(date) === "string") {
$.ajax({
type: "post",
url: $("#contextPath").val() + "data/records/string/" + $("#personId").val() + "/" + date,
contentType: "application/x-www-form-urlencoded;charset=utf-8",
success: function (data) {
cTooltip = data;
},
error: function (data) {
alert("error");
alert(JSON.stringify(data));
}
});
}
bReady = true;//不管有没有内容,状态都要改回去
}
Echarts Option的tooltip片段:
tooltip: {
formatter: function (params, ticket, callback) {
//优化显示,防止闪烁
if(sLastDateInputofDoAjaxGetTooltip === params.data[0]){
return cTooltip;
}else {
doAjaxGetTooltip(params.data[0]);//异步准备数据
//定时检查数据是否完成准备bReady, tooltip
var itv = setInterval(function () {
if(bReady === true){
callback(ticket, cTooltip);
window.clearInterval(itv);//停止检查
}
}, 100);
return "Loading";
}
}
}
实际显示效果:
可见在小方块内移动鼠标时,加载的内容只会跟随,并不会出现闪烁或再次加载。