Echarts实现全国地图省份联动效果

效果图：

 

 实现效果：

1、鼠标移入圆点悬浮框显示内容

  • 使用tooltip属性，判断圆点位置

2、点击圆点跳转路由

  • 使用myCharts.on('click', function (param) {}，判断圆点位置实现点击跳转

主要代码：

inde.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="libs/jquery.js"></script>
    <script src="libs/echarts.min.js"></script>
    <!--<script src="libs/echarts/echarts-gl.min.js" type="text/javascript" charset="utf-8"></script>-->
    <script src='./index.js'></script>
    <title>全国地图省份联动效果</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
        }
        /*        .adshou{cursor:pointer !important};*/
        .layui-btn .conut-next {
            text-align: center;
            font-size: 20px;
            color: #3E3E3E;
            padding: 5px 0;
            transition: all 0.5s;
        }

        .layui-btn:hover .conut-next {
            font-size: 18px;
            color: red;
        }

        .close-back {
            background: url(img/close_back.png) no-repeat;
            display: none;
            transition: all 0.5s;
            height: 70px;
            width: 85px;
            color: #fff;
            left: 65px;
            position: absolute;
            top: 300px;
            cursor: pointer;
        }

        .close-back img {
            margin: 28px auto 0;
            width: 30px;
            display: block;
            transition: all 0.5s;
        }

        .close-back:hover {
            left: 55px;
        }

        .close-back:hover img {
            width: 22px;
            margin-top: 32px;
        }

        .imgSize {
            height: 170px;
            width: 260px;
        }
        #cityMap{
            background: #02060E;
        }
    </style>
</head>
<body>
    <div id="cityMap" style="width: 100%;height:98vh;"></div>
    <div class="close-back"><img src="img/back_button.png" /></div>
</body>
</html>

index.js

