EChart如何实现中国地图和省份下钻

已于 2022-08-26 10:41:18 修改
阅读量1.3k 收藏 10
点赞数 1
分类专栏： echart 文章标签： echarts
于 2020-12-31 10:53:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40921989/article/details/112004380
版权

由于项目需要，做一个地图相关的需求研究了一波，分享出来，希望对大家有所帮助
效果图如下：
中国地图展示
在这里插入图片描述
代码如下：

前台jsp代码

<%@ page language="java" contentType="text/html; charset=utf-8"%>
<%@ page import="java.util.List"%>
<%@ page import="java.util.Map"%>

<%
	String path = request.getContextPath();
	String orgkey = request.getParameter("orgkey");
	path+="/dealmap?f="+System.currentTimeMillis()+"&orgkey="+orgkey;
%>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="ECharts">
    <title>ECharts · Example</title>
	
<script type="text/javascript" src="webos/js/jquery.js"></script>
<script type="text/javascript" src="webos/js/echarts.min.js"></script>

</head>

<body>
    <div id="chart" class="chart" style="height: 530px;"></div>
	
	<script type="text/javascript">
	//散点相关信息
    var fenCompany = [{"cp":[120.756939,31.645717],"name":"常熟分公司"},
                        {"cp":[121.126012,31.454056],"name":"太仓分公司"},
                        {"cp":[120.651997,31.168648],"name":"吴江分公司"},
                        {"cp":[120.98034,31.389019],"name":"昆山分公司"},
                        {"cp":[120.553886,31.867892],"name":"张家港分公司"}]
	
    // 基于准备好的dom，初始化echarts图表
    var myChart = echarts.init(document.getElementById('chart')); 
    var option=null;
        
      //各省份的地图json文件
       var provinces = {
            '上海': 'webos/map/json/data-1482909900836-H1BC_1WHg.json',
            '河北': 'webos/map/json/data-1482909799572-Hkgu_yWSg.json',
            '山西': 'webos/map/json/data-1482909909703-SyCA_JbSg.json',
            '内蒙古': 'webos/map/json/data-1482909841923-rkqqdyZSe.json',
            '辽宁': 'webos/map/json/data-1482909836074-rJV9O1-Hg.json',
            '吉林': 'webos/map/json/data-1482909832739-rJ-cdy-Hx.json',
            '黑龙江': 'webos/map/json/data-1482909803892-Hy4__J-Sx.json',
            '江苏': 'webos/map/json/data-1482909823260-HkDtOJZBx.json',
            '浙江': 'webos/map/json/data-1482909960637-rkZMYkZBx.json',
            '安徽': 'webos/map/json/data-1482909768458-HJlU_yWBe.json',
            '福建': 'webos/map/json/data-1478782908884-B1H6yezWe.json',
            '江西': 'webos/map/json/data-1482909827542-r12YOJWHe.json',
            '山东': 'webos/map/json/data-1482909892121-BJ3auk-Se.json',
            '河南': 'webos/map/json/data-1482909807135-SJPudkWre.json',
            '湖北': 'webos/map/json/data-1482909813213-Hy6u_kbrl.json',
            '湖南': 'webos/map/json/data-1482909818685-H17FOkZSl.json',
            '广东': 'webos/map/json/data-1482909784051-BJgwuy-Sl.json',
            '广西': 'webos/map/json/data-1482909787648-SyEPuJbSg.json',
            '海南': 'webos/map/json/data-1482909796480-H12P_J-Bg.json',
            '四川': 'webos/map/json/data-1482909931094-H17eKk-rg.json',
            '贵州': 'webos/map/json/data-1482909791334-Bkwvd1bBe.json',
            '云南': 'webos/map/json/data-1482909957601-HkA-FyWSx.json',
            '西藏': 'webos/map/json/data-1482927407942-SkOV6Qbrl.json',
            '陕西': 'webos/map/json/data-1482909918961-BJw1FyZHg.json',
            '甘肃': 'webos/map/json/data-1482909780863-r1aIdyWHl.json',
            '青海': 'webos/map/json/data-1482909853618-B1IiOyZSl.json',
            '宁夏': 'webos/map/json/data-1482909848690-HJWiuy-Bg.json',
            '新疆': 'webos/map/json/data-1482909952731-B1YZKkbBx.json',
            '北京': 'webos/map/json/data-1482818963027-Hko9SKJrg.json',
            '天津': 'webos/map/json/data-1482909944620-r1-WKyWHg.json',
            '重庆': 'webos/map/json/data-1482909775470-HJDIdk-Se.json',
            '香港': 'webos/map/json/data-1461584707906-r1hSmtsx.json',
            '澳门': 'webos/map/json/data-1482909771696-ByVIdJWBx.json'
        };

        //各省份的数据
        var allData = [{
            name: '北京'
        }, {
            name: '天津'
        }, {
            name: '上海'
        }, {
            name: '重庆'
        }, {
            name: '河北'
        }, {
            name: '河南'
        }, {
            name: '云南'
        }, {
            name: '辽宁'
        }, {
            name: '黑龙江'
        }, {
            name: '湖南'
        }, {
            name: '安徽'
        }, {
            name: '山东'
        }, {
            name: '新疆'
        }, {
            name: '江苏'
        }, {
            name: '浙江'
        }, {
            name: '江西'
        }, {
            name: '湖北'
        }, {
            name: '广西'
        }, {
            name: '甘肃'
        }, {
            name: '山西'
        }, {
            name: '内蒙古'
        }, {
            name: '陕西'
        }, {
            name: '吉林'
        }, {
            name: '福建'
        }, {
            name: '贵州'
        }, {
            name: '广东'
        }, {
            name: '青海'
        }, {
            name: '西藏'
        }, {
            name: '四川'
        }, {
            name: '宁夏'
        }, {
            name: '海南'
        }, {
            name: '台湾'
        }, {
            name: '香港'
        }, {
            name: '澳门'
        }];
        for (var i = 0; i < allData.length; i++) {
            //allData[i].value = Math.round(Math.random() * 100);
            allData[i].value = 0;
            allData[i].yyb = 0;
            allData[i].dgqyzx = 0;
            allData[i].zxyyb = 0;
            allData[i].fgs = 0;
            allData[i].highriskorg = 0;
        }

        loadMap('webos/map/json/data-1527045631990-r1dZ0IM1X.json', 'china');//初始化全国地图

        var timeFn = null;

        //单击切换到省级地图，当mapCode有值,说明可以切换到下级地图
        myChart.on('click', function(params) {
            clearTimeout(timeFn);
            //由于单击事件和双击事件冲突，故单击的响应事件延迟250毫秒执行
            timeFn = setTimeout(function() {
                var name = params.name; //地区name
                var mapCode = provinces[name]; //地区的json数据
                if (!mapCode) {
                    return;
                }

                loadMap(mapCode, name);
                
            }, 250);
        });
        
        var data = []
        //创建一个散点数组，用于保存经纬度坐标以及项目数量，从而在地图上显示地市项目数量
        var cityProjData = [];
        //将城市数据整理到地图数据中
        fenCompany.forEach(function(v) {
            // 地区名称
            var name = v.name;
            data.push({
                name: name,
                value: Math.round(Math.random() * 10 + 10)
            })
            cityProjData.push({
                name: name,
                value: v.cp.concat(Math.round(Math.random() * 10 + 10))//将坐标数组和项目数量组合到一个数组中
            })
        });

        // 绑定双击事件，返回全国地图
        myChart.on('dblclick', function(params) {
            //当双击事件发生时，清除单击事件，仅响应双击事件
            clearTimeout(timeFn);
            
            //返回全国地图
            loadMap('webos/map/json/data-1527045631990-r1dZ0IM1X.json', 'china');
        });

        /**
                       获取对应的json地图数据，然后向echarts注册该区域的地图，最后加载地图信息
         @params {String} mapCode:json数据的地址
         @params {String} name: 地图名称
         */
        function loadMap(mapCode, name) {
            $.get(mapCode, function(data) {
                if (data) {
                    echarts.registerMap(name, data);
                    option = {
                    	    title: {
                    	        text: '风险地图',
                    	        subtext: '双击返回中国地图',
                    	        left: 'center'
                    	    },
                    	    toolbox: {
                    	        feature: {
                    	            dataView: {show: false, readOnly: false},
                    	            magicType: {show: false, type: ['line', 'map']},
                    	            restore: {show: false},
                    	            saveAsImage: {show: true}
                    	        }
                    	    },
                        tooltip: {
                            show: true,
			                formatter: function(params) {
                                if (params.data) {
                                	if(typeof(params.data.value[2]) != "undefined"){
                                		return params.name + '</br>' 
	                                	+ '下辖营业部数：'+params.data.value[2] +'</br>'
	                                	+ '低风险营业部数：'+params.data.value[3] +'</br>'
	                                	+ '中风险营业部数：'+params.data.value[4] +'</br>'
	                                	+ '中高风险营业部数：'+params.data.value[5] +'</br>'
	                                	+ '高风险营业部数：'+params.data.value[6] +'</br>'
                                	}else{
	                                	return params.name + '</br>' 
	                                	+ '分公司数：'+params.data['fgs'] +'</br>'
	                                	+ '区域代管中心：'+params.data['dgqyzx'] +'</br>'
	                                	+ '中心营业部：'+params.data['zxyyb'] +'</br>'
	                                	+ '营业部：'+params.data['yyb'] +'</br>'
	                                	+ '其中高风险营业部数：'+params.data['highriskorg']
                                	}
                                }
                            },
                        },
                        geo: {
			                show: true,
			                map: name,
			                label: {
			                    normal: {
			                        show: true
			                    },
			                    emphasis: {
			                        show: true,
			                    }
			                },
			                roam: false,
			                itemStyle: {
			                    normal: {
			                        areaColor: '#fff',
			                        borderColor: '#3B5077',
			                    },
			                    emphasis: {
			                        areaColor: '#FFD700',
			                    }
			                }
			            },
                        visualMap: {
                            type: 'continuous',
                            text: ['', ''],
                            showLabel: true,
                            left: '50',
                            min: 0,
                            max: 100,
                            inRange: {
                                //color: ['#edfbfb', '#b7d6f3', '#40a9ed', '#3598c1', '#215096', ]
                                color: ['#b7d6f3','#228B22','#880000','#B22222','#FF0000']
                            },
                            splitNumber: 0
                        },
                        series: [{
                            name: 'MAP',
                            type: 'map',
                            map: name,
                            mapType: name,
                            geoIndex: 0,
		                    aspectScale: 0.75, //长宽比
		                    showLegendSymbol: false, // 存在legend时显示
                            selectedMode: 'false',//是否允许选中多个区域
                            label: {
                                normal: {
                                    show: true
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            roam: true,
                            itemStyle: {
		                        normal: {
		                            areaColor: '#031525',
		                            borderColor: '#0227ad',
		                        },
		                        emphasis: {
		                            areaColor: '#2B91B7'
		                        }
		                    },
		                    animation: false,
                            data: allData
                        },{
		                    name: '点',
		                    type: 'scatter',
		                    coordinateSystem: 'geo',
		                    symbol: 'pin', //气泡 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
		                    symbolSize: function (data) {
		                        return data[2]*6;
		                    },
		                    emphasis: {
		                        label: {
		                            show: true,
		                            formatter: function (param) {
		                                return param.data.value[2];
		                            },
		                            position: 'top'
		                        }
		                    },
		                    itemStyle: {
		                        shadowBlur: 10,
		                        shadowColor: 'rgba(25, 100, 150, 0.5)',
		                        shadowOffsetY: 5,
		                        color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
		                            offset: 0,
		                            color: 'rgb(129, 227, 238)'
		                        }, {
		                            offset: 1,
		                            color: 'rgb(25, 183, 207)'
		                        }])
		                    },
		                    zlevel: 6,
		                    data: cityProjData,
		                }]
                    };
                    myChart.setOption(option);
                    
                } else {
                    alert('无法加载该地图');
                }
            });
        }
        
	$.ajax({
		url: '<%=path%>',
		type: 'POST',
		data: "",
		dataType: 'json',
		error: function() {
			alert("系统Session过期，请重新登录系统后，在操作！");
		},
		success: function(res) {
			if (res.success == "1"){
				getRsikProvince(res.riskData);
				getInfo(res.hoverInfos);
				getCompanyInfo(res.fenConpanyInfos)
				myChart.setOption(option);
		    }
		}
	});
	
    function getInfo(list) {
        $.each(list, function(index, element) {
        	allData[element.PROVINCE_NAME].yyb=element.YYB;
        	allData[element.PROVINCE_NAME].dgqyzx=element.DGQYZX;
        	allData[element.PROVINCE_NAME].zxyyb=element.ZXYYB;
        	allData[element.PROVINCE_NAME].fgs=element.FGS;
        	allData[element.PROVINCE_NAME].highriskorg=element.HIGHRISKORG;
        });
    }
    
    function getCompanyInfo(list) {
        $.each(list, function(index, element) {
        	if(element.company=='常熟分公司'){
        		cityProjData[0].value[2]=element.orgNum;
        		cityProjData[0].value[3]=element.lowCount;
        		cityProjData[0].value[4]=element.midCount;
        		cityProjData[0].value[5]=element.midHighCount;
        		cityProjData[0].value[6]=element.highCount;
        	}else if(element.company=='太仓分公司'){
        		cityProjData[1].value[2]=element.orgNum;
        		cityProjData[1].value[3]=element.lowCount;
        		cityProjData[1].value[4]=element.midCount;
        		cityProjData[1].value[5]=element.midHighCount;
        		cityProjData[1].value[6]=element.highCount;
        	}else if(element.company=='吴江分公司'){
        		cityProjData[2].value[2]=element.orgNum;
        		cityProjData[2].value[3]=element.lowCount;
        		cityProjData[2].value[4]=element.midCount;
        		cityProjData[2].value[5]=element.midHighCount;
        		cityProjData[2].value[6]=element.highCount;
        	}else if(element.company=='昆山分公司'){
        		cityProjData[3].value[2]=element.orgNum;
        		cityProjData[3].value[3]=element.lowCount;
        		cityProjData[3].value[4]=element.midCount;
        		cityProjData[3].value[5]=element.midHighCount;
        		cityProjData[3].value[6]=element.highCount;
        	}else if(element.company=='张家港分公司'){
        		cityProjData[4].value[2]=element.orgNum;
        		cityProjData[4].value[3]=element.lowCount;
        		cityProjData[4].value[4]=element.midCount;
        		cityProjData[4].value[5]=element.midHighCount;
        		cityProjData[4].value[6]=element.highCount;
        	}
        });
    }
	
	//给风险区域赋值，用来区分颜色用
    function getRsikProvince(list) {
        $.each(list, function(index, element) {
        	if(element.FX_LEVEL=='中风险'){
	        	allData[element.PROVINCE_NAME].value=50;
        	}else if(element.FX_LEVEL=='中高风险'){
        		allData[element.PROVINCE_NAME].value=75;
        	}else if(element.FX_LEVEL=='高风险'){
        		allData[element.PROVINCE_NAME].value=100;
        	}else if(element.FX_LEVEL=='低风险'){
        		allData[element.PROVINCE_NAME].value=25;
        	}
        });
    }
        
