echart+html 云南省地图

最新推荐文章于 2024-05-16 13:52:06 发布

惜晨宝贝

最新推荐文章于 2024-05-16 13:52:06 发布

阅读量444

点赞数

文章标签： html 前端 echarts

本文链接：https://blog.csdn.net/weixin_50639421/article/details/133909326

版权

echart+html 云南省地图

效果图

在这里插入图片描述

需要文件

地图json：地图json https://datav.aliyun.com/portal/school/atlas/area_selector
echart：https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js

代码

<!DOCTYPE html>
<html style="height: 100%" lang="en">
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta charset="utf-8"/>
		<title>云南省地图</title>
	</head>

	<body style="height: 100%; margin: 0">
		<div id="main" style="width: 900px;height:600px;background-color: black;"></div>

		<script src="./js/jquery-3.5.1/jquery-3.5.1.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
		<script src="./js/yunnan.js"></script>
		<script type="text/javascript">
			var mapJson = "./js/yunnan.json";
			var myChart = echarts.init(document.getElementById('main'))
			myChart.showLoading();

			$.getJSON(mapJson, function(geoJson) {

				echarts.registerMap('yunnan', geoJson);
				myChart.hideLoading();

				option = {
					title: {
						top: 30,
						text: '云南省地图',
						x: 'center',
						textStyle: {
							color: '#fff',
							fontSize: 12,
						}
					},
					visualMap: {
						show: false,
						min: 0,
						max: 100,
						inRange: {
							color: ['red', 'blue'],
						},
					},
					geo: {
						map: "yunnan",
						aspectScale: 0.75, // 长宽比
						zoom: 1.1,
						roam: false,
						itemStyle: {
							normal: {
								areaColor: {
									type: 'radial',
									x: 0.2,
									y: 0.2,
									r: 0.8,
									colorStops: [{
											offset: 0,
											color: 'rgba(15, 41, 77, 0.10)', // 0% 处的颜色
										},
										{
											offset: 1,
											color: 'rgba(89, 127, 178,0.3)', // 100% 处的颜色
										},
									],
									globalCoord: true, // 缺省为 false
								},

								shadowColor: '#87DEFF',
								borderColor: 'transparent',
								shadowOffsetX: 10,
								shadowOffsetY: 15,
							},
							emphasis: {
								areaColor: '#2AB8FF',
								borderWidth: 0,
								color: 'green',
								label: {
									show: false,
								},
							},
						},
					},
					series: [{
						// 上面覆盖的地图配置
						type: 'map',
						roam: false,
						label: {
							show: true,
							color: '#FFFFFF',
							fontSize: 13,
							fontWeight: 300
						},
						itemStyle: {
							normal: {
								borderColor: 'rgba(53, 157, 178, 1)',
								borderWidth: 1,
								areaColor: {
									type: 'radial',
									x: 0.5,
									y: 0.5,
									r: 0.8,
									colorStops: [{
											offset: 0,
											color: 'rgba(15, 41, 77, 0.50)', // 0% 处的颜色
										},
										{
											offset: 1,
											color: 'rgba(53, 157, 178, 0.5)', // 100% 处的颜色
										},
									],
									globalCoord: true, // 缺省为 false
								},
							},
							emphasis: {
								areaColor: 'rgba(51, 137, 255, 0.50)',
								label: {
									color: '#fff',
								},
								borderColor: 'rgb(255,255,255,0.4)',
								//    shadowColor: 'rgb(12,25,50)',
								borderWidth: 1,
							},
						},
						zoom: 1.1,
						map: "yunnan", // 使用
					}],
				}

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

</html>