$(function(){
    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 = ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林','黑龙江',  '江苏', '浙江', '安徽', '福建', '江西', '山东','河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门', '台湾'];
    
    var selected = 'china';
    var myChartsName = '全国园区总数：1288';
    mapEcharts(selected);

        
    //返回中国地图     
    $('.close-back').click(function(e){
        $('.close-back').hide();
        myChartsName = '全国园区总数：1288';
        mapEcharts(selected);
    });
    

    myCharts.on('click', function (param) {
            console.log(param);
            //遍历取到provincesText 中的下标  去拿到对应的省js
            event.stopPropagation();
            //点击亮点打开新页面
            for(var  i= 0 ; i < provinces.length ; i++ ){
                if(param.data && param.data.areaname == provinces[i]){
                    window.open(param.data.url)  // 打开新页面
                }
            }
            //点击跳转到省
            for(var  i= 0 ; i < provincesText.length ; i++ ){
                if(param.name == provincesText[i]){
                    //显示对应省份的方法
                    console.log(222);
                    $('.close-back').show();
                    myChartsName = '全省园区总数：288';
                    mapEcharts(provinces[i]);
                    break ;
                }
            }
    });

    
    function mapEcharts(name) {        
        
        
    var url = '';
    name == 'china' ? url = './libs/json/' + name + '.json' : url = './libs/json/province/' + name + '.json'        
    
    myCharts = echarts.init(document.getElementById('cityMap'));
    
    $.ajaxSettings.async = false;    
    $.get(url,function(data){
        var dataMap = data;
        echarts.registerMap(name, dataMap);
        myCharts.hideLoading();

        // 散点坐标
        var geoCoordMap = [
            {name: '湖北', value: [113.52, 30.179], size: 30, url:'https://www.baidu.com/',symbol: 'image://img/point.png',img:'img/demo.jpg',areaname:'hubei'},
            {name: '四川', value: [103.42, 32.279], size: 50, url:'https://www.baidu.com/',symbol: 'image://img/point1.png',img:'img/demo.jpg',areaname:'sichuan'},
            {name: '青海', value: [98.32, 34.379], size: 30,url:'https://www.baidu.com/',symbol: 'image://img/point.png',img:'img/demo.jpg',areaname:'qinghai'},
            {name: '广西', value: [108.22, 23.479], size: 30,url:'https://www.baidu.com/',symbol: 'image://img/point.png',img:'img/demo.jpg',areaname:'guangxi'},
            {name: '河北', value: [118.12, 40.579], size: 50,url:'https://www.baidu.com/',symbol: 'image://img/point1.png',img:'img/demo.jpg',areaname:'hebei'},
            {name: '广东1', value: [113.62, 23.179], size: 50,url:'https://www.baidu.com/',symbol: 'image://img/point1.png',img:'img/demo.jpg',areaname:'guangdong'},
            {name: '广东2', value: [114.62, 23.179], size: 30,url:'https://www.baidu.com/',symbol: 'image://img/point.png',img:'img/demo.jpg',areaname:'guangdong'},
            {name: '北京', value: [116.41, 39.917], size: 50,url:'https://www.baidu.com/',symbol: 'image://img/point1.png',img:'img/demo.jpg',areaname:'beijing'},
            {name: '河南', value: [113.56, 34.657], size: 50,url:'https://www.baidu.com/',symbol: 'image://img/point1.png',img:'img/demo.jpg',areaname:'henan'},
            {name: '新疆1235', value: [87.81, 43.492], size: 30,url:'https://www.baidu.com/',symbol: 'image://img/point.png',img:'img/demo.jpg',areaname:'xinjiang'},
            {name: '西藏333', value: [91.13, 29.660], size: 30,url:'https://www.baidu.com/',symbol: 'image://img/point.png',img:'img/demo.jpg',areaname:'xizang'},
            {name: '黑龙江', value: [127.84, 45.756], size: 30,url:'https://www.baidu.com/',symbol: 'image://img/point.png',img:'img/demo.jpg',areaname:'heilongjiang'},
        ];

        
        var convertData2 = function (data) { // 处理数据函数
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var geoCoord = data[i].value;
                console.log(geoCoord);
                var geoAreaname = data[i].areaname;
                
                if ((geoCoord && name==geoAreaname)) { //跳转到省级图标需放大
                    res.push({
                        name: data[i].name,
                        value: geoCoord.concat(data[i].size * 101),
                        url:data[i].url,
                        symbol:data[i].symbol,
                        img:data[i].img,
                        areaname:data[i].areaname
                    });
                }
                
                if(name == 'china'){  //在中国地图上图标显示同value
                    res.push({
                        name: data[i].name,
                        value: geoCoord.concat(data[i].size),
                        url:data[i].url,
                        symbol:data[i].symbol,
                        img:data[i].img,
                        areaname:data[i].areaname
                    });
                }    
            }
            return res;
        };
        
        
        myCharts.setOption(option = {
            title: {
                text: myChartsName,
                left: 'center',
                padding: 50, 
                textStyle: {  //主标题文本样式
                    color: "#fff",
                    fontSize: 32,
                },
            },
            tooltip: {
                trigger: 'item',
                show: true,
                formatter:function(params){
                    //定义一个res变量来保存最终返回的字符结果,并且先把地区名称放到里面
                    var res=''
                    for(var  i= 0 ; i < provinces.length ; i++ ){
                        if(params.data && params.data.areaname == provinces[i]){
                            res = params.data.name   //悬浮框显示内容
                        }
                    }
                    return res;               
                },
            },
            geo: { // 地图配置
                show: true,
                map: name,
                label: {
                    normal: {
                        show: true
                    },
                    emphasis: {
                        show: true
                    }
                },
                roam: false,//控制缩放
                itemStyle: {
                    normal: {
                        areaColor: "#6cf",
                        shadowBlur: 1,
                        shadowColor: "#333",
                        shadowOffsetX: 10,
                        shadowOffsetY: 10,
                    },
                    emphasis: {
                        label: {
                            show: true, //选中状态是否显示省份名称
                        },
                        areaColor: "#fff",
                        shadowOffsetX: 10,
                        shadowOffsetY: 10,
                        shadowBlur: 5,
                        borderWidth: 10,
                        shadowColor: "rgba(0, 0, 0, 0.1)"
                    }
              },
              regions: [
                  {
                    name: "南海诸岛",
                    itemStyle: {
                      // 隐藏地图
                    normal: {
                        opacity: 0, // 为 0 时不绘制该图形
                      }
                    },
                    emphasis: {
                        opacity: 0,
                    },
                    label: {
                      show: false // 隐藏文字
                    }
                  }
                ]
//                zoom: 1.2,
            },
            series: [
            { // 散点配置
                name: '数量',
                type: 'effectScatter',
                zlevel:2,
                coordinateSystem: 'geo',
                symbolSize: function(val){
                    if(val[2]>100){
                        return ([10,10]); 
                    }else{
                        return ([0.2*val[2],0.2*val[2]]); //两个参数对应宽高，点击进去省级后对应宽高乘以相应倍数
                    }
                },
                symbolKeepAspect: true,
                showEffectOn: 'emphasis',
                rippleEffect: {
                    brushType: 'stroke'
                },
                hoverAnimation: true,
                data:convertData2(geoCoordMap),
            }, 
            { // 地图配置
                name: '',
                type: 'map',
                mapType: name, // 自定义扩展图表类型
                geoIndex: 1,
                aspectScale: 0.75, // 长宽比
                textFixed: {
                    Alaska: [20, -20]
                  },
                //控制页面出来方式
                   animation:true,
                animationDuration: 3000,
                animationEasing: 'cubicInOut',

                label: {
                    normal: {
                      show: true,
                      textStyle: {
                        color: '#fff'
                      }
                    },
                    emphasis: {
                      show: true,
                      textStyle: {
                        color: '#1A2943'
                      }
                    }
                },
                itemStyle: {
                    normal: {
                        areaColor: '#2E4370',
                        borderColor: '#4888CE',
                        borderWidth: 1
                    },
                    emphasis: {
                        areaColor: '#506798',
                        shadowOffsetX: 10,
                        shadowOffsetY: 10,
                        shadowBlur: 5,
                        borderWidth: 2,
                        shadowColor: "#333",
                        borderColor: 'rgba(0, 0, 0, 0)',
                    }
                },

            }]
        });
        myCharts.setOption(option);
    });
    }
});

 最重要的JSON数据源比较多就不放了，有需要的可以私聊我

posted @ 2021-12-31 10:03  夜未央唐汉  阅读(338)  评论(1)    收藏  举报