记录echarts展示地图的坑

最新推荐文章于 2023-03-28 10:42:28 发布

九州白

最新推荐文章于 2023-03-28 10:42:28 发布

阅读量228

点赞数

分类专栏：前端 echarts 地图文章标签： echarts

原文链接：https://blog.csdn.net/weixin_36413887/article/details/80019625

版权

前端同时被 3 个专栏收录

20 篇文章 0 订阅

订阅专栏

echarts

2 篇文章 0 订阅

订阅专栏

地图

1 篇文章 0 订阅

订阅专栏

记录echarts展示地图的坑

问题
解决方案
结果展示
下载链接
参考文章

问题

echarts不显示地图

解决方案

下载china.js文件

需要下载echarts.js文件及china.js文件，本例中已下载好
注意引用顺序

代码部分：

<!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" />
		<title>Document</title>
	</head>
	<body>
		<div class="map" style="width: 100%; height: 500px"></div>
		<script src="./echarts.js"></script>
		<script src="./china.js"></script>
		<script>
			let dom = document.getElementsByClassName('map')[0]
			let myChart = echarts.init(dom)
			myChart.setOption({
				series: [
					{
						type: 'map',
						name: '中国',
						map: 'china',
						label:{
							show:true
						},
						data: [{ name: '北京', value: 10 }],
					},
				],
			})
		</script>
	</body>
</html>