菜单 搜索
首页 前端知识 Echarts实现中国地图、省市地区地图

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

2024-02-01 12:02:17 前端知识 前端哥 874 364 我要收藏

中国地图

在这里插入图片描述

山西地图

在这里插入图片描述

天津地图（实现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);
}
复制
转载请注明出处或者链接地址：https://www.qianduange.cn//article/1042.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

jQuery——jQuery学习笔记(完整版）

2024-02-14 09:02:11

靡语IT: JQuery-JavaScript代码库-动画篇

2024-02-14 09:02:11

Ajax用法总结

2024-02-14 09:02:07

JQuery之jsTree树形插件

2024-02-14 09:02:01

Why React Doesn‘t Need jQuery?

2024-02-14 09:02:00

原生HTML通过JS（ES6、JQuery）引入公共模块(header,footer,menu等)实现模块化以及组件化，实现父子组件传值以及数据监听（基于Object.defineProperty）

2024-02-14 09:02:59

jQuery模板字符串

2024-02-14 09:02:58

Echarts数据可视化 第3章 Echarts组件详解 3.6 数据区域缩放

2024-02-14 09:02:47

通过echarts展示不同省、市、区地图 vue3写法

2024-02-14 09:02:43

Echarts5.* 关系图谱(relation graph)添加节点拖拽、点击节点高亮效果

2024-02-14 09:02:43

广告位招租：QQ85750956
大家推荐的文章
1

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
2

移动端css布局大全

2024-02-06 15:02:421000
3

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
4

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
5

HTML5期末大作业：我的家乡网站设计5

2024-01-28 12:01:43999
6

web期末作业网页设计——我的家乡（网页源码）

2024-01-24 15:01:48999
7

尚硅谷css3笔记

2024-02-13 10:02:44998
8

如何利用浏览器测试跨域

2024-02-11 10:02:28998
9

html生日祝福网页制作（粉色主题

2024-01-30 20:01:45997
10

响应式Web开发项目教程（HTML5 CSS3 Bootstrap）第2版 例3-3 CSS3 旋转缩放

2024-02-10 19:02:06995

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！