Echarts实现中国地图、省市地区地图

已于 2023-07-07 15:59:44 修改
阅读量8.2k 收藏 27
点赞数 3
分类专栏： Echarts效果 文章标签： echarts javascript 前端
于 2023-07-07 15:54:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44389116/article/details/131598644
版权

中国地图

在这里插入图片描述

山西地图

在这里插入图片描述

天津地图（实现3D立体效果）

在这里插入图片描述
地图赋值

initMapChart() {
	let mapData = [{
		name: '北京',
		value: this.randomData()
	}, {
		name: '天津',
		value: this.randomData()
	}, {
		name: '上海',
		value: this.randomData()
	}, {
		name: '重庆',
		value: this.randomData()
	}, {
		name: '河北',
		value: this.randomData()
	}, {
		name: '河南',
		value: this.randomData()
	}, {
		name: '云南',
		value: this.randomData()
	}, {
		name: '辽宁',
		value: this.randomData()
	}, {
		name: '黑龙江',
		value: this.randomData()
	}, {
		name: '湖南',
		value: this.randomData()
	}, {
		name: '安徽',
		value: this.randomData()
	}, {
		name: '山东',
		value: this.randomData()
	}, {
		name: '新疆',
		value: this.randomData()
	}, {
		name: '江苏',
		value: this.randomData()
	}, {
		name: '浙江',
		value: this.randomData()
	}, {
		name: '江西',
		value: this.randomData()
	}, {
		name: '湖北',
		value: this.randomData()
	}, {
		name: '广西',
		value: this.randomData()
	}, {
		name: '甘肃',
		value: this.randomData()
	}, {
		name: '山西',
		value: this.randomData()
	}, {
		name: '内蒙古',
		value: this.randomData()
	}, {
		name: '陕西',
		value: this.randomData()
	}, {
		name: '吉林',
		value: this.randomData()
	}, {
		name: '福建',
		value: this.randomData()
	}, {
		name: '贵州',
		value: this.randomData()
	}, {
		name: '广东',
		value: this.randomData()
	}, {
		name: '青海',
		value: this.randomData()
	}, {
		name: '西藏',
		value: this.randomData()
	}, {
		name: '四川',
		value: this.randomData()
	}, {
		name: '宁夏',
		value: this.randomData()
	}, {
		name: '海南',
		value: this.randomData()
	}, {
		name: '台湾',
		value: this.randomData()
	}, {
		name: '香港',
		value: this.randomData()
	}, {
		name: '澳门',
		value: this.randomData()
	}, {
		name: '南海诸岛',
		value: this.randomData()
	}];
	basicMapChart(this.$Echarts.init(document.getElementById('map1')), mapData);

	let provinceData1 = [{
		name: '大同市',
		value: this.randomData()
	}, {
		name: '朔州市',
		value: this.randomData()
	}, {
		name: '忻州市',
		value: this.randomData()
	}, {
		name: '吕梁市',
		value: this.randomData()
	}, {
		name: '太原市',
		value: this.randomData()
	}, {
		name: '阳泉市',
		value: this.randomData()
	}, {
		name: '晋中市',
		value: this.randomData()
	}, {
		name: '临汾市',
		value: this.randomData()
	}, {
		name: '长治市',
		value: this.randomData()
	}, {
		name: '晋城市',
		value: this.randomData()
	}, {
		name: '运城市',
		value: this.randomData()
	}];
	sxMapChart(this.$Echarts.init(document.getElementById('map2')), provinceData1);

	let provinceData2 = [{
		name: '蓟州区',
		value: this.randomData()
	}, {
		name: '宝坻区',
		value: this.randomData()
	}, {
		name: '武清区',
		value: this.randomData()
	}, {
		name: '宁河区',
		value: this.randomData()
	}, {
		name: '北辰区',
		value: this.randomData()
	}, {
		name: '西青区',
		value: this.randomData()
	}, {
		name: '东丽区',
		value: this.randomData()
	}, {
		name: '滨海新区',
		value: this.randomData()
	}, {
		name: '静海区',
		value: this.randomData()
	}, {
		name: '津南区',
		value: this.randomData()
	}, {
		name: '河北区',
		value: this.randomData()
	}, {
		name: '河东区',
		value: this.randomData()
	}, {
		name: '河西区',
		value: this.randomData()
	}, {
		name: '南开区',
		value: this.randomData()
	}, {
		name: '和平区',
		value: this.randomData()
	}, {
		name: '红桥区',
		value: this.randomData()
	}];
	this.mapChart = this.$Echarts.init(document.getElementById('map3'));
	tjMapChart(this.mapChart, provinceData2);

	let shadowChart = this.$Echarts.init(document.getElementById('shadowMap'));
	shadowMapChart(shadowChart);// 地图阴影效果
},
randomData() {
	return Math.round(Math.random() * 100);
}

