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?

Echarts3 javascript
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.

Previous: How to refresh the content when switching the menu at the bottom of WeChat Mini Programs

Next: How does vue introduce components such as elementui on demand without scaffolding

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1c2b446-33a49.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1c2b446-33a49.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?