效果图

准备个div放map

地图的展示

/* echarts地图和折线图的展示 */
		//地图展示
		var uploadedDataURL = "https://geo.datav.aliyun.com/areas_v2/bound/361000_full.json";
		var mapChart = echarts.init(document.getElementById('container1'));
		function showMap(seriesCheckin, seriesDemandSq, seriesServiceProject) {
			var option;
			//数据载入时动画
			mapChart.showLoading();
			$.getJSON(uploadedDataURL,
							function(geoJson) {
								mapChart.hideLoading();
								echarts.registerMap('抚州市', geoJson);
								mapChart.setOption(option = {
											//显示悬浮窗口
											tooltip : {
												trigger : 'item',
												formatter : function(params) {
													//定义一个res变量来保存最终返回的字符结果,并且先把地区名称放到里面
													var res = params.name
															+ '<br />';
													areaName = params.name;
													//定义一个变量来保存series数据系列
													var myseries = option.series;
													//循环遍历series数据系列
													for (var i = 0; i < myseries.length; i++) {
														//在内部继续循环series[i],从data中判断：当地区名称等于params.name的时候就将当前数据和名称添加到res中供显示
														for (var k = 0; k < myseries[i].data.length; k++) {
															//如果data数据中的name和地区名称一样
															if (myseries[i].data[k].name == params.name) {
																//将series数据系列每一项中的name和数据系列中当前地区的数据添加到res中
																res += myseries[i].name
																		+ ':'
																		+ myseries[i].data[k].value
																		+ '<br />';
															}
														}
													}
													return res;
												},
											},

											series : [
													{
														/* 养老机构入住申请数量统计  seriesCheckin */
														name : '养老机构入住申请',
														type : 'map',
														mapType : '抚州市',
														aspectScale : 0.9, //地图宽高比
														layoutCenter : [ '60%',
																'50%' ], //地图中心点位置['50%','50%']代表在最中间
														layoutSize : '100%', //地图大小，此处设置为100%
														label : { //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
															normal : {
																show : true, //是否在普通状态下显示标签。
																textStyle : {
																	color : "#000000FF",//文字颜色
																	fontStyle : "normal",//italic斜体  oblique倾斜
																	fontWeight : "normal", //文字粗细bold   bolder   lighter  100 | 200 | 300 | 400...
																	fontSize : 12,
																}
															}
														},

														//地图样式
														itemStyle : {
															normal : {
																borderWidth : 1,//边际线大小
																borderColor : '#0653C6E1',//边界线颜色
																areaColor : '#bdd4f4',//默认区域颜色
																shadowColor : "#000",//阴影颜色
																shadowBlur : 1,//图形阴影的模糊大小。
																opacity : 1,//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
															}
														},

														emphasis : { // 鼠标 hover 高亮时图形和标签的样式 (当鼠标放上去时  label和itemStyle 的样式) 
															label : { // label高亮时的配置
																show : true,
																textStyle : {
																	color : '#FFFFFFFF', // 高亮时标签颜色变为 白色
																	fontSize : 15, // 高亮时标签字体 变大
																}
															},
															itemStyle : { // itemStyle高亮时的配置
																areaColor : '#006cff', // 高亮时地图板块颜色改变
															}
														},
														data : seriesCheckin,
													},

													{
														name : '社区居家养老服务',
														type : 'map',
														mapType : '抚州市',
														data : seriesDemandSq,
													},
													{
														name : '服务项目数量',
														type : 'map',
														mapType : '抚州市',
														data : seriesServiceProject,
													}]
										});
								//调用轮播
								cycleShow(mapChart, option);
							});
		};

轮播功能

