Echarts绘制各省地图

Echarts 绘制全国地图

近期工作需要用到echarts制作省内地图，研究了一番，好多人写的很模糊不好理解，我这里写个菜鸟教程记录一下。

在页面引入 jquery.js h和echarts.js 关键是需要地图的json数据，有js的更好。这里提供china.json下载：

链接：https://pan.baidu.com/s/1LawcD8JQkHkd0OjpFG0jKQ 密码：phrt

全国以及各地市的数据这里下载 https://download.csdn.net/download/cc_wake/10569191




<%@ page pageEncoding="utf-8" contentType="text/html; charset=utf-8" %>



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">



<html>



	<head>




		<title>地图</title>




		<script src="js/jquery-3.3.1.min.js"></script>




		<script src="js/echarts.js"></script>




	</head>




	<body>




		<div id="china_map" style="width:800px;height:800px;">hello</div>




		<script type="text/javascript">




			$.get('js/henan.json',function(data){//这里是json转js，如果是js文件就不需要这一步




				echarts.registerMap('henan',data);//设置地图




				var myChart = echarts.init(document.getElementById('china_map'));//初始化




				myChart.setOption({



		        	 title: {



		                 text: '河南地图'




		             },



		             series: [{



		                type: 'map',//类型必须是map




		                map: 'henan'//注意这里的值需要和echarts.registerMap('henan',data);一致




		             }]



		        });



 



				myChart.on('click', function(params){



		            alert(1);



		            console.log(params);//此处写点击事件内容




		        });//点击事件，此事件还可以用到柱状图等其他地图




			});



			



		



		</script>




	</body>




</html>

刚开始一脸蒙蔽，弄了好久才明白，你要是理解不了也没关系，把我的代码直接拷走就行。改一下js引入地址。

Echarts绘制各省地图

该文章系转载，出自: https://blog.csdn.net/cc_wake/article/details/81257826

秒客网

Echarts绘制各省地图

相关文章