echarts地图自动轮播

407 阅读2分钟
function getMap(data){
    var showData = data;
	$.get("js/520000_gzs.json",function(geoJson){
		var myChartJson = echarts.init(document.getElementById('map'));
		echarts.registerMap('ordos', geoJson);
		var option = {
            
            series:[
            {
                name: 'ordos',
                type: 'map',
                mapType: 'ordos',
                roam: false,
                top:'13%',
                zoom:1.15,
                x:'12%',
                selectedMode : 'single',//multiple多选
                label:{
                    show:true,
                    color:'#11C8F2',
                },
                emphasis:{
                    itemStyle:{
                        areaColor:"#00EC00"
                    },
                    label:{
                        color:"#fff"
                    },
                },
                markPoint:{
                    symbol:'pin',
                    symbolSize:'50',
                    itemStyle:{
                        color:'#ff0000'
                    }
                },
                itemStyle:{
                    borderWidth:'2',
                    borderColor:'#D1E3F3',
                    areaColor:'#07306A',
                    shadowColor: 'rgba(0,241,255, 0.8)',
                    shadowBlur: 15
                },
                data:[]
            }],
			tooltip : {
				trigger: 'item', 
				backgroundColor:'none',
                position: [20, 20],
                
				formatter:function(params, ticket, callback){
					var tpl='';
					var useData = showData[0];
					tpl+='<div class="maptooltip">';
					tpl+='<div class="mtt_title">'+params.name+'</div>';
					tpl+='<div class="mtt_list">';
					
					tpl+='<div class="item">';
					tpl+='<div class="item_title">函件分布情况</div>';
					tpl+='<div class="item_parm"><ul><li><span class="label">累积函件数:</span> ';
					tpl+='<span class="value"><i>'+useData.keyPlaces[0].NUM+'</i>个</span></li>';
					tpl+='<li><span class="label">今日函件数:</span>'; 
					tpl+='<span class="value"><i>'+useData.keyPlaces[1].NUM+'</i>个</span></li>';
					tpl+='<li><span class="label">今日已完成:</span> ';
					tpl+='<span class="value"><i>'+useData.keyPlaces[2].NUM+'</i>个</span></li>';
					tpl+='<li><span class="label">今日未完成:</span> ';
					tpl+='<span class="value"><i>'+useData.keyPlaces[2].NUM+'</i>个</span></li>';
					tpl+='<br/> <li><span class="label">累计函件平均处理时长/min:</span> ';
					tpl+='<span class="value"><i>'+useData.keyPlaces[2].NUM+'</i>个</span></li>';
					tpl+='</ul></div>';
					
					tpl+='<div class="item">';
					tpl+='<div class="item_title">核实转出情况</div>';
					tpl+='<div class="item_parm"><ul><li><span class="label">外省来函统计:</span> ';
					tpl+='<span class="value"><i>'+useData.keyPlaces[0].NUM+'</i>个</span></li>';
					tpl+='<li><span class="label">转外省函件统计:</span>'; 
					tpl+='<span class="value"><i>'+useData.keyPlaces[1].NUM+'</i>个</span></li>';
					tpl+='</ul></div>';
					
					tpl+='</div></div></div>';
					
					return tpl;
                   
				} 
			},
			
		};
		myChartJson.setOption(option);
		
		// 地图自动轮播--star
		
		let mTime='';// 用定时器控制高亮
		let dataLength=geoJson.features.length;
		let index=-1;
		
		lunbo();
		function lunbo(mouseover){
			mTime = setInterval(() => {
				// 清除之前的高亮
				myChartJson.dispatchAction({
					type: 'downplay',
					seriesIndex: 0,
					dataIndex: index
				});
				index = (index + 1) % dataLength;
				// 当前下标高亮
				myChartJson.dispatchAction({
					type: 'highlight',
					seriesIndex: 0,
					dataIndex: index
				});
				myChartJson.dispatchAction({
					type: 'showTip',
					seriesIndex: 0,
					dataIndex: index
				});
				if (index > dataLength) {
					index = 0;
				}
			}, 2000);
		}
		// 鼠标划入
		myChartJson.on('mouseover', (e) => {
			// 停止定时器,清除之前的高亮
			clearInterval(mTime);
			mTime = '';
                        //e.dataIndex!=index--请看下面说明
			if(e.dataIndex!=index){
				myChartJson.dispatchAction({
						type: 'downplay',
						seriesIndex: 0,
						dataIndex: index
				});
			}
		});
		// 鼠标划出重新定时器开始
		myChartJson.on('mouseout', () => {
			lunbo();
		});
		// 地图自动轮播--end
		
	});
}

``` js
<div id="map"></div>
```

因为在网上搜索出来的- 还是有一小点不是很满足自身需求 进行了改动;

鼠标进入,时加入--判断--e.dataIndex!=index-- 主要作用:

之前没加次判断时, 自动轮播后,如;轮播到贵阳市,下标0,鼠标进入后取消它的高亮,

但是,再次鼠标指向他却没有反应(高亮),正确的应该是鼠标不管指向哪个都可以显示高亮弹出tip,,,所以这个判断主要解决,鼠标指向高亮问题。

在funtion 里面写了 lunbo轮播 闭包,就不用再重复写入上面一段代码了, 简化了代码,鼠标移除的时候直接调用即可