5月9日

天我们来攻克地图下钻这一难点

echarts官方文档的介绍中有关于南丁格尔图和旭日图的下钻，它们的思想归根结底就是使用新的chart来覆盖旧的chart，而且整个过程相当平滑，文档甚至将其作为了卖点（但地图下钻可没这流畅功能）

那么我们首先要写一个对应城市的js函数

function City(province){
                
                    //console.log(cities)
                    var myChartc = echarts.init(document.querySelector('#main'))
                    myChartc.setOption( options={
                        slient: true,    
                        title : {
                            text: '中国疫情数据地图',
                            left: 'center'
                        },
                        
                        legend: {
                            orient: 'vertical',
                            selectedMode:'single',
                            left: 'left',
                            data:['累计确诊人数','现存病例','疑似感染者']
                        },
                        visualMap: {
                            min: 0,
                            max: 500,
                            left: 'left',
                            top: 'bottom',
                            text:['高','低'],           // 文本，默认为数值文本
                            calculable : true
                            
                        },
                        toolbox: {
                            show: true,
                            orient : 'vertical',
                            left: 'right',
                            top: 'center',
                            feature : {
                                mark : {show: true},
                                
                                saveAsImage : {show: true}
                            }
                        },
                        series : [
                            {
                                name: '累计确诊人数',
                                type: 'map',
                                mapType: province,
                                roam: false,
                                label: {
                                    normal: {
                                        show:true
                                    },
                                    emphasis: {
                                        show:true
                                    }
                                },
                                data:nowconfirm
                            },
                            {
                                name: '现存病例',
                                type: 'map',
                                mapType: province,
                                label: {
                                    normal: {
                                        show:true
                                    },
                                    emphasis: {
                                        show:true
                                    }
                                },
                                data:confirm
                            },
                            {
                                name: '疑似感染者',
                                type: 'map',
                                mapType: province,
                                label: {
                                    normal: {
                                        show:true
                                    },
                                    emphasis: {
                                        show:true
                                    }
                                },
                                data:suspect
                            }
                        ],
                        tooltip : {
                            trigger: 'item',
                            formatter: function(params) {
                                var res = params.name+'<br/>';
                                var myseries = options.series;
                                for (var i = 0; i < myseries.length; i++) {
                                    for(var j=0;j<myseries[i].data.length;j++){
                                        if(myseries[i].data[j].name==params.name){
                                            res+=myseries[i].name +' : '+myseries[i].data[j].value+'</br>';
                                        }
                                    }
                                }
                                return res;
                            }
                        }
                        
                    })//myChart.setOption
                                     
                        myChartc.on('click', function (params) {
                            var str_p = params.data.name;
                        });
             
        }//function city 

接下来修改china函数中的click事件变成这个样子：

myChart.on('click', function (params) {
        var str_p = params.data.name;
        City(str_p)；
    });

之后我们就可以愉快地使用啦！

具体效果如下：

 

点击一下