echarts绘制地理坐标/地图

最新推荐文章于 2025-07-24 12:55:06 发布

君_陌

最新推荐文章于 2025-07-24 12:55:06 发布

阅读量3.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：可视化文章标签：数据可视化

本文链接：https://blog.csdn.net/secretstarlyp/article/details/113318368

可视化专栏收录该内容

3 篇文章

订阅专栏

这篇博客展示了如何利用JavaScript和ECharts库创建一个石家庄各区的地图示意图。代码示例中，作者详细配置了ECharts选项，包括地图类型、数据、提示框、工具箱等功能，并提供了测试数据。地图数据基于2018年的石家庄地图，用于疫情需求展示。

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

因疫情需要，就展示了一个以石家庄城市为例的地图(数据仅为测试数据,地图是2018年的)

我采用的是js方式，目前新版echarts用的是gson方式

效果图：

代码如下(index.html):

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>echarts图形插件使用</title>

	</head>

	<body>
		<div id="map-wrap" style="height: 500px;">

		</div>
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/echarts.min.js"></script>
		<script type="text/javascript" src="js/shijiazhuang.js"></script>
		<script type="text/javascript">
			$(function() {

				//使用echarts.init()方法初始化一个Echarts实例，在init方法中传入echarts map的容器 dom对象
				var mapChart = echarts.init(document.getElementById('map-wrap'));
				// mapChart的配置
				var option = {
					title: {
						text: '石家庄各区示意图',
						left: 'center'
					},
					tooltip: {
						trigger: 'item',
						formatter: '{b}<br/>{c} (个)'
					},
					toolbox: {
						show: true,
						orient: 'vertical',
						left: 'right',
						top: 'center',
						feature: {
							dataView: {
								readOnly: false
							},
							restore: {},
							saveAsImage: {}
						}
					},
					visualMap: {
						min: 0,
						max: 2000,
						text: ['高', '低'],
						realtime: false,
						calculable: true,
						inRange: {
							color: ['lightskyblue', 'yellow', 'orangered']
						}
					},
					series: [{
						name: '石家庄各区域',
						type: 'map', //type必须声明为 map 说明该图标为echarts 中map类型
						map: '石家庄', //这里需要特别注意。如果是中国地图，map值为china，如果为各省市则为中文。这里用北京
						aspectScale: 0.75, //长宽比. default: 0.75
						zoom: 1.2,
						//roam: true,
						itemStyle: {
							normal: {
								label: {
									show: true
								}
							},
							emphasis: {
								label: {
									show: true
								}
							}
						},
						data: [{
								name: '桥西区',
								value: 1800
							},
							{
								name: '长安区',
								value: 1700
							},
							{
								name: '井陉矿区',
								value: 1600
							},
							{
								name: '裕华区',
								value: 1400
							},
							{
								name: '藁城区',
								value: 1200
							},
							{
								name: '新华区',
								value: 1000
							},
							{
								name: '栾城区',
								value: 800
							},
							{
								name: '井陉县',
								value: 600
							},
							{
								name: '正定县',
								value: 400
							},
							{
								name: '行唐县',
								value: 200
							},
							{
								name: '灵寿县',
								value: 100
							},
							{
								name: '深泽县',
								value: 300
							},
							{
								name: '高邑县',
								value: 500
							},
							{
								name: '赞皇县',
								value: 700
							},
							{
								name: '无极县',
								value: 900
							},
							{
								name: '元氏县',
								value: 1100
							},
							{
								name: '平山县',
								value: 1100
							},
							{
								name: '赵县',
								value: 1100
							},
							{
								name: '辛集市',
								value: 1100
							},
							{
								name: '晋州市',
								value: 1100
							},
							{
								name: '鹿泉区',
								value: 1100
							},
							{
								name: '新乐市',
								value: 0
							}
						]
					}]
				};
				//设置图表的配置项
				mapChart.setOption(option);

			})
		</script>
	</body>

</html>

源码:https://download.csdn.net/download/secretstarlyp/14948211