echarts的中国地图，点击进入省级地图，点击省级地图，返回中国地图

先上效果图，

鼠标放上去时的效果，如下图所示：

点击进入到的省级地图，如下图所示：

中国地图，鼠标放上去时的代码：

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

中国地图的点击事件：

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 ;
            }
        }
    });

循环对比去拿到对应的省份的地图数据，并将其在显示中国地图的地方显示出来。原理大概就是这样，对于省级地图不理解的，文件里面也放了一个四川省的省级地图demo。省级地图的初始化跟中国地图大概差不多一样。

//定义全国省份的数组
    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);
    };

因为各省的地图数据js文件比较多，不建议一开始就全部加载进来，应该按需要加载对应的js文件，函数loadBdScript()做了这个工作。

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

点击省级地图又返回到中国地图，当然这里也可以做成，点击对应的市，显示市级地图，以此类推。

下载地址：echarts-china-map

echarts的中国地图，点击进入省级地图，点击省级地图，返回中国地图

猜你喜欢