//轮播
		//用于初始化次数,否则导致鼠标移入和click事件中的查询次数逐渐增多
		var search_num = 0;
		//用于记录轮播时候的索引
		var lb_areaname = "";
		function cycleShow(mapChart, option) {
			var app = {};
			app.currentIndex = -1;
			var timer;
			//设置开始执行对应行为的时间
			setTimeout(startTimer, 500);
			function changeStyle() {
				//获取图表的位置
				var option = mapChart.getOption();
				var dataLen = option.series[0].data.length;
				// 取消之前高亮的图形,让下一个图形继续高亮,形成轮播的效果
				mapChart.dispatchAction({
					type : 'downplay',
					seriesIndex : 0,
					dataIndex : app.currentIndex
				});
				app.currentIndex = (app.currentIndex + 1) % dataLen;
				// 高亮当前图形
				mapChart.dispatchAction({
					type : 'highlight',
					seriesIndex : 0,
					dataIndex : app.currentIndex
				});
				lb_areaname = option.series[0].data[app.currentIndex].name
				// 显示 tooltip
				mapChart.dispatchAction({
					type : 'showTip',
					seriesIndex : 0,
					dataIndex : app.currentIndex
				});
			}

			//启动计时器
			function startTimer() {
				//启动之前先把定时器清空
				stopTimer();
				//setInterval调用的是函数名
				timer = setInterval(changeStyle, 2000);
			}

			//停止计时器
			function stopTimer() {
				clearInterval(timer);
			}

			//定义一个mouse_flag = false; 未移入 
			var mouse_flag = false;
			mapChart.on('mouseover', function(params) {
				search_num = 0;
				mouse_flag = true;
				//判断轮播的区域name是不是跟鼠标移入的区域name是同一个,否则取消轮播的区域的高亮
				if(lb_areaname!=params.name){
					mapChart.dispatchAction({
						type : 'downplay',
						seriesIndex : 0,
						dataIndex : app.currentIndex
					});
				}
				stopTimer();
				mapChart.on('click', function(params) {
					//点击查询折线图
					stopTimer();
					search_num += 1;
					if (search_num == 1) {
						queryListLineChart();
					}
				})

			})
			//为了判断鼠标是否在map区域中还是在div除map外的空白区域
			mapChart.on('mouseout', function(params) {
				if (params.name != "南城县" || params.name != "黎川县"
						|| params.name != "南丰县" || params.name != "崇仁县"
						|| params.name != "乐安县" || params.name != "宜黄县"
						|| params.name != "金溪县" || params.name != "资溪县"
						|| params.name != "东乡区" || params.name != "广昌县") {
					mouse_flag = false;
				} else {
					mouse_flag = true;
				}
			});

			container1.ondblclick = function() {
				if (mouse_flag) {
					stopTimer();
					queryListLineChart();
				} else {
					areaName = "";
					queryListLineChart();
					startTimer();
				}
			}
			option && mapChart.setOption(option);
		}; 

👾 前言

• 这次给大家分享一下在工作中经常用到的echarts地图轮播高亮。
• 技术栈用的是vue2.x 相信效果大家已经清楚了那我们就开干吧。

🛰️ toDoList

• 简单的准备一个地图
• 保存实例备用
• 设置定时器
• 设置鼠标移入移出事件

🔬 just do it

🗺️ 准备一个地图

• 首先准备一个简简单单的地图，因为我在广州所以就用广东省的地图啦~
• 怎么在echarts使用地图我就不说了看看文档然后把对应的地图json导入就可以了，相信大家也会。对了有人问到我在哪里找地图json文件，我们可以在DataV.GeoAtlas查询我们想要找的城市然后选择Json文件下载就可以啦。
  

💻 保存实例备用

• 首先我们要知道想让地图轮播高亮就需要用到eharts自带的dispatchActionAPI，而这个API是要用eharts实例去使用的,所以在vue中我们要将一开始地图初始化的实例给保存下来。

<template>
    <div ref="myChart" id="myChart" class="gzMap"></div>
</template>
...
    data () {
        return {
                charts: '',
                option:{
                    ...
                }
        };
    },
