Ask for advice: how to make multiple sets of series data appear in the map suspension box of echarts?

is like this, we have a project, need echarts map function, everything else has been adjusted, but encountered a very troublesome problem: the map suspension box displays only one set of data by default, I have tried a lot of ways, but I have not been able to make the two sets of data appear in the suspension box, here is my code. Ps: I output the first set of data in tooltip. Params, found that the output is also the first set of data.

$.get("data/hangzhou.json", function (hangzhoujson) {        //json
    echarts.registerMap("hangzhou", hangzhoujson);    //

    chart.setOption({
         title: {
             text: "",
             subtext: "",
             textStyle:{
                 color:"-sharpfff"
             }
         },
        legend:{
             orient: "vertical",
             left: "left",
             data:["1","2"]
        },
        tooltip: {        //
            trigger: "item",
            /*formatter:function(params, ticket, callback){
//                return params.name+":"+params.value
//                console.log(params);
            },*/
            
                
        },
        visualMap: {            
            min: 0,
            max: 1000,
            text:["High","Low"],
            realtime: true,
            calculable: true,
            inRange: {
                color: ["lightskyblue","yellow", "orangered"]
            },
            textStyle:{
                color:"-sharpfff"
            }
        },
        series: [{
            name:"1",
            type: "map",    //
            map: "hangzhou",    //
            aspectScale:1,    //
            roam: true,     // "scale"  "move" true 
            layoutCenter:["50%","50%"],        //["50%","50%"]
            layoutSize: "100%",        //100%
            label: {
                normal: {
                    show: true    //
                },
                emphasis: {
                    show: true    //
                }
            },
            data:[{    name:"",value:337},
                  {    name:"",value:37},
                  {    name:"",value:737},
                  {    name:"",value:237},
                  {    name:"",value:97},
                  {    name:"",value:137},
                  {    name:"",value:257},
                  {    name:"",value:217},
                  {    name:"",value:17},
                  {    name:"",value:837},
                  {    name:"",value:437},
                  {    name:"",value:77},
                  {    name:"",value:7}]
        },{
            name:"2",
            type: "map",    //
            map: "hangzhou",    //
            aspectScale:1,    //
            roam: true,     // "scale"  "move" true 
            layoutCenter:["50%","50%"],        //["50%","50%"]
            layoutSize: "100%",        //100%
            label: {
                normal: {
                    show: true    //
                },
                emphasis: {
                    show: true    //
                }
            },
            data:[{    name:"",value:127},
                  {    name:"",value:327},
                  {    name:"",value:521},
                  {    name:"",value:27},
                  {    name:"",value:167},
                  {    name:"",value:197},
                  {    name:"",value:417},
                  {    name:"",value:207},
                  {    name:"",value:117},
                  {    name:"",value:37},
                  {    name:"",value:757},
                  {    name:"",value:27},
                  {    name:"",value:71}]
        }]
    });
});

the effect of the above code is as follows:

my second set of data does not appear in the suspension box.

how can we realize that multiple sets of data appear in the suspension box?

Mar.23,2021

has found the problem. Yesterday, I looked up the relevant information on the Internet and found a solution. I asked and answered myself here, hoping to help friends in need:

1. Get all data series through option.series

2. Use callback in the formatter property of tooltip (which controls the properties of the suspension box) to return the character format to be displayed

3. Traverse series and series.data, in callback to assemble strings by judging whether the current data belongs to the current region

here is the code for the solution:

