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轮播 闭包,就不用再重复写入上面一段代码了, 简化了代码,鼠标移除的时候直接调用即可