...
    mounted () {
        this.$echarts.registerMap('广东', gzData);//获取地图数据
        this.setMyEchart(); // 页面挂载完成后执行
    },
    methods:{
        setMyEchart () {
            const myChart = this.$refs.myChart; // 通过ref获取到DOM节点
            if (myChart) {
                const thisChart = this.$echarts.init(myChart); // 利用原型Echarts的初始化
                this.charts = thisChart;//保存实例
                thisChart.setOption(this.option); // 将编写好的配置项挂载到Echarts上
            }
        },
    }
...

• 我们在一开始初始化echarts的时候讲实例保存起来等下来使用，其余的配置大家可以自行去配，源码会放在文章底下，有兴趣的话可以拿走。

⏰ 设置定时器轮播

• 因为要设置轮播高亮，说白了就是给一个时间，固定多少多少时间亮一下然后提示框出来一下，现在默认大家已经设置好普通的鼠标移入高亮和提示框。

• 首先设置一个定时器方法，然后在里面调用官方的高亮方法和提示框方法，在规定的时间内进行闪烁即可。

...
    data () {
        return {
                mTime: '',
                charts: '',
                index: -1,
                option:{
                    ...
                }
        };
    },
...
    methods:{
        setMyEchart () {
            ...
            this.mapActive();
            ...
        },
        mapActive () {
            const dataLength = gzData.features.length;
            // 用定时器控制高亮
            this.mTime = setInterval(() => {
                // 清除之前的高亮
                this.charts.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0,
                    dataIndex: this.index
                });
                this.index++;
                // 当前下标高亮
                this.charts.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    dataIndex: this.index
                });
                this.charts.dispatchAction({
                    type: 'showTip',
                    seriesIndex: 0,
                    dataIndex: this.index
                });
                if (this.index > dataLength) {
                    this.index = 0;
                }
            }, 2000);
        },
    }

• 我们首先在data设置一个接收定时器的容器和一个index下标来代表是哪个城市高亮。
• 在mapActive()中先获取这个地图所有城市的数量dataLength，因为dispatchAction是根据下标来进行高亮切换的如果我们的index数量大于城市数量他就不会显示了，所有我们要控制inedx在所有城市数量以下。
• 设置定时器里面先清除之前高亮的城市，如果不清除的话就会一下子多个高亮了，不是我们想要的效果。
• 再使用我们的实例调用eharts的方法来实现高亮和提示框弹出，其中dispatchAction接收几个参数,type表示你要呈现的类型，比如高亮或者提示框，具体的可以在官网看到。
• 在最后我们再判断一下index是否超出城市dataLength数量，如果是则清零重新来过，至此我们的一个轮播高亮就完成了。
  

🖱️ 加入鼠标事件

• 当然我们不能就这样结束，还要加一些事件效果，比如说当我们鼠标移动到地图里面时会停止轮播只高亮我们选择的那个城市

    methods:{
        setMyEchart () {
            ...
            this.mapActive();
            ...
        },
        mouseEvents () {
            // 鼠标划入
            this.charts.on('mouseover', () => {
                // 停止定时器，清除之前的高亮
                clearInterval(this.mTime);
                this.mTime = '';
                console.log(this.mTime);
                this.charts.dispatchAction({
                        type: 'downplay',
                        seriesIndex: 0,
                        dataIndex: this.index
                });
            });
            // 鼠标划出重新定时器开始
            this.charts.on('mouseout', () => {
                this.mapActive();
            });
        },
      }

• 可以看到我们给鼠标划入加入了事件，当我们鼠标移动到地图上时就清除之前对应index的城市，当然仅仅加入鼠标划入也是不行的，这样当我们鼠标滑动一次他就不会继续轮播高亮了，我们还需要加多一个鼠标划出事件，让定时器重新开启。
• 至此一个简单的高亮轮播就完成了，具体源码我放在这里。

👋 写在最后

• 这种高亮效果在工作中也经常用到，我个人觉得还是比较好看的，希望能帮到有需要的同学，如果有什么疑问的话欢迎评论区留言喔~
• 如果您觉得这篇文章有帮助到您的的话不妨🍉一键三连+评论+转发🍉支持一下哟~~😛我们下期再见👋