/*1、
<script type="text/javascript" src="${contextPath}/static/js/highcharts/modules/map.js"></script>
<script type="text/javascript" src="${contextPath}/static/js/highcharts/modules/data.js"></script>
<script type="text/javascript" src="${contextPath}/static/js/highcharts/modules/drilldown.js"></script>
<script type="text/javascript" src="${contextPath}/static/js/highcharts/modules/highmapslibs/cn-china-by-peng8.js"></script>
<script type="text/javascript" src="${contextPath}/static/js/chinamaps.js"></script>
<link href="${contextPath}/static/js/highcharts/modules/highmapslibs/font-awesome.css" rel="stylesheet">
2、jsp中引用:
$(function () {
chinamaps('${data1}','${data2}',true);
});
data1为省的数据，data2为市的，deep是否点击省是否显示市
后台数据格式：
String data1 = "[{\"name\":\"甘肃\",\"value\":100},{\"name\":\"内蒙古\",\"value\":2000}]";
String data2 = "[{\"name\":\"包头市\",\"value\":100},{\"name\":\"赤峰市\",\"value\":2000}]";

3、div：
<div id="container" style="height: 500px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>

*/



function chinamaps(data1,data2,deep,title){

/* var jsonProvince = $.parseJSON('${data2}');
var jsonCity = $.parseJSON('${data1}');
var deep = true;*/

var jsonProvince = $.parseJSON(data1);
var jsonCity = $.parseJSON(data1);

    Highcharts.setOptions({
        lang:{
            drillUpText:"返回 > {series.name}"
        }
    });
   
    var data = Highcharts.geojson(Highcharts.maps['countries/cn/custom/cn-all-china']),small = $('#container').width() < 400;
   
    //从后台获取的值赋给各个城市
    $.each(data, function (i) {
    if(deep){//点击省是否进入到市级
this.drilldown = this.properties['drill-key'];   
    }
        var cname =  this.properties['cn-name'];
        var value = 0;
        $.each(jsonProvince, function (i,obj) {
if(cname == obj.name){
value = obj.value;
return;
}
    });
this.value = value;    
    });
   
/* function getPoint(e){//点击城市触发的事件
console.log(e.point.name);
} */

    //初始化地图
    $('#container').highcharts('Map', {
        chart : {
            events: {
                drilldown: function (e) {//点击省时触发的事件
                    if (!e.seriesOptions) {
                        var chart = this;
                        var cname=e.point.properties["cn-name"];
                        chart.showLoading('<i class="icon-spinner icon-spin icon-3x"></i>');
                        //动态拼接城市资源文件名
                        $.getJSON("/static/js/highcharts/modules/highmapslibs/"+ e.point.drilldown+".geo.json", function(json){
                           data = Highcharts.geojson(json);
                           //ajax 根据点击省份ID获取该省各个城市的value
                               $.each(data, function (i) {
                               var cname =  this.properties['name'];
        var value = 0;
        $.each(jsonCity, function (i,obj) {
if(cname == obj.name){
value = obj.value;
return;
}
    });
this.value = value;    
/* this.events={};
   this.events.click=getPoint;//点击城市触发的事件 */
                               });
                                chart.hideLoading();
                                chart.addSeriesAsDrilldown(e.point, {
                                    name: e.point.name,
                                    data: data,
events:{
show:function(){
alert(1);
}
},
                                    dataLabels: {
                                        enabled: true,
                                        format: '{point.name}'
                                    }
                                });
                        });
                    }
                   this.setTitle(null, { text: cname });
                },
                drillup: function () {
                    this.setTitle(null, { text: '中国' });
                }
            }
        },
       
tooltip: {
formatter:function(){
var result = this.point.name+":"+this.point.value;
return result;
}
},

        credits:{
href:"#",
            text:""
        },
       
        title : {
            text : title
        },

        subtitle: {
            text: '中国',
            floating: true,
            align: 'right',
            y: 50,
            style: {
                fontSize: '16px'
            }
        },

        legend: small ? {} : {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },
       
        colorAxis: {
            min: 0,
            minColor: '#E6E7E8',
            maxColor: '#005645'
        },

        mapNavigation: {
            enabled: true,
            buttonOptions: {
                verticalAlign: 'bottom'
            }
        },

        plotOptions: {
            map: {
                states: {
                    hover: {
                        color: '#EEDD66'
                    }
                }
            }
        },

        series : [{
            data : data,
            name: '中国',
            dataLabels: {
                enabled: true,
                format: '{point.properties.cn-name}'
            }
        }],

        drilldown: {

            activeDataLabelStyle: {
                color: '#FFFFFF',
                textDecoration: 'none',
                textShadow: '0 0 3px #000000'
            },
            drillUpButton: {
                relativeTo: 'spacingBox',
                position: {
                    x: 0,
                    y: 60
                }
            }
        }
    });
}