使用echarts插件做图表常见的几个问题（六）——全国地图及其下钻

场景：做大屏展示时，需要在地图上展示每个省空调安装量，并且能下钻到市级展示各个省下市的安装量。

措施：

    //设置配置项
        var optionMap = {
        title: {
          text: '',
          left: 'left',
          textStyle:{
              color:'#999'
          }
        },
        visualMap: {
            show: true,
            min: 0,
            max: 0.3,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'], // 文本，默认为数值文本
            textStyle:{
                color:'#fff'
            },
            calculable: false,
            seriesIndex: [1],
            inRange: {
                color: ['#131b29', '#1d1e37','#181947','#131457','#0f1068','#090977']
            }
            
        },
        geo: {
          show: true,
          map: '',
          label: {
            normal: {
                show: false
            },
            emphasis: {
                show: false,
            }
        },
          //roam: true,
          zoom :1.2,
          scaleLimit :{
                min:1
          },
          itemStyle: {
            borderColor : '#0048cc',
            borderWidth :fSizeBase * 0.06,
            shadowBlur:fSizeBase * 0.1,
            shadowColor: '#133f8f',
            color:'#070920'
         },
          regions: [
            {
                name: '南海诸岛', 
                value: 0, 
                itemStyle: 
                    {normal: 
                        {opacity: 0,
                        label: {
                            show: false
                            
                        }
                    }
                }
            }],
            //layoutCenter: ['50%', '50%'],
            //layoutSize: '100%',
            // left:fSizeBase*0.2,
            // right:'1%',
            // top:'5%',
            // bottom:'1%'
        },
        series: [{
            name: '散点',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: '',
            symbolSize: function(val) {
                return 1;
            },
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true,
                    color:'#fff'
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#fff'
                }
            }
        },
        {
            type: 'map',
            map: '',
            //geoIndex: 0,
            //aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {            
                normal: {                
                    show: false
                },            
                emphasis: {                
                    show: false,                
                    textStyle: {                    
                        color: '#fff'                
                    }            
                }        
            },

            //roam: true,
            zoom :1.2,
            itemStyle: {            
                normal: {                
                    //shadowBlur:1, //图形阴影的模糊大小                
                    //shadowColor: 'rgba(0,0,0,1)',     //阴影颜色                
                    areaColor : '#0c1223', //区域颜色        
                    borderWidth:1,
                    borderColor:'#000',        
                    label : { //标签(丰台区、密云区....字体)的属性                    
                        show : true,                    
                        textStyle : {                        
                            fontSize : fSizeBase * 0.14,                    
                        }                
                    }       
                },            
                emphasis: {                
                    areaColor: '#060a57',
                    borderColor: '#010E2A'        
                }        
            },
            regions: [
                {
                    name: '南海诸岛', 
                    value: 0, 
                    itemStyle: 
                        {normal: 
                            {opacity: 0,
                            label: {
                                show: false
                                
                            }
                        }
                    }
                }],
                //layoutCenter: ['50%', '50%'],
                //layoutSize: '100%',
            //     left:fSizeBase*0.2,
            //     right:'1%',
            // top:'5%',
            // bottom:'1%',
            animation: false,
            data: ''
        },
          /*{
            name: '地区测试数据',
            type: 'map',
            mapType: 'china', // 自定义扩展图表类型
            // geoIndex: 0,
            // aspectScale: 0.75, // 长宽比
            itemStyle:{
              normal:{label:{show:true}},
              emphasis:{label:{show:true}}
            },
            data: areaValue
          },*/
          {
            name: '点',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbol: 'pin', //气泡
            symbolSize: function(val) {
                // var a = (maxSize4Pin - minSize4Pin) / (max - min);
                // var b = minSize4Pin - a * min;
                // b = maxSize4Pin - a * max;
                // return a * val[2] + b;
                if(val[2]>1){
                    return fSizeBase * 0.5;
                }else if(val[2] ==0.0){
                    return 0;
                }else {
                    return fSizeBase * 0.3
                }
            },
            //symbolSize:17,
            label: {
                normal: {
                    formatter: '{@[2]}',
                    show: true,
                    textStyle: {
                        color: '#fff',
                        fontSize: fSizeBase * 0.12,
                    }
                }
            },
            itemStyle: {
                normal: {
                    color: '#f75b14', //标志颜色
                }
            },
            zlevel: 6,
            data: '',
        },
        {
            name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: '',
            symbolSize: function(val) {
                //return val[2] / 10;
                //return val[2] / 10000;
                return fSizeBase * 0.2;
            },
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: false,
                    color: '#fff'
                }
            },
            itemStyle: {
                normal: {
                    color: '#19a8ea',
                    shadowBlur: fSizeBase * 0.1,
                    shadowColor: '#19a8ea'
                }
            },
            zlevel: 1
          }
        ]
      }

