echarts 加载地图双击地图下深

骑猪看日落 2022-11-13 04:05 336阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDE4NzQ1MA_size_16_color_FFFFFF_t_70]

offLineMap(regions) { 
        let _this = this;
    _this.chinaMapData = require('../../public/datas/china/china.json');
    _this.provinceMapData = { 
        '上海市': require('../../public/datas/province/data-1482909900836-H1BC_1WHg.json'),
        '河北省': require('../../public/datas/province/data-1482909768458-HJlU_yWBe.json'),
        '山西省': require('../../public/datas/province/data-1482909909703-SyCA_JbSg.json'),
        '内蒙古自治区': require('../../public/datas/province/data-1482909841923-rkqqdyZSe.json'),
        '辽宁省': require('../../public/datas/province/data-1482909836074-rJV9O1-Hg.json'),
        '吉林省': require('../../public/datas/province/data-1482909832739-rJ-cdy-Hx.json'),
        '黑龙江省': require('../../public/datas/province/data-1482909803892-Hy4__J-Sx.json'),
        '江苏省': require('../../public/datas/province/data-1482909823260-HkDtOJZBx.json'),
        '浙江省': require('../../public/datas/province/data-1482909960637-rkZMYkZBx.json'),
        '安徽省': require('../../public/datas/province/data-1482909768458-HJlU_yWBe.json'),
        '福建省': require('../../public/datas/province/data-1478782908884-B1H6yezWe.json'),
        '江西省': require('../../public/datas/province/data-1482909827542-r12YOJWHe.json'),
        '山东省': require('../../public/datas/province/data-1482909892121-BJ3auk-Se.json'),
        '河南省': require('../../public/datas/province/data-1482909807135-SJPudkWre.json'),
        '湖北省': require('../../public/datas/province/data-1482909813213-Hy6u_kbrl.json'),
        '湖南省': require('../../public/datas/province/data-1482909818685-H17FOkZSl.json'),
        '广东省': require('../../public/datas/province/data-1482909784051-BJgwuy-Sl.json'),
        '广西壮族自治区': require('../../public/datas/province/data-1482909787648-SyEPuJbSg.json'),
        '海南省': require('../../public/datas/province/data-1482909796480-H12P_J-Bg.json'),
        '四川省': require('../../public/datas/province/data-1482909931094-H17eKk-rg.json'),
        '贵州省': require('../../public/datas/province/data-1482909791334-Bkwvd1bBe.json'),
        '云南省': require('../../public/datas/province/data-1482909957601-HkA-FyWSx.json'),
        '西藏自治区': require('../../public/datas/province/data-1482927407942-SkOV6Qbrl.json'),
        '陕西省': require('../../public/datas/province/data-1508990012125-SyVBnCCab.json'),
        '甘肃省': require('../../public/datas/province/data-1482909780863-r1aIdyWHl.json'),
        '青海省': require('../../public/datas/province/data-1482909853618-B1IiOyZSl.json'),
        '宁夏': require('../../public/datas/province/data-1482909848690-HJWiuy-Bg.json'),
        '新疆维吾尔自治区': require('../../public/datas/province/data-1482909952731-B1YZKkbBx.json'),
        '北京市': require('../../public/datas/province/data-1482818963027-Hko9SKJrg.json'),
        '天津市': require('../../public/datas/province/data-1482909944620-r1-WKyWHg.json'),
        '重庆市': require('../../public/datas/province/data-1482909775470-HJDIdk-Se.json'),
        '香港特别行政区': require('../../public/datas/province/data-1461584707906-r1hSmtsx.json'),
        '澳门特别行政区': require('../../public/datas/province/data-1482909771696-ByVIdJWBx.json')
    };
    
        let timer = null;  // 单击地图定时器
        let myChart = this.$echarts.init(this.$refs.chinaMap);
        //各省份的地图json文件
        $('<div class="back">返 回</div>').appendTo(
            $('.contrast')
        );
    
        $('.back').css({ 
            'position': 'absolute',
            'right': '25px',
            'bottom': '40px',
            'color': 'white',
            'font-size': '12px',
            cursor: 'pointer',
            'z-index': '100',
            'border-radius': '4px',
            'padding': '4px 10px',
            'backgroundColor': '#169BD5'
        })
    
        $('.back').click(function () { 
            loadMap(_this.chinaMapData, 'china', true, _this.chinaMapData.features); //初始化全国地图
            if(_this.blackBtnFlag) { 
                // _this.getAlarmData(_this.yearValue);
                _this.isCompare(_this.compareValue);
                _this.mapSelectedData = [];  // 存储多个地图对象
                _this.blackBtnFlag = false;
            }
        })
    
        loadMap(_this.chinaMapData, 'china', true, _this.chinaMapData.features); //初始化全国地图
    
        //单击切换到省级地图，当mapCode有值,说明可以切换到下级地图
    	myChart.off('click'); 
        	myChart.on('click', echartsMapClick);
    
        // 绑定双击事件，返回全国地图
    	myChart.off('dblclick');
        myChart.on('dblclick', echartsMapDblClick);
    
        //生成数据
        _this.mapData = [], _this.companyName = [];
    
        function getMapData(mapDatas) { 
            _this.mapData = [], _this.companyName = [];
            for (let j = 0; j < mapDatas.length; j++) { 
                let value = Math.random() * 3000;
                _this.mapData.push({   // 全国省市数据
                    name: mapDatas[j].properties.name,
                    value: value,
                    level: mapDatas[j].properties.level,// 'province',
                    cityCode: mapDatas[j].properties.adcode
                });
            }
            _this.mapData = _this.mapData.sort(function (a, b) { 
                return b.value - a.value
            });
            // }
        }
    
        /** 获取对应的json地图数据，然后向echarts注册该区域的地图，最后加载地图信息 @params {String} mapCode:json数据的地址 @params {String} name: 地图名称 */
        function loadMap(mapCode, name, labelFlag, mapDatas) { 
            getMapData(mapDatas);
            if (mapCode) { 
                echarts.registerMap(name, mapCode);
                _this.mapOption = { 
                    tooltip: {   // 无效
                        show: true,
                        formatter: function (params) { 
                            if (params.data) return params.name + '：' + params.data['value']
                        },
                    },
                    title: [
                        { 
                            left: 'center',
                            top: 10,
                            text: _this.yearValue + '年报警次数(单位：万)',
                            textStyle: { 
                                color: 'rgb(179, 239, 255)',
                                fontSize: 16
                            },
                        }
                    ],
                    zoom: 1.4,  // 地图的缩放等级 一次性放大的大小
                    visualMap: { 
                        textStyle: { 
                            color: '#fff'
                        },
                        type: 'piecewise',
                        pieces: [
                            { 
                                max: 30,
                                label: '报警次数排名第三',
                                color: '#2c9a42'
                            },
                            { 
                                min: 30,
                                max: 60,
                                label: '报警次数排名第二',
                                color: '#d08a00'
                            },
                            { 
                                min: 60,
                                label: '报警次数排名第一',
                                color: '#c23c33'
                            },
                        ],
                    },
                    series: [
                        { 
                            name: '报警次数',
                            type: 'map',
                            coordinateSystem: 'geo',
                            // mapType: name,
                            data: _this.mapData,
                        }
                    ],
                    geo: { 
                        selectedMode: " single ",  // multiple（多选） single（单选）
                        map: name,
                        zoom: 1.2,
                        roam: true, 
                        label: { 
                            normal: { 
                                show: true,
                                color: "rgb(249, 249, 249)", //省份标签字体颜色
                                formatter: p => { 
                                    return p.name + " " + _this.getDataByProvince(p.name);
                                }
                            },
                            emphasis: { 
                                show: true,
                                color: '#f75a00',
                            }
                        },
                        regions: regions,
                        itemStyle: { 
                            normal: { 
                                areaColor: '#24CFF4',  //
                                borderColor: '#53D9FF',
                                borderWidth: 1.3,
                                shadowBlur: 6,
                                shadowColor: 'rgb(58,115,192)',
                                shadowOffsetX: 6,
                                shadowOffsetY: 6,
                            },
                            emphasis: { 
                                areaColor: '#d50000', // '#8dd7fc' #d50000,
                                borderWidth: 1.6,
                                shadowBlur: 10,
                            }
                        },
                    },
                };
                myChart.setOption(_this.mapOption, true);
            }
            else { 
                alert('无法加载该地图');
            }
        }
    
        //echarts双击事件
        function echartsMapDblClick(params) { 
            clearTimeout(timer);
            let provinceName = params.name; //地区name
            let mapCode = _this.provinceMapData[provinceName]; //地区的json数据
            if (!mapCode) { 
                return;
            };
    		loadMap(mapCode, provinceName, false, _this.provinceMapData[provinceName].features);
    
    
           // 双击事件处理的裸机代码
        }
    
        // echarts 单击事件
        _this.mapSelectedData = [];  // 存储多个地图对象
        function echartsMapClick(params) { 
            clearTimeout(timer);
            timer = setTimeout(function () { 
                // console.log("单击");
                if (params) { 
                    let provinceName = params.name; //地区name
    		console.log(provinceName);
    
                    
                    // 否则从数组中删除对应的省份数据
                    if (params.region.selected) { 
    			// 选中省份逻辑代码
                    }
                    else { 
                        // 取消选中逻辑代码
                    }                
                }
            }, 300);
        }
    },

[echart地图数据下载][echart]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDE4NzQ1MA_size_16_color_FFFFFF_t_70]: /images/20221022/cbe8f06de4bb4cf0982e7c0e7f92cf53.png
[echart]: https://www.jianshu.com/p/b0616692fd2e