echarts自定義懸浮框的顯示

最近在使用echarts的地圖功能 ，業務需求是顯示前五的具體信息，並且輪流顯示，首先解決輪流顯示的問題

var counta = 0; //播放所在下標
var mTime = setInterval(function () {
    chinamap.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: counta
    });
    counta++;
    if (counta > 4) {
        counta = 0;
    }
}, 2000);

以上代碼是輪播顯示懸浮框的，但是設置這個顯示的條件是得配置tooltip配置項

tooltip: {
        // alwaysShowContent: true,
        position: ['30%', '80%'],
        formatter: (p) => {
            console.log(p.data.coords[2].split(' '))
            return p.data.coords[2].split(' ')[0] + '<br/>' + p.data.coords[2].split(' ')[1]
        }
    },

以上代碼是設置的懸浮框的位置，以及顯示的內容，return就是顯示的內容

顯示內容的控制則需要在data中進行配置，我是在函數中根據data和地理位置統一設置的

function formtGCData(geoData, data, srcNam, dest) {
    var tGeoDt = [];
    if (dest) {
        for (var i = 0, len = data.length; i < len; i++) {
            if (srcNam != data[i][0].name) {
                tGeoDt.push({
                    coords: [geoData[srcNam], geoData[data[i][0].name], (i + 1) + ' ' + data[i][0].name + ' ' + data[i][0].value]//放入屬性值來控制提示框的內容
                });
            }
        }
    } else {
        for (var i = 0, len = data.length; i < len; i++) {
            if (srcNam != data[i][0].name) {
                tGeoDt.push({
                    coords: [geoData[data[i][0].name], geoData[data[i][0].name], data[i][0].value]
                });
            }
        }
    }
    // console.log(tGeoDt)
    return tGeoDt;
}

此處的返回的就是對應tooltip中的data，可以在處理數據的時候放入對應想顯示的信息，然后在tooltip中獲取，在配合計時器就能實現輪播自定義的懸浮框的內容了