echarts实现全国地图和省份的切换跳转

最新推荐文章于 2024-07-05 16:40:59 发布
最新推荐文章于 2024-07-05 16:40:59 发布
阅读量505 收藏 3
点赞数 3
文章标签： echarts 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DWZ0720/article/details/136902946
版权 
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <!-- 引入js -->
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <script type="text/javascript" src="js/jquery.js"></script>

</head>

<body>
    <div>
        <div>
            <!-- 设置一个区域 用来存放我们的地图-->
            <div class="box">
                <div id="main" style="width: 100%;height:100%;"></div>
            </div>
        </div>
    </div>
</body>
<script>
    //获取到需要添加地图的位置
    var myChart = echarts.init(document.getElementById('main'));
    //1.中国地图
    var chinaMap = "json/中国地图.json";
    //2.台湾省地图
    var taiWanMap = "json/台湾省.json";
    //3.海南省地图
    var haiNanMap = "json/海南省.json";
    //4.安徽省地图
    var anHuiMap = "json/安徽省.json";
    //5.江西省地图
    var jiangXiMap = "json/江西省.json";
    //6.湖南省地图
    var huNanMap = "json/湖南省.json";
    //7.云南省地图
    var yunNanMap = "json/云南省.json";
    //8.贵州省地图
    var guiZhouMap = "json/贵州省.json";
    //9.广东省地图
    var guangDongMap = "json/广东省.json";
    //10.福建省地图
    var fuJianMap = "json/福建省.json";
    //11.浙江省地图
    var zheJiangMap = "json/浙江省.json";
    //12.江苏省地图
    var jiangSuMap = "json/江苏省.json";
    //13.四川省地图
    var siChuanMap = "json/四川省.json";
    //14.重庆市市地图
    var chongQingMap = "json/重庆市.json";
    //15.湖北省地图
    var huBeiMap = "json/湖北省.json";
    //16.河南省地图
    var heNanMap = "json/河南省.json";
    //17.山东省地图
    var shanDongMap = "json/山东省.json";
    //18.吉林省地图
    var jiLinMap = "json/吉林省.json";
    //19.辽宁省地图
    var liaoNingMap = "json/辽宁省.json";
    //20.天津市市地图
    var tianJinMap = "json/天津市.json";
    //21.北京市市地图
    var beiJingMap = "json/北京市.json";
    //22.河北省地图
    var heBeiMap = "json/河北省.json";
    //23.山西省地图
    var shanXiMap = "json/山西省.json";
    //24.陕西省地图
    var shanXi2Map = "json/陕西省.json";
    //25.宁夏回族自治区省地图
    var ningXiaMap = "json/宁夏回族自治区.json";
    //26.青海省地图
    var qingHaiMap = "json/青海省.json";
    //27.西藏自治区地图
    var xiZangMap = "json/西藏自治区.json";
    //28.黑龙江省地图
    var heiLongJiangMap = "json/黑龙江省.json";
    //29.内蒙古自治区地图
    var neimengGuMap = "json/内蒙古自治区.json";
    //30.甘肃省地图
    var ganSuMap = "json/甘肃省.json";
    //31.新疆维吾尔自治区省地图
    var xinJiangMap = "json/新疆维吾尔自治区.json";
    //32.广西壮族自治区地图
    var guangxiMap = "json/广西壮族自治区.json";
    //设置初始地图
    var mapname = chinaMap;
    //设置省份的json 这里注意名字要和中国地图上的名字一致
    var mapJson = [
        {
            name: "台湾省",
            json: taiWanMap,
        },
        {
            name: "海南省",
            json: haiNanMap,
        },
        {
            name: "安徽省",
            json: anHuiMap,
        },
        {
            name: "江西省",
            json: jiangXiMap,
        },
        {
            name: "湖南省",
            json: huNanMap,
        },
        {
            name: "云南省",
            json: yunNanMap,
        },
        {
            name: "贵州省",
            json: guiZhouMap,
        },
        {
            name: "广东省",
            json: guangDongMap,
        },
        {
            name: "福建省",
            json: fuJianMap,
        },
        {
            name: "浙江省",
            json: zheJiangMap,
        },
        {
            name: "江苏省",
            json: jiangSuMap,
        },
        {
            name: "四川省",
            json: siChuanMap,
        },
        {
            name: "重庆市",
            json: chongQingMap,
        },
        {
            name: "湖北省",
            json: huBeiMap,
        },
        {
            name: "河南省",
            json: heNanMap,
        },
        {
            name: "山东省",
            json: shanDongMap,
        },
        {
            name: "吉林省",
            json: jiLinMap,
        },
        {
            name: "辽宁省",
            json: liaoNingMap,
        },
        {
            name: "天津市",
            json: tianJinMap,
        },
        {
            name: "北京市",
            json: beiJingMap,
        },
        {
            name: "河北省",
            json: heBeiMap,
        },
        {
            name: "山西省",
            json: shanXiMap,
        },
        {
            name: "陕西省",
            json: shanXi2Map,
        },
        {
            name: "宁夏回族自治区",
            json: ningXiaMap,
        },
        {
            name: "青海省",
            json: qingHaiMap,
        },
        {
            name: "西藏自治区",
            json: xiZangMap,
        },
        {
            name: "黑龙江省",
            json: heiLongJiangMap,
        },
        {
            name: "内蒙古自治区",
            json: neimengGuMap,
        },
        {
            name: "甘肃省",
            json: ganSuMap,
        },
        {
            name: "新疆维吾尔自治区",
            json: xinJiangMap,
        },
        {
            name: "广西壮族自治区",
            json: guangxiMap,
        },
    ];
    var provinceData = {
        '台湾省': Math.random() * 100,
        '海南省': Math.random() * 100,
        '安徽省': Math.random() * 100,
        '江西省': Math.random() * 100,
        '湖南省': Math.random() * 100,
        '云南省': Math.random() * 100,
        '贵州省': Math.random() * 100,
        '广东省': Math.random() * 100,
        '福建省': Math.random() * 100,
        '浙江省': Math.random() * 100,
        '江苏省': Math.random() * 100,
        '四川省': Math.random() * 100,
        '重庆市': Math.random() * 100,
        '湖北省': Math.random() * 100,
        '河南省': Math.random() * 100,
        '山东省': Math.random() * 100,
        '吉林省': Math.random() * 100,
        '辽宁省': Math.random() * 100,
        '天津市': Math.random() * 100,
        '北京市': Math.random() * 100,
        '河北省': Math.random() * 100,
        '山西省': Math.random() * 100,
        '陕西省': Math.random() * 100,
        '宁夏回族自治区': Math.random() * 100,
        '青海省': Math.random() * 100,
        '西藏自治区': Math.random() * 100,
        '黑龙江省': Math.random() * 100,
        '内蒙古自治区': Math.random() * 100,
        '甘肃省': Math.random() * 100,
        '新疆维吾尔自治区': Math.random() * 100,
        '广西壮族自治区': Math.random() * 100,
    };
    var citydata = {
        '巴中市': 32,
        '达州市': 22,
        '广元市': 10
    }
    //加载时的文字提示
    myChart.showLoading({ text: '正在加载数据' });  //增加等待提示

    //点击事件
    myChart.on('click', function (e) {
        var clickedName = e.name;
        var clickedMap = mapJson.find(item => item.name === clickedName);
        if (clickedMap) {
            mapname = clickedMap.json;
            mapInit();
        }
        //添加一个返回按键
        $('<div class="back"><button type="button">返回</button></div>').appendTo($('#main'));
        //给返回按键设置样式
        $('.back').css({
            position: 'absolute',//绝对地位
            left: '20px',//设置位置
            top: '20px',//设置位置
            color: 'pink',//设置字体颜色
            'font-size': '20px',//设置字体大小
            cursor: 'pointer',//变小手
        });
        //设置返回按钮的点击事件
        $('.back').click(function () {
            //地图重新设置为中国地图
            mapname = chinaMap;
            //隐藏按钮
            $('.back').css({
                opacity: 0,
            });
            //绘制地图
            mapInit();
            //重新开始定时播放
            timer = setInterval(function () {
                //调用定时播放代码
                timing()
            }, 1500);
        });
    });

    //设置初始化时间
    setTimeout(function () {
        mapInit();
    }, 500);

    //创建地图
    var mapInit = () => {
        //调用中国地图（同步）
        $.getJSON(mapname, function (geoJson) {
            //调用我们通过json对象注册的地图
            echarts.registerMap('China', geoJson);
            //文件加载的动画
            myChart.hideLoading();
            if (mapname === chinaMap) {
                //地图开始
                option = {
                    //设置背景颜色
                    backgroundColor: 'white',
                    series: [{
                        name: '数据',
                        type: 'map',
                        map: 'China',
                        data: Object.keys(provinceData).map(function (key) {
                            return {
                                name: key,
                                value: provinceData[key],
                            };
                        }),
                        label: {
                            show: false,
                        },
                        emphasis: {
                            label: {
                                show: true,
                            },
                        },
                    }],
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}<br/>{c} (种菌菇)'
                    },
                    visualMap: {
                        min: 10,
                        max: 100,
                        text: ['High', 'Low'],
                        realtime: false,
                        calculable: true,
                        inRange: {
                            color: ['orange', 'purple', 'red']
                        }
                    },
                };
            }else{
                option = {
                    //设置背景颜色
                    backgroundColor: 'white',
                    series: [{
                        name: '数据',
                        type: 'map',
                        map: 'China',
                        data: Object.keys(citydata).map(function (key) {
                            return {
                                name: key,
                                value: citydata[key],
                            };
                        }),
                        label: {
                            show: false,
                        },
                        emphasis: {
                            label: {
                                show: true,
                            },
                        },
                    }],
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}<br/>{c} (种菌菇)'
                    },
                    visualMap: {
                        min: 10,
                        max: 100,
                        text: ['High', 'Low'],
                        realtime: false,
                        calculable: true,
                        inRange: {
                            color: ['orange', 'purple', 'red']
                        }
                    },
                };

            };
            myChart.setOption(option);
        });
    };
