Echarts AJAX异步加载tooltip明细数据

范培忠 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";
        }
    }
}

实际显示效果：

　　可见在小方块内移动鼠标时，加载的内容只会跟随，并不会出现闪烁或再次加载。