echarts地图下钻（全国到省）下钻一次

时间：2024-03-12 17:43:59
<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="https://cdn.huanggefan.cn/echarts/4.6.0/echarts.js"></script>
    <script src="https://cdn.huanggefan.cn/jquery/3.4.1/jquery-3.4.1.js"></script>
 
    <title>ECharts China Map Demo</title>
    <style>
        html,
        body {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            border: 0;
        }
    </style>
</head>

<body>
    <div id="main" style="height:100%; width:100%"></div>

    <script type="text/javascript">
        //地图容器
        var chart = echarts.init(document.getElementById(\'main\'));
        //34个省、市、自治区的名字拼音映射数组
        var provinces = [
            //23个省
            "*省",
            "河北省",
            "山西省",
            "辽宁省",
            "吉林省",
            "黑龙江省",
            "江苏省",
            "浙江省",
            "安徽省",
            "福建省",
            "江西省",
            "山东省",
            "河南省",
            "湖北省",
            "湖南省",
            "广东省",
            "海南省",
            "四川省",
            "贵州省",
            "云南省",
            "陕西省",
            "甘肃省",
            "青海省",
            //5个自治区
            "**自治区",
            "广西壮族自治区",
            "内蒙古自治区",
            "宁夏回族自治区",
            "*自治区",
            //4个直辖市
            "北京市",
            "天津市",
            "上海市",
            "重庆市",
            //2个特别行政区
            "香港特别行政区",
            "澳门特别行政区"
        ];
        
        var mapdata = [];
        //绘制全国地图
        $.getJSON(\'../data/china.json\', function(data) {
            d = [];
            for (var i = 0; i < data.features.length; i++) {
                d.push({
                    name: data.features[i].properties.name
                })
            }
            mapdata = d;
            echarts.registerMap(\'china\', data);
            renderMap(\'china\', d);
        });
        
        //地图点击事件
        chart.on(\'click\', function(params) {
                if (provinces.indexOf(params.name) != -1) {
                    $.getJSON(\'../data/province/\' + params.name + \'.json\', function(data) {
                        echarts.registerMap(params.name, data);
                        var d = [];
                        for (var i = 0; i < data.features.length; i++) {
                            d.push({
                                name: data.features[i].properties.name
                            })
                        }
                        renderMap(params.name, d);
                    });
                } else {
                    renderMap(\'china\', mapdata);
                }
        });
        
        //初始化绘制全国地图配置
        var option = {
            tooltip: {
                trigger: \'item\',
                formatter: \'{b}\'
            },
            animationDuration: 1000,
            animationEasing: \'cubicOut\',
            animationDurationUpdate: 1000,
        };
        
        function renderMap(map, data) {
        
            option.series = [{
                name: map,
                type: \'map\',
                mapType: map,
                // roam: false,
                zoom: 1,
                nameMap: {
                    \'china\': \'中国\'
                },
                label: {
                    normal: {
                        show: true
                    },
                    emphasis: {
                        show: true
                    }
                },
                roam: true,
                itemStyle: {
                    normal: {
                        borderColor: \'rgba(147, 235, 248, 1)\',
                        borderWidth: 1,
                        areaColor: {
                            type: \'radial\',
                            x: 0.5,
                            y: 0.5,
                            r: 0.8,
                            colorStops: [{
                                offset: 0,
                                color: \'rgba(175,238,238, 0)\' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: \'rgba(    47,79,79, .1)\' // 100% 处的颜色
                            }],
                            globalCoord: false // 缺省为 false
                        },
                        shadowColor: \'rgba(128, 217, 248, 1)\',
                        shadowOffsetX: -2,
                        shadowOffsetY: 2,
                        shadowBlur: 10
                    },
                    emphasis: {
                        areaColor: \'#389BB7\',
                        borderWidth: 0
                    }
                },
                data: data
            }];
        
            //渲染地图
            chart.setOption(option);
        }
   
    </script>
</body>

</html>
View Code

 

相关文章