//渲染地图页面
    function loadMap(datas){
        $.get(appUrl+'/statics/echarts/json/'+areaName+'.json',function(geoJson){
          echarts.registerMap(areaName,geoJson);
          if($.type(geoJson) === "string"){
            geoJson=JSON.parse(geoJson);
          }
          var mapData = geoJson.features.map(function(item){
            return {
              name: item.properties.name,
              value: item.properties.childNum,
              cp: item.properties.cp,
            }
          });
          var data=[];
          var total_install=0;
          var max_install=0;
          for(var i=0;i<datas.length;i++){
              if(areaName!="china"){
                //optionMap.title.text="安装总量：千套";
                data.push({
                    name:datas[i].CITY_NAME,
                    value:numberDispose4(datas[i].INSTALL_QTY),//按照万套计算
                    code:datas[i].CITY_CODE,
                });
                total_install+=datas[i].INSTALL_QTY;
              }else {
                //optionMap.title.text="安装总量：万套";
                data.push({
                    name:datas[i].PROVINCE_NAME,
                    value:numberDispose3(datas[i].INSTALL_QTY),//按照万套计算
                    code:datas[i].PROVINCE_CODE,
                });
                total_install+=datas[i].INSTALL_QTY;
              }
            
          }
          if(areaName!="china"){
                optionMap.title.text="安装总量："+numberDispose4(total_install)+"千套";
                max_install=data[0].value;
          }else {
                optionMap.title.text="安装总量："+numberDispose3(total_install)+"万套";
                max_install=data[0].value;
          }
          var convertData = function (areaValue) {
            var res = [];
            for (var i = 0; i < areaValue.length; i++) {
            // var geoCoord = geoCoordMap[data[i].name];
                mapData.forEach(function(v) {
                    if(areaValue[i].name && v.name.substring(0,2) == areaValue[i].name.substring(0,2)){
                        res.push({
                        name: areaValue[i].name,
                        value: v.cp.concat(areaValue[i].value),
                        code:areaValue[i].code
                        });
                    }
                });
            }
               return res;
          };
        
          //userOption = ismpflow.getOption();//返回包含用户操作的option
          optionMap.geo.map=areaName;
          optionMap.series[0].data=convertData(data);
          optionMap.visualMap.max=max_install;

          optionMap.series[1].map=areaName;
          optionMap.series[1].data=data;

          optionMap.series[2].data=convertData(data);

          optionMap.series[3].data= convertData(data.sort(function(a, b) {return b.value - a.value;}).slice(0, 5));

          if(areaName!='china'){
            optionMap.series[3].symbolSize=function(){return 0;}
          }else {
            optionMap.series[3].symbolSize=function(){return fSizeBase * 0.2;}
          }
          
        
          myChart.clear();//清空ECharts

          myChart.hideLoading();


          myChart.setOption(optionMap);
          
          myChart.off('click');
          //点击事件
          myChart.on('click', function (result) {
              var code=result.data.code?result.data.code:"";
              if(areaName!='china'){
                 cityCode=code;
              }else {
                  areaName=code.substring(0,2);
              }
              stopReset();
              clear_install();
              
              initCharts();
              sendAjax();
              $(".chongzhi").show();
          })
        });
    }

json包在文件中下载