echarts地图单机下钻双击返回

我做的是吉林省下钻到市区

首先你得有这些东西,资源我得资源里有,3分还是5分下载。里边有全国的都有。

 这里的jilins  是吉林省的json  因为和吉林市重名  所以加了个s

、、、、、、、、、、、、、、、、、、、、、、、、、、、、、

下边是代码

首先有个div

<div class="right" id="right"></div>

<script>


    $(function () {
       

        //ajax,查询数据
        CoreUtil.sendPost("/busineAssessment/mapAnalysis", null, function (resouse) {
            var data = resouse.data.param;

            var geoCoordMap = {
                '长春市': [125.45, 43.98],
                '吉林市': [126.57, 43.87],
                '四平市': [124.58, 43.43],
                '白山市': [126.4415188999591, 42.05153200503509],
                '延边朝鲜族自治州': [129.12, 43.13],
                '松原市': [124.84354633755109, 45.18368571425691],
                '白城市': [122.82, 45.53],
                '辽源市': [125.15, 42.97],
                '通化市': [125.92, 41.69]
            };

            //map名称查看下载的地图js内 echarts.registerMap('吉林' ...
            var convertData = function (d) {
                var res = [];
                for (var i = 0; i < d.length; i++) {
                    var geoCoord = geoCoordMap[d[i].name];
                    if (geoCoord) {
                        res.push({
                            name: d[i].name,
                            value: geoCoord.concat(d[i].value)
                        });
                    }
                }
                return res;
            };


            var myChart = echarts.init(document.getElementById('right'));
            //存储切换的每一级地图信息
            var mapStack = [];
            var timeFn = null;
            var curMap = {};
            //初始化为中国地图
            loadMap('jilins', '吉林', data);
            /**
             绑定用户切换地图区域事件
             cityMap对象存储着地图区域名称和区域的信息(name-code)
             当mapCode有值,说明可以切换到下级地图
             同时保存上级地图的编号和名称
             */
            myChart.on('mapselectchanged', function (params) {
                clearTimeout(timeFn);
                //由于单击事件和双击事件冲突,故单击的响应事件延迟250毫秒执行
                timeFn = setTimeout(function () {
                    var name = params.batch[0].name;
                    var mapCode = '';
                    if (name == '长春市') {
                        mapCode = 'changchun';
                    }
                    if (name == '吉林市') {
                        mapCode = 'jilin';
                    }
                    if (name == '四平市') {
                        mapCode = 'siping';
                    }
                    if (name == '白城市') {
                        mapCode = 'baicheng';
                    }
                    if (name == '松原市') {
                        mapCode = 'songyuan';
                    }
                    if (name == '辽源市') {
                        mapCode = 'liaoyuan';
                    }
                    if (name == '白山市') {
                        mapCode = 'baishan';
                    }
                    if (name == '通化市') {
                        mapCode = 'tonghua';
                    }
                    if (name == '延边朝鲜族自治州') {
                        mapCode = 'yanbian';
                    }
                    if (mapCode == '') {
                        return;
                    }
                    //单机事件这里应该查询下边的数据然后传入。
                    CoreUtil.sendPost("/busineAssessment/mapAnalysis", null, function (resouse) {

                    });


                    loadMap(mapCode, name, data);
                    //将上一级地图信息压入mapStack
                    mapStack.push({
                        mapCode: curMap.mapCode,
                        mapName: curMap.mapName
                    });
                }, 250);
            });
            /**
             绑定双击事件,并加载上一级地图
             */
            myChart.on('dblclick', function (params) {
                //当双击事件发生时,清除单击事件,仅响应双击事件
                clearTimeout(timeFn);
                var map = mapStack.pop();
                if (!mapStack.length && !map) {
                    layer.msg('已经到达最上一级地图了');
                    return;
                }
                loadMap(map.mapCode, map.mapName, data);
            });

            /**
             加载地图:根据地图所在省市的行政编号,
             获取对应的json地图数据,然后向echarts注册该区域的地图
             最后加载地图信息
             @params {String} mapCode:地图行政编号,for example['中国':'100000', '湖南': '430000']
             @params {String} mapName: 地图名称
             */
            function loadMap(mapCode, mapName, datas) {
                $.getJSON('/json/' + mapCode + '.json', function (data) {
                    if (data) {
                        echarts.registerMap(mapName, data);
                        var option = {
                            title: {
                                text: '吉林省小区评分情况',
                                float: 'right'
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: function (params) {   //鼠标移过某市弹出框展示内容
                                    // debugger
                                    // if (typeof (params.value)[2] == "undefined") {
                                    //     return params.name + ' : <br/>' + datas[i].par;
                                    // } else {
                                    //     return params.name + ' : <br/>' + params.value[2];
                                    // }
                                    var name = params.name;
                                    for (var i = 0; i < datas.length; i++) {
                                        if (name == datas[i].name) {
                                            return params.name + ' : <br/>' + datas[i].par;
                                        }
                                    }
                                },
                                data: convertData(datas)
                            },

                            series: [
                                {
                                    name: '',
                                    type: 'map',
                                    mapType: mapName,
                                    selectedMode: 'multiple',
                                    label: {
                                        normal: {
                                            show: true,
                                            //字体样式
                                            textStyle: {
                                                fontSize: 15,
                                                color: '#cccccc'
                                            },
                                            formatter: function (params) {
                                                console.log(params)
                                                if(params.data){
                                                    //展示内容
                                                    return params.name+"\n"+ params.data.value[2];
                                                }
                                            },
                                        },
                                        emphasis: {
                                            show: true
                                        },

                                    },
                                    data: convertData(datas),

                                    itemStyle: {
                                        normal: {
                                            areaColor: '#174b9c',
                                            borderColor: '#e0854f',//板块边界色
                                            borderWidth: 2 //板块边颜色宽度
                                        },
                                        emphasis: {
                                            areaColor: '#f1c237',// 鼠标放到地图板块的颜色
                                            borderColor: '#e0854f', //鼠标放到地图板块的边界的颜色
                                        }
                                    },
                                    // 高亮区域
                                    regions: [{
                                        name: '',
                                        itemStyle: {
                                            shadowBlur: 20,
                                            areaColor: '#2379E3', //区域颜色
                                            borderColor: '#0a2dae',// 线
                                            shadowColor: '#0a2dae',// 外发光
                                        }
                                    }]
                                },
                            ]

                        };
                        myChart.setOption(option);
                        curMap = {
                            mapCode: mapCode,
                            mapName: mapName
                        };
                    } else {
                        alert('无法加载该地图');
                    }
                });
            }
        });

    });


</script>

效果图

鼠标移到上边的弹窗显示 

单击白城市,下钻到白城市的地图

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值