echarts 加载地图双击地图下深

在这里插入图片描述

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地图数据下载

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值