China map of echarts, click to enter the provincial map, click the provincial map to return to the China map

First up the effect map,

The effect when the mouse is placed is as shown in the following figure:

Click to enter the provincial map, as shown below:

Map of China, the code when the mouse is placed on it:

myChart.on('mouseover', function (params) {
        var dataIndex = params.dataIndex;
        // console.log(params);
    });

Click event of China map:

myChart.on('click', function (param) {
        // alert(param.name);
        //遍历取到provincesText 中的下标  去拿到对应的省js
        for(var  i= 0 ; i < provincesText.length ; i++ ){
            if(param.name == provincesText[i]){
                //显示对应省份的方法
                // showProvince(provinces[i]) ;
                showProvince(provinces[i],provincesText[i])

                break ;
            }
        }
    });

Loop comparison to get the map data of the corresponding province and display it in the place where the map of China is displayed. The principle is probably like this. For those who do not understand the provincial map, a demo of the provincial map of Sichuan Province is also placed in the file. The initialization of the provincial map is about the same as that of the Chinese map.

//定义全国省份的数组
    var provinces = ['shanghai', 'hebei','shanxi','neimenggu','liaoning','jilin','heilongjiang','jiangsu','zhejiang','anhui','fujian','jiangxi','shandong','henan','hubei','hunan','guangdong','guangxi','hainan','sichuan','guizhou','yunnan','xizang','shanxi1','gansu','qinghai','ningxia','xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen', 'taiwan'];

    var provincesText = ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林','黑龙江',  '江苏', '浙江', '安徽', '福建', '江西', '山东','河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门', '台湾'];

    myChart.on('click', function (param) {
        // alert(param.name);
        //遍历取到provincesText 中的下标  去拿到对应的省js
        for(var  i= 0 ; i < provincesText.length ; i++ ){
            if(param.name == provincesText[i]){
                //显示对应省份的方法
                // showProvince(provinces[i]) ;
                showProvince(provinces[i],provincesText[i])

                break ;
            }
        }
    });


    //展示对应的省
    // showprovince（province[i],provinceText[i])改成这样，function（pName,Chinese_）{}
    function  showProvince(pName, Chinese_){

        //这写省份的js都是通过在线构建工具生成的，保存在本地，需要时加载使用即可，最好不要一开始全部直接引入。
        loadBdScript('$'+pName+'JS','js/province/'+pName+'.js',function(){

            //初始化echarts:具体代码参考上面初始化中国地图即可，这里不再重复。
            initEcharts(Chinese_) ;

        });
    }

    //加载对应的JS
    function loadBdScript(scriptId, url, callback) {
        var script = document.createElement("script")
        script.type = "text/javascript";
        if (script.readyState){  //IE
            script.onreadystatechange = function(){
                if (script.readyState == "loaded" || script.readyState == "complete"){
                    script.onreadystatechange = null;
                    callback();
                }
            };
        } else {  //Others
            script.onload = function(){
                callback();
            };
        }
        script.src = url;
        script.id = scriptId;
        document.getElementsByTagName("head")[0].appendChild(script);
    };

Because there are many map data js files in each province, it is not recommended to load them all at the beginning. The corresponding js files should be loaded as needed. The function loadBdScript() does this work.

myChart1.on('click', function (param) {
            initChina();
        });

Click on the provincial map to return to the map of China. Of course, it can also be made here. Click on the corresponding city to display the city-level map, and so on.

Download address: echarts-china-map