Echarts绘制地图

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/cc_wake/article/details/81257826

近期工作需要用到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引入地址。

 

展开阅读全文

没有更多推荐了,返回首页