import 'echarts/map/js/china';// 引入插件自带地图js-中国地图数据
import 'echarts/map/js/province/shanxi';// 引入插件自带地图js-山西地图数据
import 'echarts/map/js/province/tianjin';// 引入插件自带地图js-天津地图数据
let colorArr = ['#EFED1E', '#01F408', '#EE3A3B', '#4ADBEC', '#0FEEFB'];

/**
 * 基础地图
 * @param 	chart：echart容器
 * 			chartData： 图表数据
 */
export function basicMapChart(chart, chartData) {
	let option = {
		tooltip: {
			formatter: function(e) {
				var name = e.name ? e.name : '获取中';
				var value = e.value ? e.value : '暂无数据'
				return name + "：" + value;
			}
		},
		visualMap: {
			min: 0,
			max: 100,
			left: '20%',
			bottom: 20,
			text: ['高', '低'],
			calculable: true,
			textStyle: {
				color: '#fff'
			},
			inRange: {
				color: ['rgba(77,152,225,.7)', 'rgba(6,65,160,.9)']
			}
		},
		geo: {
			map: 'china',
			roam: false,
			zoom: 1.1,
			label: {
				emphasis: {
					show: false
				}
			},
			itemStyle: {
				borderColor: 'transparent',
				areaColor: 'transparent'
			}
		},
		series: [{
			type: 'map',
			map: 'china',
			zoom: 1.1,
			itemStyle: {
				borderWidth: 1,
				borderColor: 'rgba(255,255,255,.3)',
				emphasis: {
					borderColor: '#40C9EA',
					shadowColor: 'rgba(3,221,255,0.4)',
	            	shadowBlur: 15,
					label: {
						color: '#fff'
					},
					areaColor: {
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [{
							offset: 0,
							color: '#0F58BF'
						}, {
							offset: 1,
							color: '#084095'
						}],
					},
				}
			},
			data: chartData
		}]
	};
	chart.setOption(option);
}


/**
 * 山西地图
 * @param 	chart：echart容器
 * 			chartData： 图表数据
 */
export function sxMapChart(chart, chartData, flag) {
	let option = {
		tooltip: {
			formatter: function(e) {
				var name = e.name ? e.name : '获取中';
				var value = e.value ? e.value : '暂无数据'
				return name + "：" + value;
			}
		},
		visualMap: {
			show: false,
			min: 0,
			max: 100,
			inRange: {
				color: ['#0388FF', '#053859']
			}
		},
		geo: {
			map: '山西',
			roam: false,
			zoom: 1.2,
			aspectScale: 0.9,
			label: {
				emphasis: {
					show: false
				}
			},
			itemStyle: {
				borderColor: 'transparent',
				areaColor: 'transparent'
			}
		},
		series: [{
			type: 'map',
			map: '山西',
			zoom: 1.2,
			aspectScale: 0.9,
			label: {
				show: true,
				color: '#fff',
			},
			itemStyle: {
				borderWidth: 2,
				borderColor: '#05B8F8',
				emphasis: {
					borderColor: '#5EBADB',
					label: {
						color: '#fff'
					},
					areaColor: '#B4917F'
				}
			},
			data: chartData
		}, {
			type: 'effectScatter',
            coordinateSystem: 'geo',
            showEffectOn: 'render',
            zlevel: 2,
            rippleEffect: {
                period: 15,
                scale: 4,
                brushType: 'fill'
            },
            hoverAnimation: true,
            label: {
                normal: {
                    show: false
                },
            },
            itemStyle: {
                normal: {
                	color: (param) => {
	                    return colorArr[param.dataIndex];
	                },
                    shadowBlur: 10,
                    shadowColor: '#333'
                }
            },
            symbolSize: 12,
            data: [{
		    	name: 'a',
		    	visualMap: false,
			    value: [112.42227451275963, 39.47420453623572],
			}, {
			    name: 'b',
			    visualMap: false,
			    value: [111.106869792807, 38.43977743019218]
			}, {
			    name: 'c',
			    visualMap: false,
			    value: [110.82052318710302, 38.02144293877752]
			}, {
			    name: 'd',
			    visualMap: false,
			    value: [111.035283141381, 37.45859289578324]
			}, {
			    name: 'e',
			    visualMap: false,
			    value: [112.46701616990087, 37.91495779550833]
			}]
		}]
	};
	chart.setOption(option);
	// 图表点击事件
	chart.on('click', function (param) {
		// 地图当前点击经纬度
        console.log(chart.convertFromPixel('geo', [param.event.offsetX, param.event.offsetY]));
    });
}