var chart = echarts.init(document.getElementById('mapChart'));
var countyInfo;
$.get('../../distributedHome/getHomeData.action',function(data){
    setChart();
});
function setChart(){
    $.get('data/hangzhou.json', function (hangzhoujson) {        //json
        echarts.registerMap('hangzhou', hangzhoujson);    //
        var option={
             title: {
                 text: '',
                 subtext: '',
                 textStyle:{
                     color:'-sharpfff'
                 }
             },
            legend:{
                 orient: 'vertical',
                 left: 'left',
                 data:['1','2']
            },
            tooltip: {        //
                trigger: 'item',
                formatter:function(params){
                    //res,
                    var res=params.name+'<br />';
                    //series
                    var myseries=option.series;
                    //series
                    for(var i=0;i<myseries.length;iPP){
                        //series[i],data:params.nameres
                        for(var k=0;k<myseries[i].data.length;kPP){
                            //console.log(myseries[i].data[k].name);
                            //dataname
                            if(myseries[i].data[k].name==params.name){
                                //seriesnameres
                                res+=myseries[i].name+':'+myseries[i].data[k].value+'<br />';
                            }
                        }
                    }
                    //res
                    //console.log(res);
                    return res;                
                },
                
                    
            },
            visualMap: {            
                min: 0,
                max: 1000,
                text:['High','Low'],
                realtime: true,
                calculable: true,
                inRange: {
                    color: ['lightskyblue','yellow', 'orangered']
                },
                textStyle:{
                    color:'-sharpfff'
                }
            },
            series: [{
                name:'1',
                type: 'map',    //
                map: 'hangzhou',    //
                aspectScale:1,    //
                roam: true,     // 'scale'  'move' true 
                layoutCenter:['50%','50%'],        //['50%','50%']
                layoutSize: '100%',        //100%
                label: {
                    normal: {
                        show: true    //
                    },
                    emphasis: {
                        show: true    //
                    }
                },
                data:[{    name:'',value:337},
                      {    name:'',value:37},
                      {    name:'',value:737},
                      {    name:'',value:237},
                      {    name:'',value:97},
                      {    name:'',value:137},
                      {    name:'',value:257},
                      {    name:'',value:217},
                      {    name:'',value:17},
                      {    name:'',value:837},
                      {    name:'',value:437},
                      {    name:'',value:77},
                      {    name:'',value:7}]
            },{
                name:'2',
                type: 'map',    //
                map: 'hangzhou',    //
                aspectScale:1,    //
                roam: true,     // 'scale'  'move' true 
                layoutCenter:['50%','50%'],        //['50%','50%']
                layoutSize: '100%',        //100%
                label: {
                    normal: {
                        show: true    //
                    },
                    emphasis: {
                        show: true    //
                    }
                },
                data:[{    name:'',value:127},
                      {    name:'',value:327},
                      {    name:'',value:521},
                      {    name:'',value:27},
                      {    name:'',value:167},
                      {    name:'',value:197},
                      {    name:'',value:417},
                      {    name:'',value:207},
                      {    name:'',value:117},
                      {    name:'',value:37},
                      {    name:'',value:757},
                      {    name:'',value:27},
                      {    name:'',value:71}]
            },{
                name:'3',
                type: 'map',    //
                map: 'hangzhou',    //
                aspectScale:1,    //
                roam: true,     // 'scale'  'move' true 
                layoutCenter:['50%','50%'],        //['50%','50%']
                layoutSize: '100%',        //100%
                label: {
                    normal: {
                        show: true    //
                    },
                    emphasis: {
                        show: true    //
                    }
                },
                data:[{    name:'',value:127},
                      {    name:'',value:327},
                      {    name:'',value:521},
                      {    name:'',value:27},
                      {    name:'',value:167},
                      {    name:'',value:197},
                      {    name:'',value:417},
                      {    name:'',value:207},
                      {    name:'',value:117},
                      {    name:'',value:37},
                      {    name:'',value:757},
                      {    name:'',value:27},
                      {    name:'',value:71}]
            }]
        }
        chart.setOption(option);
    });
    window.onresize=function(){
        chart.resize();
    }
}

solves the problem, but several for loops look dazzling.
the embarrassing thing is that the tooltip callback parameter param in echart2 contains the data of each set in series, while echarts3 only contains the data and data sum of the first set. Obviously it was written by a bug, programmer.

Menu