echarts地图轮播功能+鼠标事件

效果图

准备个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);
		};