echarts中国地图上显示柱状图，并且柱状图可点击

最新推荐文章于 2024-08-05 05:00:00 发布

郭大仁

最新推荐文章于 2024-08-05 05:00:00 发布

阅读量1.9w

点赞数 7

分类专栏： echarts 文章标签：地图数据中国 echarts map

本文链接：https://blog.csdn.net/gxl___/article/details/78953492

版权

本文展示了如何使用Echarts在中国地图上创建柱状图，且柱状图支持点击交互，数据和标题可动态变化。通过实例代码详细解释了实现过程。

摘要由CSDN通过智能技术生成

先放效果图~~

点击之后~~（数据和标题可动态变化）

话不多说，直接上代码

<link rel="shortcut icon" href="${ctx}/static/img/favicon.ico">
<link rel="stylesheet" href="${ctx}/static/layui_v2/css/layui.css">

<link rel="stylesheet" href="${ctx}/static/css/global.css">
<link rel="stylesheet" type="text/css"
	href="${ctx}/static/css/common.css" media="all">
<link rel="stylesheet" type="text/css"
	href="${ctx}/static/css/personal.css" media="all">
<link rel="stylesheet" href="${ctx}/static/css/main.css">

<link rel="stylesheet" type="text/css"
	href="http://at.alicdn.com/t/font_9h680jcse4620529.css">

<script src="${ctx}/static/layui_v2/layui.js"></script>

<script src="${ctx}/static/js/jquery-1.8.3.js"></script>
<script src="${ctx}/static/js/jquery.leoweather.min.js"></script>

<script type="text/javascript" src="${ctx}/static/echarts/echarts.min.js" charset="utf-8"></script>
<script type="text/javascript" src="${ctx}/static/echarts/china.js" charset="utf-8"></script>
<script type="text/javascript" src="${ctx}/static/echarts/javascript.js" charset="utf-8"></script>


</head>
<body>
<div></div>
	<div class="wrap" style="position: relative;">
		<div id="map" style="width: 100%; height: 800px;"></div>
	</div>

	<script>
	layui.use('layer', function(){ //独立版的layer无需执行这一句
  	var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
  
	
		var myChart = echarts.init(document.getElementById('map'));
		// 省坐标，因为全国34个省固定不变，写死即可
		var geoCoordMap = {
			'西藏' : [ 91.11, 30.97 ],
			'上海' : [ 121.48, 31.22 ],
			'福建' : [ 118.1, 27.46 ],
			'浙江' : [ 119.