/**
 * 天津地图
 * @param 	chart：echart容器
 * 			chartData： 图表数据
 */
export function tjMapChart(chart, chartData) {
	let option = {
		tooltip: {
			formatter: function(e) {
				var name = e.name ? e.name : '获取中';
				var value = e.value ? e.value : '暂无数据'
				return name + "：" + value;
			}
		},
		geo: {// 底层地图
			map: '天津',
			roam: false,
			aspectScale: 0.85,
			layoutCenter: ["46%", "52%"],
			layoutSize: '80.5%',
			label: {
				emphasis: {
					show: false
				}
			},
			itemStyle: {
				borderWidth: 4,
				shadowColor: 'red',
				borderColor: '#00f6fb',
				areaColor: 'transparent',
			}
		},
		series: [{// 顶层地图
			type: 'map',
			map: '天津',
			roam: false,
			aspectScale: 0.85,
			layoutCenter: ["46%", "52%"],
			layoutSize: '80%',
			label: {
				show: true,
				color: '#fff',
				formatter: function(param) {
					return '{a|' + param.name + '}';
				},
				rich: {
					a: {
						height: 0,
						fontSize: 16,
						padding: [6,5,0,5],
						backgroundColor: 'rgba(0,243,248,.7)',
					}
				}
			},
			itemStyle: {
				borderWidth: 1,
				borderColor: '#7dcdff',
				areaColor: '#0071c0',
				emphasis: {
					borderColor: '#7dcdff',
					label: {
						color: '#fff'
					},
				}
			},
			data: chartData
		}, 
//		{
//			type: 'scatter',
//          coordinateSystem: 'geo',
//          symbol: 'pin',
//          symbolSize: [50,50],
//          showEffectOn: 'render',
//          zlevel: 2,
//          hoverAnimation: true,
//          rippleEffect: {
//				brushType: 'stroke'
//          },
//          label: {
//              normal: {
//					show: true,
//                  textStyle: {
//                      color: '#fff',
//                      fontSize: 9,
//                  },
//                  formatter (value){
//                      return 100;
//                  }
//              },
//          },
//          itemStyle: {
//              normal: {
//              	color: '#01F408',
//                  shadowBlur: 10,
//                  shadowColor: '#333'
//              }
//          },
//          data: [{
//		    	name: 'a',
//		    	visualMap: false,
//			    value: [117.43499282770108, 39.52057432893366],
//			}, {
//			    name: 'b',
//			    visualMap: false,
//			    value: [117.57121546620637, 39.31794316585672]
//			}, {
//			    name: 'c',
//			    visualMap: false,
//			    value: [116.98470132819752, 38.85156985401295]
//			}]
//		}
		]
	};
	chart.setOption(option);
	// 图表点击事件
	chart.on('click', function (param) {
		// 地图当前点击经纬度
        console.log(chart.convertFromPixel('geo', [param.event.offsetX, param.event.offsetY]));
    });
}

