function mapGeo(data) {
var chart = echarts.init(document.getElementById('mapGeo'));
var mapUrl = staticsUrl + '/js/echart-map/beijing.json';
$.get(mapUrl, function (mapJson) {
echarts.registerMap('beijing', mapJson);
chart.setOption({
tooltip: {
trigger: 'item',
formatter: function formatter(params) {
return params.name + "<br/>\u70B9\u4F4D\u5907\u6848\u6570:" + params.data.locationCount + "<br/>\n \u70B9\u4F4D\u6D3B\u8DC3:" + params.data.active + "<br/>\n \u5F53\u65E5\u8FC7\u8F66\u8F86:" + params.data.pass + "<br/>\n \u5F53\u65E5\u8FC7\u8F66\u8F86\u53BB\u91CD:" + params.data.remoPass + "<br/>";
},
position:'inside' //设置定位很重要不然提示框会偏移
},
series: [{
name: '北京市各区多维数据统计',
type: 'map',
map: 'beijing',
radius: '80%',
layoutCenter: ['50%', '50%'],
layoutSize: '100%',
label: {
normal: {
show: true,
textStyle: { color: "#fff" }
},
emphasis: {
show: true,
textStyle: { color: "#fff" }
}
},
itemStyle: {
normal: {
borderWidth: .5, //区域边框宽度
borderColor: '#fff', //区域边框颜色
areaColor: "#0a89e2" //区域颜色
},
emphasis: {
borderWidth: .5,
borderColor: '#fff',
areaColor: "#f7981f"
}
},
// data : data//人口数据:例如[{name:'济南',value:'100万'},{name:'菏泽',value:'100万'}......]
data: data
}]
});
});
var hourIndex=0;
var fhourTime=null;
fhourTime=setInterval(function(){
chart.dispatchAction({
type:"downplay",
seriesIndex:0,
});
chart.dispatchAction({
type:"highlight",
seriesIndex:0,
dataIndex:hourIndex
});
chart.dispatchAction({
type:"showTip",
seriesIndex:0,
dataIndex:hourIndex
});
hourIndex++;
if(hourIndex>data.length){
hourIndex=0;
}
},3000);
//鼠标移入停止轮播
chart.on("mousemove", function(e) {
clearInterval(fhourTime)
chart.dispatchAction({
type: "downplay",
seriesIndex: 0,
});
chart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: e.dataIndex
});
chart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: e.dataIndex
});
})
//鼠标移出恢复轮播
chart.on("mouseout", function() {
fhourTime = setInterval(function() {
chart.dispatchAction({
type: "downplay",
seriesIndex: 0,
});
chart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: hourIndex
});
chart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: hourIndex
});
hourIndex++;
if (hourIndex > data.length) {
hourIndex = 0;
}
}, 3000);
})
},
主要是使用了dispatchAction属性来做自动轮播,如果这个属性报错,请去官网下载最新版js文件