基于Echarts地图三级下钻和返回功能实现

最新推荐文章于 2024-06-01 16:37:49 发布

EstherLty

最新推荐文章于 2024-06-01 16:37:49 发布

阅读量3.1k

点赞数 3

分类专栏：前端 Echarts

本文链接：https://blog.csdn.net/qq_45988641/article/details/118992890

版权

左键单击触发页面进入下一级地图；左键双击返回上一级地图，回到上一级地图的实现方式也可以采用点击按钮。如果没有下一级地图则返回到省级地图。

在这里插入图片描述

后面再有相关需求的时候可以在这个基础上修改添加功能就好了。

里面Echarts地图相关的json和js文件是从别人那里下载的（可能不全或者有没有用的json）。下载网址：https://download.csdn.net/download/qq_45988641/20390009

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<title>Echarts 地图钻取</title>
	<script type="text/javascript"
		src="../../../js/build/dist/chart/echarts.min.js"></script>
	<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
	<script type="text/javascript"
		src="../../../js/build/dist/chart/china-main-city-map.js"></script>
	<script type="text/javascript" src="../../../js/build/dist/chart/rem.js"></script>

	<style>
	.title {
   
		width: 100%;
		height: 10vh;
		text-align: center;
		color: #000000;
		font-size: 2em;
		line-height: 10vh;
	}
	
	.box {
   
		position: absolute;
		width

最低0.47元/天解锁文章

EstherLty

关注

3
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
基于Echarts地图三级下钻和返回功能实现

后面再有相关需求的时候可以在这个基础上修改添加功能就好了。里面Echarts地图相关的json和js文件是从别人那里下载的（可能不全或者有没有用的json）。下载网址：https://download.csdn.net/download/qq_45988641/20390009<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PU.
复制链接

扫一扫

专栏目录