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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/daiqisi/article/details/81017740

先上效果图,


鼠标放上去时的效果,如下图所示:


点击进入到的省级地图,如下图所示:



中国地图,鼠标放上去时的代码:

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

没有更多推荐了,返回首页