原生js vue地图下钻

最新推荐文章于 2024-04-24 11:23:07 发布
最新推荐文章于 2024-04-24 11:23:07 发布
阅读量380 收藏 1
点赞数
分类专栏： vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45966782/article/details/120993929
版权

                

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
<title>全国销售额排行，可下钻到县</title> 
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>

<script src="https://webapi.amap.com/maps?v=1.3&key=73cddabc2173e0166a622f4483d3592a&plugin=AMap.DistrictSearch"></script>
<script src="https://webapi.amap.com/maps?v=1.3&key=73cddabc2173e0166a622f4483d3592a" type="text/javascript"></script> 
<script src="https://webapi.amap.com/ui/1.0/main.js"></script>
<script src="https://echarts.baidu.com/resource/echarts-gl-latest/dist/echarts-gl.min.js"></script>

<style type="text/css">
	body{background-color: #191919}
	#chart-panel {
    width: 100%;
    height: 770px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin-top: 10px;
    background-size: 100% auto;background-color: #0E0E29
} 
	#chart-panel .back{opacity: 0.5; position:absolute;left: 25px;top: 20px;color:#b3efff;font-size: 16px;cursor: not-allowed;z-index:100;}
</style>
</head>
<body> 
<div id="chart-panel"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById("chart-panel"));
$('<div class="back">返 回</div>').appendTo($('#chart-panel')); 

$('.back').click(function() {
  $(this).css({"cursor":"not-allowed","opacity":"0.5"})
  if (parentInfo.length === 1) {return;}
  parentInfo.pop()
  init(parentInfo[parentInfo.length - 1].code)
})
  
var geoJson = {}
var parentInfo = [{cityName: '全国',code: 100000}]
var currentIndex = 0
var timeTitle = ['2015', '2016', '2017', '2018', '2019']

init(100000)
function init(adcode){
  getGeoJson(adcode).then(data => {
	geoJson = data
	getMapData()
  }) 
}
	
//这里封装了，直接可以拿过来用
function getGeoJson(adcode, childAdcode = '') {
  	return new Promise((resolve, reject) => {
		function insideFun(adcode, childAdcode) {
			AMapUI.loadUI(['geo/DistrictExplorer'], DistrictExplorer => {
				var districtExplorer = new DistrictExplorer();
				districtExplorer.loadAreaNode(adcode, function(error, areaNode) {
				if (error) {
					console.error(error);
					reject(error);
					return;
				}
				let Json = areaNode.getSubFeatures();
				if (Json.length === 0) {
					let parent = areaNode._data.geoData.parent.properties.acroutes;
					insideFun(parent[parent.length - 1], adcode);
					return;
				}
				if (childAdcode) {
					Json = Json.filter(item => {
					return item.properties.adcode == childAdcode;
					});
				}
				let mapJson = {
					features: Json
				};
				resolve(mapJson);
				});
			});
		}
		insideFun(adcode, childAdcode);
  	});
}
	  
//获取数据    
function getMapData() {
	let mapData = [],
		pointData = [],
		sum = 0
	geoJson.features.forEach(item => {
		let value = Math.random() * 3000
		mapData.push({
			name: item.properties.name,
			value: value,
			cityCode: item.properties.adcode
		})
		pointData.push({
			name: item.properties.name,
			value: [item.properties.center[0], item.properties.center[1], value],
			cityCode: item.properties.adcode
		})
		sum += value
	})
	mapData = mapData.sort(function(a, b) {return b.value - a.value});
	initEchartMap(mapData, sum, pointData)
}
	  
