ECharts中国地图模板

本文详细介绍使用ECharts绘制中国地图的方法,包括省份和城市的标注、颜色设置等,并提供了具体的JavaScript代码实现。通过本文,读者可以了解到如何配置地图样式、添加交互效果以及如何通过Ajax获取数据来动态更新地图。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

// 城市地图
function chinaMap() {

	require(

	[

	'echarts',

	'echarts/chart/map'

	], function(ec) {

		var myChart = ec.init(document.getElementById('chinaMap'));
		
		var res= "";
		
		data: (function() {
			$.ajax({
				async : false,
				url : basePath + 'url',
				type : 'post',
				dataType : 'json',
				data : {},
				success : function(result) {
					res= result.res;
				}
			});
			return params;
		})();

		var option = {
	
			tooltip : {
				
				trigger : 'item',
				
				formatter : function(params){
					
					return '';
				}
			},
			dataRange: {
		        }
		    },
			series : [ {

				type : 'map',

				mapType : 'china',
				// 鼠标触发是否变色
				hoverable : true,
				// 滚轴调控大小
				roam : true,
				// 显示省会标签
				itemStyle:{
	                                   normal:{
	                	                   label:{show:true},
	                	                   color : '#87CEFA'
	                                          },
	                                   emphasis:{
	                	                   label:{show:true},
	                	                   color : '#FF0000'
	                                           }
	                                   },
				// 省
	            data : {[
			       {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 : '澳门'}
	         ];},
				// 市
				markPoint : {
					// 标注大小,半宽(半径)参数,当图形为方向或菱形则总宽度为symbolSize*2
					symbolSize : 3,
					itemStyle : {
						// 鼠标未点击的效果
						normal : {
							// 标注边线线宽,患病率px,默认为1
							borderWidth : 1,
							label : {
								show : false
							}
						},
						// 鼠标点上去的效果
						emphasis : {
							borderWidth : 5,
							label : {
								show : false
							}
						}
					},
					
					// 城市
					data : [ {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 : "淮安市"}
					]
				},
				// 城市坐标
				geoCoord : {
                                          "上海市" : [ 121.48, 31.22 ],
		                          "北京市" : [ 116.46, 39.92 ],
		                          "保定市" : [ 115.48, 38.85 ],
		                          "沈阳市" : [ 123.38, 41.8 ],
		                          "大连市" : [ 121.62, 38.92 ],
		                          "鞍山市" : [ 122.85, 41.12 ],
		                          "本溪市" : [ 123.73, 41.3 ],
		                          "丹东市" : [ 124.37, 40.13 ],
		                          "哈尔滨市" : [ 126.63, 45.75 ],
		                          "苏州市" : [ 120.62, 31.32 ],
		                          "连云港市" : [ 119.16, 34.59 ],
		                          "杭州市" : [ 120.19, 30.26 ],
		                          "嘉兴市" : [ 120.76, 30.77 ],
		                          "马鞍山市" : [ 118.48, 31.56 ],
		                          "厦门市" : [ 118.1, 24.46 ],
		                          "武汉市" : [ 114.31, 30.52 ],
		                          "广州市" : [ 113.23, 23.16 ],
		                          "中山市" : [ 113.38, 22.52 ],
		                          "柳州市" : [ 109.4, 24.33 ],
		                          "泰兴市" : [120.020228,32.168784],
		                          "海宁市" : [120.688821,30.525544],
		                          "上虞市" : [120.874185,30.016769],
		                          "长乐市" : [119.510849,25.960583],
		                          "四会市" : [112.695028,23.340324],
		                          "西宁市" : [ 101.74, 36.56 ],
		                          "阳泉市" : [113.4778,38.0951],
		                          "赤峰市" : [118.6743,43.2642],
		                          "铜陵市" : [117.9382,30.9375],
		                          "庄河市" : [122.970612,39.69829],
		                          "东港市" : [124.149437,39.883467],
		                          "德惠市" : [125.703327,44.533909],
		                          "延吉市" : [129.51579,42.906964],
		                          "尚志市" : [127.968539,45.214953],
		                          "金坛区" : [119.573395,31.744399],
		                          "启东市" : [121.659724,31.810158],
		                          "海门市" : [121.176609,31.893528],
	 	                          "大丰市" : [120.470324,33.199531],
	 	                          "扬中市" : [119.828054,32.237266],
	 	                          "新源县" : [83.258493,43.434249],
		                          "扶绥县" : [107.911533,22.635821],
		                          "阳城县" : [112.422014,35.482177],
		                          "南岗区" : [126.652098,45.755971],
		                          "海安县" : [120.465995,32.540289],
		                          "东海县" : [118.766489,34.522859],
		                          "灌云县" : [119.255741,34.298436],
		                          "淮安市" : [119.021265,33.597506],
		                          "淮阴区" : [119.020817,33.622452],
		                          "盱眙县" : [118.493823,33.00439],
		                          "金湖县" : [119.016936,33.018162],
		                          "建湖县" : [119.793105,33.472621],
		                          "射阳县" : [120.257444,33.773779],
		                          "嘉善县" : [120.921871,30.841352],
		                          "仙居县" : [120.735074,28.849213],
		                          "肥西县" : [117.166118,31.719646],
		                          "章贡区" : [114.93872,25.851367],
		                          "临朐县" : [118.539876,36.516371],
		                          "汶上县" : [116.487146,35.721746],
		                          "西平县" : [114.026864,33.382315],
		                          "云梦县" : [113.750616,31.021691],
		                          "衡东县" : [112.950412,27.083531],
		                          "九龙坡区" : [106.480989,29.523492],
		                          "景泰县" : [104.066394,37.193519],
		                          "自流井区" : [104.778188,29.343231],
		                          "盐亭县" : [105.391991,31.22318],
		                          "凉州区" : [102.634492,37.93025],
		                          "青羊区" : [104.055731,30.667648]
                                   }
				}
			]
		};
		myChart.setOption(option);
	});
}

注:dataRange控制有value值的省会或者城市

转载于:https://my.oschina.net/Tsher2015/blog/808249

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值