echartカスタム浮遊枠の表示

最近はechartsの地図機能を使っています.業務需要は前の5つの具体的な情報を表示し、順番に表示します.まず順番に表示する問題を解決します.

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]
        }
    },

上のコードは設定された浮遊枠の位置と表示された内容です.
表示内容の制御は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