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

巴特西

echarts自定义悬浮框的显示

最新文章

热门文章