//渲染echarts
function initEchartMap(mapData, sum, pointData) {
	var xData = [],
		yData = []
	var min = mapData[mapData.length - 1].value
	var max = mapData[0].value
	if (mapData.length === 1) {min = 0}
	mapData.forEach(c => {   
		xData.unshift(c.name.replace(/(省|市|自治区|回族|维吾尔|壮族|特别行政区)/g,'')) 
		yData.unshift(c.value)
	})
	//这里做个切换，全国的时候才显示南海诸岛  只有当注册的名字为china的时候才会显示南海诸岛
	echarts.registerMap(parentInfo.length === 1 ? 'china' : 'map', geoJson);
  
  	var option = {
		// 正下方时间自动轮播
		timeline: {
		  data: timeTitle,
		  axisType: 'category',
		  autoPlay: true,
		  playInterval: 5000,
		  left: '10%',
		  right: '10%',
		  bottom: '2%',
		  width: '80%',
		  label: {
		    normal: {
		      textStyle: {
		        color: 'rgb(179, 239, 255)'
		      }
		    },
		    emphasis: {
		      textStyle: {
		        color: '#fff'
		      }
		    }
		  },
		  currentIndex: currentIndex,
		  symbolSize: 10,
		  lineStyle: {
		    color: '#8df4f4'
		  },
		  checkpointStyle: {
		    borderColor: '#8df4f4',
		    color: '#53D9FF',
		    borderWidth: 2,
		  },
		  controlStyle: {
		    showNextBtn: true,
		    showPrevBtn: true,
		    normal: {
		      color: '#53D9FF',
		      borderColor: '#53D9FF'
		    },
		    emphasis: {
		      color: 'rgb(58,115,192)',
		      borderColor: 'rgb(58,115,192)'
		    }
		  },
		}, 
		baseOption: {
			// backgroundColor: '#012248',
			title: [{
				left: 'center',
				top: 20,
				text: parentInfo[parentInfo.length - 1].cityName + '销售额统计图(可点击到县)',
				textStyle: {
					color: '#b3efff',
					fontSize: 16
				},
			},
			{
				text: "销售总额：" + sum.toFixed(2) + '万',
				left: 'center',
				top:45,
				textStyle: {
					color: '#FFAC50',
					fontSize: 20
				}
			}],
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'none'// 默认为直线，可选为：'line' | 'shadow'
				},
			},
			legend: {
				show: true,
				icon: 'roundRect',
				itemWidth: 25,
				itemHeight: 15,
				itemGap: 9,
				bottom: '10',
				right: '20', 
				textStyle: {
					fontSize: 14,
					color: '#b3efff'
				},
				data: ['单数', '销售额'],
			}, 
			grid: [{
				show: false,
				right: '21%',
				top: '12%',
				bottom: '8%',
				containLabel: true,
				width: '15%'
			}, {
				show: false,
				right: '18.5%', //调整中间文字位置
				top: '14%', //使中间文字对齐
				bottom: '8%',
				width: '0%',  
			}, {
				show: false,
				right: '2%',
				top: '12%',
				bottom: '8%',
				containLabel: true,
				width: '15%'
			}],
			toolbox: {
				feature: {
					restore: {
						show: false
					},
					dataView: {
						show: false
					},
					saveAsImage: {
						name: parentInfo[parentInfo.length - 1].cityName + '销售额统计图'
					},
					dataZoom: {
						show: false
					},
					magicType: {
						show: false
					}
				},
				iconStyle: {
					normal: {
						borderColor: '#1990DA' //右上角下载的颜色
					}
				},
				top: 15,
				right: 35
			},
			geo: {
				map: parentInfo.length === 1 ? 'china' : 'map',
				zoom: 1.1,
				roam: true,
				left:'10%',
				top:'15%',
				tooltip: {
					trigger: 'item',
					formatter: (p) => {
						let val = p.value[2];
						if (window.isNaN(val)) {val = 0;}
						let txtCon = "<div style='text-align:left'>" + p.name + ":<br />单数：" + val.toFixed(2) + "单<br />销售额：" + val.toFixed(2) + '万</div>';
						return txtCon;
					}
				},
				label: {
					normal: {
						show: true,
						color: "#f9f9f9", //省份标签字体颜色
						formatter: p => {
						switch (p.name) {
							case '内蒙古自治区':
							p.name = "内蒙古"
							break;
							case '西藏自治区':
							p.name = "西藏"
							break;
							case '新疆维吾尔自治区':
							p.name = "新疆"
							break;
							case '宁夏回族自治区':
							p.name = "宁夏"
							break;
							case '广西壮族自治区':
							p.name = "广西"
							break;
							case '香港特别行政区':
							p.name = "香港"
							break;
							case '澳门特别行政区':
							p.name = "澳门"
							break;
						}
						return p.name;
						}
					},
					emphasis: {
						show: true,
						color: '#f75a00',
					}
				},
				itemStyle: {
					normal: {
						areaColor: '#24CFF4',
						borderColor: '#53D9FF',
						borderWidth: 1.3,
						shadowBlur: 15,
						shadowColor: '#3a73c0',
						shadowOffsetX: 7,
						shadowOffsetY: 6,
					},
					emphasis: {
						areaColor: '#8dd7fc',
						borderWidth: 1.6,
						shadowBlur: 25,
					}
				},
			},
			visualMap: {  //右下角
				min: min,
				max: max,
				left: '3%',
				bottom: '5%',
				calculable: true,
				seriesIndex: [0],
				inRange: {
					color: ['#24CFF4', '#2E98CA', '#1E62AC']
				},
				textStyle: {
					color: '#24CFF4'
				}
			},
			xAxis: [{
				type: 'value',
				inverse: true,  //是否是反向坐标轴。
				scale: true,
				position: 'top',
				boundaryGap: false,
				splitLine: {
					show: false
				},
				axisLine: {
					show: true,
					lineStyle: {
						color: '#455B77' 
					}
				},
				axisTick: {
					show: true
				},
				axisLabel: {
					show: true,
					lineStyle: {
						color: 'rgba(255,255,255,0.2)'
					},
					margin: 2,
					textStyle: {
						color: '#c0e6f9'
					}
				},
			}, {
				gridIndex: 1,
				show: false
			},{
				gridIndex: 2,
				type: 'value',
				inverse: false,  //是否是反向坐标轴。
				scale: true,
				position: 'top',
				boundaryGap: false,
				splitLine: {
					show: false
				},
				axisLine: {
					show: true,
					lineStyle: {
						color: '#455B77' 
					}
				},
				axisTick: {
					show: true
				},
				axisLabel: {
					show: true,
					lineStyle: {
						color: 'rgba(255,255,255,0.2)'
					},
					margin: 2,
					textStyle: {
						color: '#c0e6f9'
					}
				},
			}],
			yAxis:  [{ 
				type: 'category',
				inverse: false,
				position: 'right',
				nameGap: 16,
				axisLine: {
					show: true,
					lineStyle: {
						color: '#455B77'
					}
				},
				axisTick: {
					show: false
				},
				axisLabel: {
					show: false
				},
				data: xData
			}, {
				gridIndex: 1,
				type: 'category',
				inverse: false,
				position: 'center',
				nameGap: 16, 
				axisLine: {
					show: false
				},
				axisTick: {
					show: false
				},
				axisLabel: {
					show: true,
					textStyle: {
						color: '#c0e6f9',
						fontSize: 12, 
						align: "center", 
					},
				},
				data:xData
			}, {  
				gridIndex: 2,
				type: 'category',
				inverse: false,
				position: 'left',
				nameGap: 16,
				axisLine: {
					show: true,
					lineStyle: {
						color: '#455B77'
					}
				},
				axisTick: {
					show: false
				},
				axisLabel: {
					show: false
				},
				data: xData
			}], 
			series: [{  //最外层鼠标经过显示的黑框
				name: timeTitle[currentIndex] + '年销售额度',
				type: 'map',
				geoIndex: 0,
				map: parentInfo.length === 1 ? 'china' : 'map',
				roam: true,
				zoom: 1.3,
				tooltip: {
					trigger: "item",
					formatter: p => {
						let val = p.value;
						if (p.name == '南海诸岛') return
						if (window.isNaN(val)) { val = 0; }
						let txtCon = "<div style='text-align:left'>" + p.name + ":<br />单数：" + val.toFixed(2) + "单<br />销售额：" + val.toFixed(2) + '万</div>';
						return txtCon;
					}
				},
				label: {
					normal: {
							formatter: function(data) {
							return  '4';
							},
							show: true,
							position: 'right',
							distance: 5,
							color: 'white',
							backgroundColor: '#1D3039',
							padding: 10,
							borderRadius: 20
						// show: false,
					},
					emphasis: {
						show: false,
					}
				},
				data: mapData,
		  	},{
				name: '散点',
				type: 'effectScatter',
				coordinateSystem: 'geo',
				rippleEffect: {
					brushType: 'fill'
				},
				itemStyle: {
					normal: {
						color: '#F4E925',
						shadowBlur: 10,
						shadowColor: '#333'
					}
				},
				data: pointData,
				symbolSize: function(val) {
					let value = val[2]
					if (value == max) {
						return 27
					}
					return 10
				},
				showEffectOn: 'render', //加载完毕显示特效
			},{
				name: '单数',
				type: 'bar',
				barGap: '-100%',
				barCategoryGap: '60%', 
				stack: 'left',
				label: {
					show: true,
					fontSize: 10,
					distance: 10,
					color: '#fff',
					position: 'left', //inside|right
					formatter: (params) => {
					return params.value.toFixed(2)
					}
				},
				itemStyle: {
					normal: {
						barBorderRadius: 30,
						color:new echarts.graphic.LinearGradient(0, 1, 1, 1, [
								{ offset: 0, color: "#EB3B5A" },
								{ offset: 1, color: "#FE9C5A" }
							])
					},
					emphasis: {
						show: false
					}
				},
				data: yData
			},{ 
				name: '销售额',
				type: 'bar',
				barGap: '-100%',
				barCategoryGap: '60%', 
				stack: 'right',
				xAxisIndex: 2,
				yAxisIndex: 2,
				label: {
					show: true,
					fontSize: 10,
					distance: 10,
					color: '#fff',
					position: 'right', //inside|right
					formatter: (params) => {
						return params.value.toFixed(2)
					}
				},
				itemStyle: {
				normal: {
					barBorderRadius: 30,
					color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
								{ offset: 0, color: "#395CFE" },
								{ offset: 1, color: "#2EC7CF" }
							])
				},
				emphasis: {
					show: false
				}
				},
				data: yData
			}]
		},
	}
	myChart.setOption(option, true)
	//点击前解绑，防止点击事件触发多次
	myChart.off('click');
	myChart.on('click', echartsMapClick);
	//监听时间切换事件
	myChart.off('timelinechanged');
	myChart.on('timelinechanged', params => {
		currentIndex = params.currentIndex;
		getMapData();
	});
}

