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] + '
' + 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中获取，在配合计时器就能实现轮播自定义的悬浮框的内容了

转载于:https://www.cnblogs.com/wyongz/p/11114486.html