基于Echarts插件的省市区多级地图下钻

mapdata里面是地图json数据

下载地址： https://download.csdn.net/download/a707369808/10539812

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ECharts地图选择器</title>
</head>
<style type="text/css">
    body {
        margin: 0;
    }

    html, body, #main {
        width: 100%;
        height: 100%;
    }
</style>
</head>
<body>
<button class="back">上一级</button>
<div id="main"></div>
<script src="js/echarts.min.js"></script>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
    var _name = "中国";
    var _id = 1;
    $(".back").click(function () {
        if (_id.toString().length == 4) {
            cb(_name, _id.toString().substr(0, 2))
        } else if (_id.toString().length == 2) {
            cb("中国", 1)
        }
    });
    var chart = echarts.init(document.getElementById('main'));
    cb("中国", 1);
    chart.on('click', function (params) {
        cb(params.data.name, params.data.id);
    });
    function cb(name, id) {
        if (id.toString().length < 3) {
            _name = name;
        }
        if (id.toString().length < 6) {

            _id = id;
        }
        var path = "";
        if (id.toString().length == 2) {
            path = 'mapdata/geometryProvince/' + id + '.json';
        } else if (id.toString().length == 4) {
            path = 'mapdata/geometryCouties/' + id + '00.json';
        } else if (id == 1) {
            path = 'mapdata/china.json';
        }
        if (path != "") {
            $.get(path, function (json) {
                var data = [];
                for (var i = 0; i < json.features.length; i++) {
                    var info = json.features[i].properties;
                    data.push({id: info.id, name: info.name});
                }
                echarts.registerMap(name, json);
                var option = {
                    series: [
                        {
                            name: name,
                            map: name,
                            type: 'map',
                            label: {
                                show: true,
                                fontSize: 10,
                                position: 'inside'
                            },
                            emphasis: {
                                itemStyle: {
                                    areaColor: '#eee',
                                    borderColor: '#000',
                                    borderWidth: 1,
                                    borderType: 'solid',
                                    shadowBlur: 10,
                                    shadowColor: '#ddd',
                                    shadowOffsetX: 10,
                                    shadowOffsetY: 10,
                                    opacity: 1
                                }
                            },
                            data: data
                        }
                    ]
                };
                chart.setOption(option, false);
            });
        }
    }
</script>
</body>
</body>
</html>

基于Echarts插件的省市区多级地图下钻

猜你喜欢