软工试水日报-世界地图下钻 3/25

和之前的中国地图类似，世界地图也要实现相应的下钻

还是通过点击事件调用函数的方式实现：

function Country(country){
        var tab= document.getElementById("demo");
        for( var i=0;i<tab.rows.length;){
                  tab.deleteRow(0);   
        }
        var onlydata=[];
        for(var i = 0;i < alldata.length; i ++){
            if(alldata[i].name == country){
             // 如果条件满足就把当前的值推入
              onlydata.push(alldata[i]);
              dogo(alldata[i].name,alldata[i].date,alldata[i].NowConfirm,alldata[i].ConfirmAdd,alldata[i].Confirm);
            }
        }
        console.log(onlydata);
        changeplace(country);
        myChart.clear();
        var myChartc = echarts.init(document.querySelector('#main'))
        myChartc.setOption(
        option = {
            title : {
                text: '世界疫情数据地图',
                left: 'center'
            },
            tooltip : {
                trigger: 'item',
                
            },
            legend: {
                orient: 'vertical',
                selectedMode:'single',
                left: 'left',
                data:['累计确诊人数','现存病例','今日新增','疑似感染者']
                
            },
            visualMap: {
                type: 'piecewise',
                pieces: [
                    { min: 1000000, max: 100000000, label: '>=10000', color: '#550101' },
                    { min: 100000, max: 999999, label: '100000-999999', color: '#a92919' },
                    { min: 50000, max: 99999, label: '50000-99999', color: '#af4e41' },
                    { min: 10000, max: 49999, label: '10000-49999', color: '#ee7263' },
                    { min: 1000, max: 9999, label: '1000-9999', color: '#f5bba7' },
                    { min: 1, max: 999, label: '1-999', color: '#fdf2d5' },
                ],
                color: ['#E0022B', '#E09107', '#A3E00B']   
            },
            toolbox: {
                show: true,
                orient : 'vertical',
                left: 'right',
                top: 'center',
                
                feature : {
                    mark : {show: true},
                    saveAsImage : {show: true}
                }
            },
            series : [
                {
                    name: '累计确诊人数',
                    type: 'map',
                    mapType:country,
                    roam: false,
                    
                    itemStyle: {
                        normal: {
                            label: {
                                show: false
                            },
                            areaColor: '#48D1CC',
                        },
                        emphasis: {
                            label: {
                                show: true
                            },
                            areaColor: '#FFFFFF'
                        }
                    },
                    data:[
                    ]
                },
                {
                    name: '现存病例',
                    type: 'map',
                    mapType: country,
                    itemStyle: {
                        normal: {
                            label: {
                                show: false
                            },
                            areaColor: '#48D1CC',
                        },
                        emphasis: {
                            label: {
                                show: true
                            },
                            areaColor: '#FFFFFF'
                        }
                    },
                    data:[
                    ]
                },
                {
                    name: '今日新增',
                    type: 'map',
                    mapType:country,
                    roam: false,
                    itemStyle: {
                        normal: {
                            label: {
                                show: false
                            },
                            areaColor: '#48D1CC',
                        },
                        emphasis: {
                            label: {
                                show: true
                            },
                            areaColor: '#FFFFFF'
                        }
                    },
                    data:[
                    ]
                },
                {
                    name: '疑似感染者',
                    type: 'map',
                    mapType: country,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true
                            },
                            areaColor: '#48D1CC',
                        },
                        emphasis: {
                            label: {
                                show: true
                            },
                            areaColor: '#FFFFFF'
                        }
                    },
                    data:[
                    ]
                }
            ]
        });
    
        myChartc.on('click', function (params) {            //点击事件
            var str_p = params.data;
            console.log(str_p);
        });
    
    }

这样我们就可以实现地图的下钻啦！

 

我们没爬到地方数据，因此这个下钻页面实在是有点点丑……不过也还行吧！