Echarts地图局部放大及返回实例

目录

• 1、引用重点
• 2、实例解析

1、引用重点

①、echarts.min.js
②、地图Json

2、实例解析

【路径关系】：

var haerbin = 'json/haerbin.json';
var achengMap = 'json/sub-map/acheng.json';
var bayanMap = 'json/sub-map/bayan.json';
var binxianMap = 'json/sub-map/binxian.json';
var daoliMap = 'json/sub-map/daoli.json';
var daowaiMap = 'json/sub-map/daowai.json';
var fangzhengMap = 'json/sub-map/fangzheng.json';
var hulanMap = 'json/sub-map/hulan.json';
var mulanMap = 'json/sub-map/mulan.json';
var nangangMap = 'json/sub-map/nangang.json';
var pingfangMap = 'json/sub-map/pingfang.json';
var shangzhiMap = 'json/sub-map/shangzhi.json';
var shuangchengMap = 'json/sub-map/shuangcheng.json';
var songbeiMap = 'json/sub-map/songbei.json';
var tongheMap = 'json/sub-map/tonghe.json';
var wuchangMap = 'json/sub-map/wuchang.json';
var xiangfangMap = 'json/sub-map/xiangfang.json';
var yanshouMap = 'json/sub-map/yanshou.json';
var yilanMap = 'json/sub-map/yilan.json';
var mapname = haerbin;
var mapJson = [
    {name: '阿城区', json: achengMap},
    {name: '巴彦县', json: bayanMap},
    {name: '宾县', json: binxianMap},
    {name: '道里区', json: daoliMap},
    {name: '道外区', json: daowaiMap},
    {name: '方正县', json: fangzhengMap},
    {name: '呼兰区', json: hulanMap},
    {name: '木兰县', json: mulanMap},
    {name: '南岗区', json: nangangMap},
    {name: '平房区', json: pingfangMap},
    {name: '尚志市', json: shangzhiMap},
    {name: '双城区', json: shuangchengMap},
    {name: '松北区', json: songbeiMap},
    {name: '通河县', json: tongheMap},
    {name: '五常县', json: wuchangMap},
    {name: '香坊区', json: xiangfangMap},
    {name: '延寿县', json: yanshouMap},
    {name: '依兰县', json: yilanMap},
];


    let myCharts = echarts.init(document.getElementById('main'));
    var mapData = [ // 地图数据
        {name: '方正县', value: 20},
        {name: '道里区', value: 15},
        {name: '阿城区', value: 11},
        {name: '呼兰区', value: 12}
    ];
    var sanData = [ // 散点数据
        {name: '方正县', value: 20},
        {name: '道里区', value: 15},
        {name: '阿城区', value: 11},
        {name: '呼兰区', value: 12}

    ];
    var geoCoordMap = { // 散点坐标
        '方正县': [128.836131,45.839536],
        '道里区': [126.612532,45.762035],
        '阿城区': [126.972726,45.538372],
        '呼兰区': [126.603302,45.98423]
    };
$('<div id="back" class="back">〈 返回</div>').appendTo($('#main'));
$('.back').css({
    position: 'absolute',
    left: '17px',
    top: '25px',
    color: 'rgb(222,222,222)',
    'font-size': '12px',
    cursor: 'pointer',
    border: '1px solid rgba(255, 255, 255, .5)',
    padding: '0px 6px 1px 0px',
    'border-radius': '3px',
    'z-index': '100',
    visibility: 'hidden'

});
    var convertData = function (data) { // 处理数据函数
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value)
                });
            }
        }
        return res;
    };
    var mapInit = () =>$.get(mapname,function(yCjson){

        echarts.registerMap('haerbin', yCjson, {});

        let option = { // echarts 配置
            tooltip: {
                trigger: 'item'
            },
            geo: { // 地图配置
                show: true,
                map: 'haerbin',
                label: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: false
                    }
                },
                roam: false,
                itemStyle: {
                    normal: {
                        areaColor: '#47D1FF',
                        borderColor: '#3B5077'
                    },
                    emphasis: {
                        areaColor: '#2B91B7'
                    }
                },
                zoom: 1.2
            },
            series: [{ // 散点配置
                name: '数量',
                type: 'effectScatter',
                coordinateSystem: 'geo',
                data: convertData(sanData),
                symbolSize: function (val) {
                    return val[2];
                },
                showEffectOn: 'emphasis',
                rippleEffect: {
                    brushType: 'stroke'
                },
                hoverAnimation: true,
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'right',
                        show: false
                    },
                    emphasis: {
                        show: true
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#ff8003'
                    }
                }
            }, { // 地图配置
                name: '工程数',
                type: 'map',
                mapType: 'haerbin', // 自定义扩展图表类型
                geoIndex: 0,
                // aspectScale: 0.75, // 长宽比
                itemStyle: {
                    normal: {label: {show: true}},
                    emphasis: {label: {show: true}}
                },
                data: mapData
            }]
        };
        myCharts.setOption(option);
    });
    myCharts.on('click', function (e) {
        var chooseName = mapJson.filter((item) => {
            return item.name == e.name;
        });
        mapname = chooseName[0].json;

        alert("初始化本区域大屏幕数据");
        mapDate = [{name: '哈市第一医院', value: [126.61686, 45.75567]}];


        $('.back').css({
            visibility: 'visible'
        });
        $('.back').click(function () {
            mapname = haerbin;
            mapDate = [
                {name: '哈市第一医院', value: [126.61686, 45.75567]}
            ];
            $('.back').css({
                visibility: 'hidden'
            });
            alert("重新初始化数据");

            mapInit();
        });
        mapInit();
    });
    mapInit();

核心就是写一个“返回”按钮 然后css设置隐藏 点击事件触发控制隐藏开关+小地图替换haerbin地图