【Echarts】中国地图

HTML

<div id="Smap" style="width: 1400px;height:800px;margin-left: 100px;margin-top: 10px"></div>

JS

<script>
    var MAPChart = echarts.init(document.getElementById('Smap'));
    //各省份的地图json文件
    var provinces = {
                        '上海': '/static/js/map/province/shanghai.json',
                        '河北': '/static/js/map/province/hebei.json',
                        '山西': '/static/js/map/province/shanxi.json',
                        '内蒙古': '/static/js/map/province/neimenggu.json',
                        '辽宁': '/static/js/map/province/liaoning.json',
                        '吉林': '/static/js/map/province/jilin.json',
                        '黑龙江': '/static/js/map/province/heilongjiang.json',
                        '江苏': '/static/js/map/province/jiangsu.json',
                        '浙江': '/static/js/map/province/zhejiang.json',
                        '安徽': '/static/js/map/province/anwei.json',
                        '福建': '/static/js/map/province/fujian.json',
                        '江西': '/static/js/map/province/jiangxi.json',
                        '山东': '/static/js/map/province/shandong.json',
                        '河南': '/static/js/map/province/hebei.json',
                        '湖北': '/static/js/map/province/hubei.json',
                        '湖南': '/static/js/map/province/hunan.json',
                        '广东': '/static/js/map/province/guangdong.json',
                        '广西': '/static/js/map/province/guangxi.json',
                        '海南': '/static/js/map/province/hainan.json',
                        '四川': '/static/js/map/province/sichuang.json',
                        '贵州': '/static/js/map/province/guizhou.json',
                        '云南': '/static/js/map/province/yunnan.json',
                        '西藏': '/static/js/map/province/xizang.json',
                        '陕西': '/static/js/map/province/shanxi.json',
                        '甘肃': '/static/js/map/province/gansu.json',
                        '青海': '/static/js/map/province/qinghai.json',
                        '宁夏': '/static/js/map/province/ningxia.json',
                        '新疆': '/static/js/map/province/xinjiang.json',
                        '北京': '/static/js/map/province/beijing.json',
                        '天津': '/static/js/map/province/tianjin.json',
                        '重庆': '/static/js/map/province/chongqing.json',
                        '香港': '/static/js/map/province/xianggang.json',
                        '澳门': '/static/js/map/province/aomen.json',
                    };
	//各省份的数据
    var allData = [{name: '北京'}, {name: '天津'}, {name: '上海'}, { name: '重庆'}, 
                   {name: '河北'}, {name: '河南'}, {name: '云南'}, { name: '辽宁'}, 
                   {name: '黑龙江'}, {name: '湖南'}, {name: '安徽'}, { name: '山东'}, 
                   {name: '新疆'}, { name: '江苏'}, {name: '浙江'}, {name: '江西'}, 
                   {name: '湖北'}, { name: '广西'}, {name: '甘肃'}, { name: '山西'},
                   {name: '内蒙古'}, {name: '陕西'}, {name: '吉林'}, {name: '福建'},
                   {name: '贵州'}, { name: '广东'}, { name: '青海'}, {name: '西藏'}, 
                   { name: '四川'}, {name: '宁夏'}, {name: '海南'}, { name: '台湾'}, 
                   {name: '香港'}, {name: '澳门'
                    }];　　　　　　　　　　　　
    // 随机生成对应的vlues值
    for (var i = 0; i < allData.length; i++) {
        allData[i].value = Math.round(Math.random() * 100);
    }
    loadMap('/static/js/map/china.json', 'china');//初始化全国地图
    var timeFn = null;

	//单击切换到省级地图，当mapCode有值,说明可以切换到下级地图
    MAPChart.on('click', function (params) {
        clearTimeout(timeFn);
        //由于单击事件和双击事件冲突，故单击的响应事件延迟250毫秒执行
        timeFn = setTimeout(function () {
            var name = params.name; //地区name
            var mapCode = provinces[name]; //地区的json数据
            if (!mapCode) {
                alert('无此区域地图显示');
                return;
            }
            loadMap(mapCode, name);

        }, 250);
    });

	// 绑定双击事件，返回全国地图
    MAPChart.on('dblclick', function (params) {
        //当双击事件发生时，清除单击事件，仅响应双击事件
        clearTimeout(timeFn);

        //返回全国地图
        loadMap('/static/js/map/china.json', 'china');//初始化全国地图
    });

    /**
    获取对应的json地图数据，然后向echarts注册该区域的地图，最后加载地图信息
    @params {String} mapCode:json数据的地址
    @params {String} name: 地图名称
    */
    function loadMap(mapCode, name) {
        $.get(mapCode, function (data) {
            if (data) {
                echarts.registerMap(name, data);
                var option = {
                    tooltip: {
                        show: true,
                        formatter: function (params) {
                            if (params.data) return params.name + '：' + params.data['value']
                        },
                    },
                    visualMap: {
                        type: 'continuous',
                        text: ['', ''],
                        showLabel: true,
                        left: '50',
                        min: 0,
                        max: 100,
                        inRange: {
                            color: ['#edfbfb', '#b7d6f3', '#40a9ed', '#3598c1', '#215096',]
                        },
                        splitNumber: 0
                    },
                    series: [{
                        name: 'MAP',
                        type: 'map',
                        mapType: name,
                        selectedMode: 'false',//是否允许选中多个区域
                        label: {
                            normal: {
                                show: true
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        data: allData
                    }]
                };
                MAPChart.setOption(option);
                // curMap = {
                //     mapCode: mapCode,
                //     mapName: name
                // };
            } else {
                alert('无法加载该地图');
            }
        });
    }
</script>