实现echart中国地图，点击城市名称，相对应的点出现当前动画

本文链接：https://blog.csdn.net/qq_44681558/article/details/132430278

文章介绍了如何使用ECharts库在HTML页面上创建交互式地图，通过JavaScript动态展示多个地点的涟漪效果，点击事件可以进一步操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基于上一个深圳地图来参考实现以下效果：
在这里插入图片描述

 <div id="mainMap" style="width: 600px; height: 400px"></div>

<script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.min.js"></script>
<script src="https://www.jq22.com/demo/echarts-china-map-master201811192226/js/map/china.js"></script>

<script>
			let at = 5;
			let subs = 0;
			// 这里是接口数据 ！！！
			var dataArr = [{
					lagLnt: '113.280637,23.125178',
					title: '广州'
				},
				{
					lagLnt: '114.085947,22.547',
					title: '深圳'
				},
				{
					lagLnt: '106.55,29.56',
					title: '重庆'
				}
			]

			var arrpo = []
			for (let i = 0; i < dataArr.length; i++) {
				var item = {
					name: dataArr[i].title,
					value: dataArr[i].lagLnt.split(','),
					rippleEffect: {
						scale: ''
					}
				}
				arrpo.push(item)
			}
			
			
			aatt(at, subs);
			$(".right li").click(function(i) {
				let at = 5
				let subs = $(this).index()
				aatt(at, subs);
			
			});



			function aatt(at, subs) {
				var china = document.getElementById('china');
				var chinaMap = echarts.init(china);
				// console.log(arrpo,subs)
				for (let i = 0; i < arrpo.length; i++) {
					arrpo[i].rippleEffect.scale = ''
				}
				arrpo[subs].rippleEffect.scale = at
			
				var option = {


					geo: {
						map: 'china',
						zoom: 1.1,
						silent: true,
						roam: false, //是否开启鼠标缩放和平移漫游
					
						itemStyle: {
							normal: {
								borderWidth: 1, //区域边框宽度
								borderColor: '#b8bbaa', //区域边框颜色
								areaColor: "#eef0da", //区域颜色

							},

							emphasis: {
								borderWidth: .5,
								borderColor: '#b8bbaa',
								areaColor: "#eef0da",
							}
						}
					},
					
					series: [{
						type: 'effectScatter',
						coordinateSystem: 'geo',
						// symbol: iconRQ,//自定义图标
						silent: true,
						Symbol: 'circle',
						itemStyle: {
							color: '#5bb969', //圆点颜色设置
						},
						focusNodeAdjacency: true,
						symbolSize: [6, 6],
						rippleEffect: {
							color: '#5bb969',
							period: 10, // 涟漪特效的动画周期
							scale:1, // 涟漪特效动画中波纹的最大缩放比例
							brushType: "fill" // 涟漪特效的波纹绘制方式
						},


						data: arrpo
					}]
				}
				chinaMap.setOption(option);
				chinaMap.on('click', function(i) {
					// console.log(i.dataIndex, "ddd");

				});
			}
		</script>