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

 // 地圖 S
                    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('無法載入該地圖');
                            }
                        });
                    }

百度雲：

連結：https://pan.baidu.com/s/1lsCVLRyVcRhka4quaaU4SA
提取碼：v84n
--來自百度網盤超級會員V5的分享