export function shadowMapChart(chart) {
	let option = {
		geo: {// 底层地图
			map: '天津',
			roam: false,
			aspectScale: 0.85,
			layoutCenter: ["46%", "53.5%"],
			layoutSize: '80.5%',
			label: {
				show: false
			},
			itemStyle: {
				borderColor: 'transparent',
				areaColor: 'rgba(0,156,255,.3)',
			}
		},
		series: [{// 顶层地图
			type: 'map',
			map: '天津',
			roam: false,
			aspectScale: 0.85,
			layoutCenter: ["46%", "55%"],
			layoutSize: '80.5%',
			label: {
				show: false,
			},
			itemStyle: {
				borderColor: 'transparent',
				areaColor: 'rgba(0,156,255,.1)',
				emphasis: {
					show: false
				}
			},
		}]
	};
	chart.setOption(option);
}
Shuanger_06
关注
  • 3
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
ECharts--中国地图（无敌详细）
qq_45066453的博客
03-12 5万+
使用Echarts绘制中国地图，其中地图点信息由JSON文件编写，前端html直接从JSON文件中读取地区数据，渲染到前端即可。详细介绍用到的各个功能！代码直接复制运行即可！
教你从零开始画echarts地图
m0_67401660的博客
07-31 5802
离线地图下载地址echarts文档地址。
echarts地图下钻省市区展示，vue版
03-06
单击下钻至下一层地图展示，最低可到区级，双击返回全国地图，鼠标停于散点之上时，信息框提示当前散点对应的城市名称
echarts地图省市区三级下钻联动
04-06
vue echarts地图三级下钻，默认全国地图，例如点击湖北省进入湖北省地图，然后点击武汉进入武汉市地图，点击上一级返回，Vue写法，js写法类似
Echarts实现全国地图展示
最新发布
m0_59281691的博客
04-16 495
ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表官方地址。
echarts3 实现地图全国各省市县地图
07-12
这个是echarts3实现全国各个省市县的下转，包含全国各个省市县的地图json.比较全,欢迎查看核下载
Echarts中国各省市区地图Json下载
07-10
Echarts离线Json地图、中国各省市区都有，直接找到对应的文件就行。最好讲中文名称改成英文，负责怕读取不到
echarts绘制全国地图完整代码
06-08
echarts绘制全国地图完整代码，包括china.js 和echart.js 以及html全部源码。下载即可运行。不需要额外的引入文件。全部在本地。
echarts地图的常见用法：基本使用、区域颜色分级、水波动画、区域轮播、给地图添加背景图片和图标、3d地图、飞线图
weixin_41897680的博客
06-01 1万+
echarts地图的常见用法：基本使用、区域颜色分级、水波动画、区域轮播、给地图添加背景图片和图标、3d地图、飞线图
ECharts地图，echarts自定义map地图，echarts添加标注，自定义坐标、图标、icon
热门推荐
沐枫
10-18 5万+
ECharts如何自定义省、市、县区地图(各省市直辖区的map地图)，ECharts如何在地图上自定义图片、图标，根据经纬度显示自定义建筑图片、添加自定义覆盖物 前言 最近在做一个项目中，需求是：要显示中国某个省份下，某个市的地图，而地图还要有块级效果，自定义地图颜色，还要在地图上显示不同的建筑物图片，还要每隔几秒后（数据是从后端用ws实时推送过来的，要根据推送过来的数据，动态切换显示对......
echarts地图绘制
O_nini_O的博客
06-29 5013
echarts画地图&热力图
echarts插件实现的省市区三级离线地图
09-03
（特别提醒：由于要获取json文件，需要运行在服务器下，才能看到效果。）利用echarts插件实现的中国省市区三级地图切换。主要采用单击进入下级地图，双击或者右键点击“返回上一级”地图。资源里面包括详细的实现源码，和全国大多数省市区的json地图文件。
Echarts 中国各个省市地图
02-10
比较全面的中国各个省市的地图数据，Echarts可以放心使用，内含Json/JS格式数据。请各位参考和使用
echarts中国以及各省市地图
01-07
echarts中国以及各省市地图
echarts地图省市.zip
05-12
echarts中国省市地图点击显示
Echarts全国各省市地图数据
01-23
2019年1月23号最新整理的ECharts地图数据，JSON格式的。里面包含全国地图和全国各省、已经各省的市区的地图数据。
大屏echarts示例------中国地图
zhuangjiajia09的专栏
04-27 3848
echarts做中国地图
Echarts绘制地图（超详细版！）
m0_55245520的博客
01-17 3738
Echarts是一个很有用又很美观的可视化工具，最近想用Echarts绘制地图，但是网上的代码都没有绘制完全，今天分享一下我的代码要注意echarts需要引用一些js文件~
echarts绘制完整的中国地图
longshao_520的博客
08-26 7797
echarts绘制完整的中国地图。带标点以及自定义标点图标
echarts实现江苏地图
11-04
ECharts是一款功能强大的开源数据可视化库，它提供了丰富的图表类型和交互功能，可以用于实现江苏地图的可视化。 要实现江苏地图，首先需要准备地图数据。可以通过ECharts提供的第三方地图工具或者自行寻找江苏地图的地理数据，获取到地图的边界和各个区域的经纬度坐标。 接下来，使用ECharts的地图组件，将地理数据导入到地图中。可以通过`echarts.registerMap`方法注册江苏地图的数据，然后将地图展示在页面上的指定容器中。 在地图中展示区域的数据，可以使用ECharts的系列（series）功能。通过配置series的type为`map`，设置mapType为`江苏`，并设置data属性为需要展示的数据，即可在地图上展示各个区域的信息，如人口分布、GDP等。 为了增加交互性，可以使用ECharts的视觉映射（visualMap）功能。通过配置visualMap的范围和颜色，可以通过颜色的深浅来表示数据的差异。例如，可以使用不同的颜色来区分各个地区的人口密度。 此外，还可以通过ECharts提供的其他功能，如标记（markPoint）、线条（lines）等来进一步扩展地图的展示效果。比如，在地图上标注重要城市或景点的位置，或者展示不同地区之间的交通流量等。 最后，通过ECharts的配置项，可以调整地图的样式、颜色、字体等，以及添加图表的标题、图例等，以满足个性化的需求。 总之，通过ECharts可以很方便地实现江苏地图的可视化展示，展示地区数据的分布和差异，提升数据的可解释性和交互性。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值