highchart地图

都知道echarts的图形比较煊，但是highchart也是比较实用的，速度也快

 

地图数据格式地址：https://data.jianshukeji.com/

 

地图实例：

$(function () {

    $.getJSON('https://data.jianshukeji.com/jsonp?filename=geochina/anhui.json&callback=?', function (geojson) {

        // Prepare the geojson

        var states = Highcharts.geojson(geojson, 'map'),

            rivers = Highcharts.geojson(geojson, 'mapline'),

            cities = Highcharts.geojson(geojson, 'mappoint'),

            specialCityLabels = {

                'Melbourne': {

                    align: 'right'

                },

                'Canberra': {

                    align: 'right',

                    y: -5

                },

                'Wollongong': {

                    y: 5

                },

                'Brisbane': {

                    y: -5

                }

            };

        // Skip or move some labels to avoid collision

        $.each(states, function () {

            // Disable data labels

            alert(this.properties.fullname);

            if (this.properties.fullname=== '合肥市') {

                this.dataLabels = {

                    enabled: false

                };

            }

       

            // Move center for data label

            if (this.properties.code_hasc === 'AU.SA') {

                this.middleY = 0.3;

            }

            if (this.properties.code_hasc === 'AU.QL') {

                this.middleY = 0.7;

            }

        });

        $.each(cities, function () {

            if (specialCityLabels[this.name]) {

                this.dataLabels = specialCityLabels[this.name];

            }

        });

        // Initiate the chart

        $('#container').highcharts('Map', {

            title : {

                text : 'Highmaps from geojson with multiple geometry types'

            },

            mapNavigation: {

                enabled: true,

                buttonOptions: {

                    verticalAlign: 'bottom'

                }

            },

            series : [{

                name: 'States and territories',

                data: states,

                color: Highcharts.getOptions().colors[2],

                states: {

                    hover: {

                        color: Highcharts.getOptions().colors[4]

                    }

                },

                dataLabels: {

                    enabled: true,

                    format: '{point.name}',

                    style: {

                        width: '80px' // force line-wrap

                    }

                },

                tooltip: {

                    pointFormat: '{point.name}'

                }

            }]

        });

    });

});