</script>
</body>
</html>

还有需要引用一些省份json的文件，需要自行下载。
在这里插入图片描述
后台写好控制器，像前台传数据即可实现上图效果。

Taylor_锋
关注
  • 1
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts中应用中国地图并前往指定的下钻
slom_fxt的博客
09-22 1003
echarts中应用中国地图并前往指定的下钻
echarts 画中国地图
weixin_51666715的博客
04-25 2774
数据可视化平台，中国各省数据和坐标 阿里云可视化 效果 使用echart画中国地图，步骤如下 1.安装依赖 npm i echarts 创建一个js文件 当你可以访问https请求的时候则使用，如下代码 import axios from "axios"; export default axios.get("https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json") 如果无法请求https接口，则直接导入 3。配置option配
H5+echarts模拟全国程序员可视化大数据【附完整源码】_html和echarts可视化源码
最新发布
2401_84132628的博客
05-13 337
🍅 简介：Java领域优质创作者🏆、【java李杨勇】公号作者✌ 简历模板、学习资料、面试题库【关注我，都给你】🍅🍅临近学期结束，还是毕业设计，你还在做java程序网络编程，期末作业，前端网页设计、老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等。这里，你想解决的问题，在这专栏👇🏻👇🏻👇🏻👇🏻都能满足你的需求。原始Jsp、SSM、SpringBoot、以及HTML+CSS+JS页面设计, web大学生网页设计作业源码等等都可以参考得到解决。
【Echarts】绘制中国地图及各省份地图
qq_25285531的博客
12-07 3113
名字命名在对应的js文件里，需要写对，地理坐标js文件也有，复制出来就可以了。js，放射状和扩散圈。
ECharts实现中国地图数据可视化
热门推荐
情非得已小猿猿
01-15 4万+
项目中数据可视化已经太常见了，echarts是一款使用率非常高的插件工具，很多大平台都是使用echarts；一般都有折线图、柱形图、饼形图，还有常见的地图，今天就地图来说一下——中国地图。 1、首先官网上下载一个echart.js或echart.min.js，如下根据自己的需要下载对应的文件。网址：https://echarts.baidu.com/ 2、下载中国地图插件china....
echars 创建中国气泡地图和定位图表点
CPan_的博客
04-24 2302
function chinaMap() { // 1、初始化echarts示例map var map = echarts.init(document.getElementById('fans_map')); //（2）粉丝位置引入data数据 var data = [ {name: '海门'...
echartmap 3 世界地图 添加中国省份轮廓
04-02
echartmap 3 世界地图 添加中国省份轮廓。 使用方法： //使用ajax加载；也可以修改为AMD的形式，然后使用requirejs进行加载 $.get('./world.json', function (json) { //注册到地图中。 echarts.registerMap('...
vue实现百度echart地图省市级别点击下钻显示效果
03-28
vue实现百度echart地图省市级别点击下钻显示效果
echart百度地图全国所有省份的js
02-18
echart百度地图全国所有省份的js文件：如：guangdong.js，shanghai.js, shenzhen.js...................
echart 中国各省份地图
07-07
echart 中国各省份地图
echarts地图：全球+全国+省级，可下钻层级
07-21
使用echarts来显示世界地图和全国地图，并且可以下钻层级 适用于使用echarts+vue3.0+vite的人员 解决全球下钻到全国到省级的问题 以及不要的地图资源
echarts地图飞线实现
06-25
echarts地图展示、地图飞线，地图线行展示，大气、简洁、好看。
echarts地图下钻（全国、省、市）多级下钻.zip
03-06
echarts地图下钻（全国、省、市）多级下钻，用webstorm导入项目，启动即可呈现效果.
echarts地图下钻省市区展示，js版
03-06
单击下钻至下一层地图展示，最低可到区级，双击返回全国地图，鼠标停于散点之上时，信息框提示当前散点对应的城市名称
Echarts实现气泡图（含完整代码，可直接运行）
Delicia_Lani的博客
11-08 1万+
Echarts示例图中提供的气泡图是这样的：Examples - Apache ECharts 当然还提供了另外几个，具体可参考官网。但是我的需求中不能显示横纵坐标，具体的实现效果如图所示： 在展现气泡的过程中，最大的问题应该是某一个气泡的横纵坐标，因为要防止重合。其实后来想想，可以不用这个气泡图，而是自己写，然后生成随机数渲染图，并且球的大小根据value值得变大而变大。既然已经用了，那就来说说使用Echarts的实现吧。 <template> <div> &.
Echarts全国地图二级钻取
weixin_30416871的博客
08-07 579
<html> <head> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/echarts-all-3.js"></script> <script src="js/china.js"></scri...
vue项目使用 echarts 对国内各省份地图的在线调用解决方法（详解）
baluo8339的博客
07-04 965
前言： 　　　　vue项目开发中，我们会使用到各种的第三方图形库，这里只说使用最多的echarts图形库。 　　　　echarts图形库，是百度良心之作，图表类型丰富，定制化强，文档齐全，是目前为止最为之作精良的H5图表库。 　　　　在大数据可视化的项目中，我们会或多或少的想到使用echarts，如果你选择了使用echarts，那么你不难发现，现在的echarts地图调用的时候，省...
Vue + Echart实现国省市县地图下钻
liangsw
08-17 2054
Vue + Echart实现国省市县地图下钻：中国 --> 甘肃省 --> 陇南市 --> 康县
echart地图实现全球每个省份的点击选中
04-29
要实现这个功能，你需要先获取到全球各个省份的地图数据，可以从官方网站或第三方数据源获取。然后使用 Echarts 的地图组件将地图数据渲染出来。 接着，绑定地图的点击事件，在点击事件中获取到当前点击的省份信息...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值