</script>

</html>

DWZ0720
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
echart之全国地图切换省级地图
m0_69377236的博客
04-18 2111
这是在基础地图地图的基础上结合echarts2的改进版本，echarts2中的版本只有左上角的全国地图的比较简单的实例代码。 《一线大厂Java面试题解析+后端开发学习笔记+最新架构讲解视频+实战项目源码讲义》开源 现在的比较完善（点击全国地图上的省显示对应省内各市的热力分布，对应的全国地图和省级地图的位置大小都会相应的变化，然后再点击右上角的返回全国按钮的时候，隐藏省级地图，全国地图回复原来的大小的位置。） 首先定义几个数据变量： province_data:全国地图对应的各省的地图数据。 city_d.
全国各个省份echarts省市县级地图json v2
07-31
第二版本json 使用效果图预览 https://blog.csdn.net/RedFlag_ing/article/details/83031133
vue中实现百度地图全国与省市地图切换
weixin_43637720的博客
06-20 494
本文主要是用于示例全国地图，点击省市地图直接跳转到该省市地图并展示，可以拓展在地图上显示标记点（本文未做示例），后续有完整代码，但是由于需要与本来项目业务代码进项分割，可能会有些问题，地图渲染上所需要的json文件，有资源链接，但是需要积分，在网上搜搜 也会有相关资源，不是非必要使用该json文件，注意一下导入的文件名称即可。
ECharts（vue、js）实现省市地图切换、资源下载
m0_38082271的博客
11-19 4966
最近写项目用到了ECharts实现省市地图切换，写出来记录一下。 ECharts实现省市地图切换，一般有两种引用形式js文件和json文件。我这里用到的是js文件。js文件资源网上可以搜到。 代码如下： <!-- 引入地图ECharts图表 start --> <!-- 引入河南省地图js文件 --> <script src="./js/hen...
echarts实现中国地图、鼠标悬浮、点击跳转对应省市、给省市图标、缩放、拖拽、自适应
热门推荐
weixin_51225684的博客
03-09 1万+
【代码】echarts实现中国地图、鼠标悬浮、点击跳转对应省市、给省市图标、缩放、拖拽、自适应。
echars实现中国地图 省级自动切换
luer_LJS的博客
08-24 630
最终实现结果 安装 echars npm install echarts --save 在 main.js 中 引入 import echarts from ‘echarts’ //引入 echars Vue.prototype.$echarts = echarts // 全局化 import “echarts/lib/chart/map”; import ‘echarts/map/js/china.js’ // 引入 中国地图的包(大概) 在页面 直接把 代码 拷贝 进去就可以了 <temp
vue3.0中echarts实现中图地图的省份切换，并解决多次切换后地图卡死的情况
周凡的博客
01-16 1664
实现中国地图的省份切换
echarts全国地图与各省地图切换实例.zip
05-20
echarts前端实现全国地图展示、各省市地图展示、全国地图与各省地图切换、各省市点击绑定事件实例，可请求后台数据完成展现
简单实现echarts地图，能进行上下层级跳转
a18328561615的博客
08-08 632
【代码】简单实现echarts地图，能进行上下层级跳转。
echarts map 地图 点击事件 跳转页面
weixin_60723844的博客
11-03 1482
echarts map 地图 点击事件 跳转页面
echarts地图下钻、切换
04-13
特别提醒：由于要获取json文件，需要运行在服务器下，才能看到效果。）利用echarts插件实现的中国省市区三级地图切换。主要采用单击进入下级地图，双击或者右键点击“返回上一级”地图。资源里面包括详细的实现源码，和全国大多数省市区的json地图文件。感谢各位支持！
JQ JS javascript echarts 全国地图与各省市地图切换 地图点击切换 省市区地图切换
04-18
JQ JS javascript echarts 全国地图与各省市地图切换 地图点击切换 省市区地图切换
echarts 全国地图 点击地图上的点，打开超链接 地图点击事件
04-10
echarts 全国地图 点击地图上的点，打开超链接 ，地图点击事件
全国各个省份echarts省市县级地图json
10-12
标题 "全国各个省份echarts省市县级地图json" 暗示了这个压缩包包含的是用于ECharts图表库的中国地图数据，这些数据可能是以JSON格式存储的，以便在Web应用中展示中国各省市县的地理分布。ECharts是百度公司推出的一...
ECharts省份地图数据合集.zip
06-07
ECharts省份地图数据合集。收录中国各个省份的地图JSON数据。ECharts省份地图数据合集。收录中国各个省份的地图JSON数据。ECharts省份地图数据合集。收录中国各个省份的地图JSON数据。ECharts省份地图数据合集。收录...
ECharts全国地图及省份地图js
03-11
ECharts官网（https://echarts.baidu.com）描述：ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层...
使用echarts绘制中国地图根据不同的省份划分到指定区域里面中
最新发布
qq_44552416的博客
07-05 480
需求：我们在开发过程中会遇到使用中国地图来划分不同区域省份下面的数量统计情况，但是有时候使用Echarts里面地图功能和我们实际业务需求不匹配的，这个时候就需要我们手动自定义进行划分不同区域下面的省份数据。例如大区1下面有哪些省份，大区2对应哪些的省份进行划分显示的。【2】把需要合并的省份的经纬度数据合并起来。
echarts全国地图资源,省份名称居中
12-27
echarts 是一个数据可视化的开源库，它提供了丰富的图表类型以及全国地图资源的展示功能。在echarts的全国地图资源中，省份名称都是居中展示的。这意味着无论是在地图的哪个位置，用户都能清晰地看到各个省份的名称，并且能够在省份间进行比较和分析。 echarts 的全国地图资源对于展示各种各样的地理数据非常有用。无论是政府部门、企业还是研究机构，都可以利用echarts的全国地图资源来展示不同的数据，比如人口分布、经济发展水平、资源分布等等。而且由于省份名称居中，用户可以方便地查看各省份的信息，并进行深入的分析。 除了省份名称居中之外，echarts的全国地图资源还具有其他丰富的功能。用户可以根据自己的需求自定义地图的颜色、标签、气泡大小等各种样式，使地图更加生动、直观。此外，echarts还支持交互式的操作，用户可以通过鼠标交互来进行缩放、平移等操作，从而更加灵活地展示数据。 总的来说，echarts的全国地图资源是一个非常强大的工具，它不仅提供了丰富的地图资源，而且还具有灵活的展示和交互功能。通过echarts，用户可以方便地展示和分析各种地理数据，为决策和研究提供有力的支持。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值