//echarts点击事件
function echartsMapClick(params) {
	$('.back').css({"cursor":"pointer","opacity":"1"})
	if (!params.data) {
		return
	} else { 
		//如果当前是最后一级，那就直接return  
		if (parentInfo[parentInfo.length - 1].code == params.data.cityCode) {
		  return
		}
		let data = params.data
		parentInfo.push({
		cityName: data.name,
		code: data.cityCode
		})
		init(data.cityCode)
	}
}
</script>
</body>
</html>

需要vue或者四级下钻联系作者qq：572803837

L、yan
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
echarts4，实现省下钻功能
adenfeng的专栏
03-26 836
//省市数据引用 data.js import "echarts/map/js/province/anhui.js" import "echarts/map/js/province/aomen.js" import "echarts/map/js/province/beijing.js" import "echarts/map/js/province/chongqing.js" import "...
前端实现地图下钻
2401_82778412的博客
03-01 508
在这个示例中，我们在Vue组件的`mounted`钩子函数中创建了Three.js场景，并使用`canvas`元素来渲染场景。2. 在Vue.js的组件中，创建一个画布元素，用于渲染Three.js场景，并定义一个地图数据结构来存储地图的层级信息。{ name: '省份A1', children: [{ name: '省份A2', children: [{ name: '省份B1', children: [{ name: '省份B2', children: [{ name: '城市A1-1' },
vue2版本用echarts实现地图下钻功能 注释详细cv可用
最新发布
还想陪你看场雪
04-24 361
vue2版本用echarts-gl实现地图下钻
echarts地图下钻省市区展示，js版
03-06
单击下钻至下一层地图展示，最低可到区级，双击返回全国地图，鼠标停于散点之上时，信息框提示当前散点对应的城市名称
ECharts3.4 结合Vue.js实现地图下钻
Clyde Kuo
03-15 1万+
*最近在做一个需要有地图下钻的项目，考虑用ECharts实现，需要每个省的数据太大，所以此处谨以广东省为例，其他数据可自己添加，先上效果图* *用的是Vue1.0先看代码结构：* 因为ECharts3不再内置地图数据，需要自己下载所需的地图ECharts地图下载,index.js将所有的地图文件引进来 再看chinaOption.js文件,这是一个混合文件，将地图的设置全部写在这文件expor
echarts写地图，调用本地地图json数据，实现秒下钻功能
weixin_43992359的博客
09-18 4255
先来一波效果图 这是我用vue框架的echarts写的一个地图，下面会放整体代码并且把重要的配置代码上传到我的百度网盘，并且代码给出注释 首先我所了解的，要想实现全局的地图和地图下钻，有两种方式： 1.调用百度地图或者高德地图的API，需要再他们网站生成SDK再js引入，调用他们的API生成地图数据展示和实现地图下钻功能，缺点是网速不是很快的时候，会出现严重的卡顿问题 2.在本地放置json数据，调用本地数据，优势在于地图下钻很快 ...
地图下钻简单实现
weixin_30911451的博客
05-16 555
今天做地图下钻，没有地图json数据，记得做过没有找到以前的资料，从网上下载还要花钱，就想给路过的人提供资料，此js实现需要包含区域json的js文件及 echarts4.1.0（低版本的js可以试试），如果有需要材料的，我在博客上传了地图材料的文件，可以下载 /*地图下钻*/var myChart33 = echarts.init(document.getElementById('mapces...
百度地图点击城市的出现下钻
晨露
09-05 3927
背景：海量打点以后，点击点出现下钻到该点的城市范围 出现原因： 自己添加的覆盖物点击时，与地图底部的map点击事件重合了。 解决方案： var map = new BMap.Map("allmap", {enableMapClick:false});//构造底图时，关闭底图可点功能 但是，在关闭了底图可点功能以后，map上的分类的点居然不能点了，没有任何反应，必须点击一下覆...
js原生+vue+百度离线地图使用
12-27
1.百度地图离线版加部分瓦片有demo 2.正式在线上使用基于vue的demo 3.使用说明文档
基于vue+高德地图原生制作五级城市级联框【100011353】
04-01
vue+高德地图原生制作五级城市级联框（并加入高德地图区域渲染）
vue 地图可视化 maptalks 篇实例代码详解
01-21
Maptalks 项目是一个 HTML5 的地图引擎, 基于原生 ES6 Javascript 开发： – 二三维一体化地图, 通过二维地图的旋转 /倾斜增加三维视角 – 插件化设计, 能与其他图形库结合, 开发各种二三维效果, 例如 echarts/d3/...
vue实现百度echart地图省市级别点击下钻显示效果
03-28
vue实现百度echart地图省市级别点击下钻显示效果
可往下钻省市地图（源码）
10-23
可往下钻省市地图（源码），可钻到省可修改源码，也可做为基图，移动上有浮动效果，可设置浮点标记省市的代售点之类
echarts中国地图三级下钻
08-15
echarts中国地图三级下钻
echarts地图下钻下载
08-02
echart地图下钻 ，由全国地图下钻到某省地图， 下载后解压即可
vueamap基于Vue2x和高德地图的地图组件
08-10
vueamap基于Vue2x和高德地图的地图组件
leaflet原生JS最简的项目模板源码
12-28
leaflet原生JS最简的项目模板源码，或者https://gitee.com/marsgis/mars2d-vue-template下载。
echarts的地图下钻静态实现，中国下钻到各省、直辖市。（省级下钻到市级、县级貌似也类似吧）
热门推荐
lee1169639的博客
12-05 1万+
由于工作需要可能用到echarts的地图下钻功能，说实话，网上写地图下钻的就那么几篇文章都是大同小异，然后我还弄不太明白，就自己写了这个。 echart地图全国下钻到省
Vue大屏实战六：地图下钻的实现
博主逸尘
02-21 763
vue实战大屏中地图下钻功能的实现
vue-amap 高德原生
07-27
对于 vue-amap，它是一个基于 Vue.js 的高德地图组件库，用于在 Vue.js 项目中集成和使用高德地图的相关功能。它提供了一系列的组件和指令，使您可以在 Vue.js 应用中轻松地添加地图、标记、路线规划等功能。 通过...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值