echarts地图，点击省级跳转到市级的详情

爱吃玉米的螃蟹

已于 2024-03-29 17:47:48 修改

阅读量544

点赞数 3

分类专栏： echarts js jq 文章标签： echarts 前端 javascript

于 2024-03-29 17:44:55 首次发布

本文链接：https://blog.csdn.net/maliao5/article/details/137152266

版权

echarts 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

本文介绍了如何使用ECharts库在HTML页面中动态加载各个省份的json数据，创建地图图表，并实现点击省份名切换到对应的详细地图功能，同时引用了echarts.js和jq.js库进行数据处理和交互设计。

摘要由CSDN通过智能技术生成

下载好个个省份的json数据，

内部定一个变量存储

详细代码放到下放，echarts.js和jq.js应该都有吧。省份的json文件有需要的私信

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地图</title>
    <!-- 引入 ECharts 文件 -->
    <script src="./echarts.min.js"></script>
    <!-- 引入jq -->
    <script src="./jquery.min.js"></script>
    <style>
        .tabs {
            display: none;
            z-index: 10;
            position: fixed;
            top: 0;
            left: 300px;
            font-weight: bold;
        }

        p {
            margin: 10px;
        }

        .province {
            cursor: pointer;
        }
    </style>
</head>

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 900px;height:710px;"></div>
    <div id="tabs" class="tabs">
        <p class="province">全国</p>
        <p>>></p>
        <p id='city'></p>
    </div>
    <script type="module" src="./demo.js"></script>
    <script src="./全国.json"></script>
    <script src="./安徽省.json"></script>
    <script src="./北京市.json"></script>
    <script src="./重庆省.json"></script>
    <script src="./福建省.json"></script>
    <script src="./甘肃省.json"></script>
    <script src="./广东省.json"></script>
    <script src="./广西省.json"></script>
    <script src="./贵州省.json"></script>
    <script src="./海南省.json"></script>
    <script src="./河北省.json"></script>
    <script src="./河南省.json"></script>
    <script src="./黑龙江省.json"></script>
    <script src="./湖北省.json"></script>
    <script src="./湖南省.json"></script>
    <script src="./吉林省.json"></script>
    <script src="./江苏省.json"></script>
    <script src="./江西省.json"></script>
    <script src="./辽宁省.json"></script>
    <script src="./内蒙古.json"></script>
    <script src="./宁夏.json"></script>
    <script src="./青海省.json"></script>
    <script src="./山东省.json"></script>
    <script src="./山西省.json"></script>
    <script src="./陕西省.json"></script>
    <script src="./上海市.json"></script>
    <script src="./四川省.json"></script>
    <script src="./台湾省.json"></script>
    <script src="./天津市.json"></script>
    <script src="./西藏.json"></script>
    <script src="./香港.json"></script>
    <script src="./新疆.json"></script>
    <script src="./云南省.json"></script>
    <script src="./浙江省.json"></script>
    <script>
        $(function () {
            var myChart = echarts.init(document.getElementById('main'));
            myChart.showLoading();
            function maps(urls) {
                myChart.hideLoading();
                echarts.registerMap('anhui', urls);
                var option = {
                    title: {
                        text: ''
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '区域：{b}<br/>{c}'
                    },
                    series: [
                        {
                            name: '香港18区人口密度',
                            type: 'map',
                            mapType: 'anhui', // 自定义扩展图表类型
                            label: {
                                show: true
                            },
                            data: [
                                { name: '广东省', value: 430000, value: 200, },
                                { name: '亳州市', value: 200000 },
                                { name: '淮北市', value: 130000 },
                                { name: '宿州市', value: 60000 },
                                { name: '六安市', value: 260000 },
                                { name: '淮南市', value: 410000 },
                                { name: '蚌埠市', value: 110000 },
                                { name: '滁州市', value: 20000 },
                                { name: '合肥市', value: 300050 },
                                { name: '安庆市', value: 370000 },
                                { name: '铜陵市', value: 210000 },
                                { name: '芜湖市', value: 490000 },
                                { name: '马鞍山市', value: 41000 },
                                { name: '池州市', value: 340000 },
                                { name: '黄山市', value: 250000 },
                                { name: '宣城市', value: 180000 }
                            ],
                        }
                    ]
                };
                myChart.setOption(option);
            }
            maps(allmap);
            myChart.on('click', function (params) {
                console.log(params.name, '112')
                if (params.name == '安徽省') {
                    maps(anhui);
                } else if (params.name == '北京市') {
                    maps(beijing);
                } else if (params.name == '重庆市') {
                    maps(chongqing);
                } else if (params.name == '福建省') {
                    maps(fujian);
                } else if (params.name == '甘肃省') {
                    maps(gansu);
                } else if (params.name == '广东省') {
                    maps(Guangdong);
                } else if (params.name == '广西壮族自治区') {
                    maps(guangxi);
                } else if (params.name == '贵州省') {
                    maps(guizhou);
                } else if (params.name == '海南省') {
                    maps(hainan);
                } else if (params.name == '河北省') {
                    maps(hebei);
                } else if (params.name == '河南省') {
                    maps(henan);
                } else if (params.name == '黑龙江省') {
                    maps(heilongjiang);
                } else if (params.name == '湖北省') {
                    maps(hubei);
                } else if (params.name == '湖南省') {
                    maps(hunan);
                } else if (params.name == '吉林省') {
                    maps(jiling);
                } else if (params.name == '江苏省') {
                    maps(jiangsu);
                } else if (params.name == '江西省') {
                    maps(jiangxi);
                } else if (params.name == '辽宁省') {
                    maps(liaoling);
                } else if (params.name == '内蒙古自治区') {
                    maps(neimenggu);
                } else if (params.name == '宁夏回族自治区') {
                    maps(lingxia);
                } else if (params.name == '青海省') {
                    maps(qinghai);
                } else if (params.name == '山东省') {
                    maps(shandong);
                } else if (params.name == '山西省') {
                    maps(shanxi);
                } else if (params.name == '陕西省') {
                    maps(shangxi);
                } else if (params.name == '上海市') {
                    maps(shanghai);
                } else if (params.name == '四川省') {
                    maps(sichuan);
                } else if (params.name == '台湾省') {
                    maps(taiwan);
                } else if (params.name == '天津市') {
                    maps(tianjing);
                } else if (params.name == '西藏自治区') {
                    maps(xizang);
                } else if (params.name == '香港') {
                    maps(xianggang);
                } else if (params.name == '新疆维吾尔自治区') {
                    maps(xingjiang);
                } else if (params.name == '云南省') {
                    maps(yunnan);
                } else if (params.name == '浙江省') {
                    maps(zhejiang);
                }
                $('#tabs').css('display', 'flex');
                $('#city').html(params.name);
            });
            $('.province').on('click', function () {
                $('#tabs').css('display', 'none');
                maps(allmap);
            })
        })
    </script>
</body>

</html>

1711705207703