echarts地图展示,地图数据封装,动态轮播每个有数据的省份
每1分钟定时轮播一个有数据的省份。若点击省份,则重置定时器,进入该省份,展示数据。
/**
*
*/
$(function () {
safeDefenseData.init();
});
var safeDefenseData = {
mapData: null,//地图数据
provinceIndex: -1,//省份下标
totalProvince: 0, //有数据的总省份数
currentTab: 1,// 选中tab
init : function(){
this.mapChart = this.mapChart();
},
// 地图
mapChart:function(){
var _this = this;
var option = {
tooltip: {
trigger: 'item',
/*formatter: function(data){
if( !isNaN(data.value) ){
return data.name+'<br/>报警数:'+data.value+'次';
}
}*/
},
grid: {
top: 30,
left: 10,
right: 10,
bottom: 0,
containLabel: true
},
series: [{
name: '报警统计',
type: 'map',
mapType: 'china', // 自定义扩展图表类型
zoom: 1.25,
itemStyle:{
normal:{
label:{
show:true,
color:'#ccc',
},
areaColor: 'rgba(0,0,0,0.2)',
borderColor:'#49c7e2',
},
emphasis:{
label:{
show:true,
color:'#ccc',
},
areaColor: '#49c7e2',
}
},
markPoint: {//图形
symbol: 'path://m 0,0 a 20 20 0 0 1 20 -20 h 48 a 20 20 0 0 1 20 20 v 20 a 20 20 0 0 1 -20 20 h -30 l -6,20 l -6,-20 h -6 a 20 20 0 0 1 -20 -20 z',
symbolSize: function(val){
return [textSize(val,"12px").width+15,30]
},
symbolKeepAspect: true,
symbolOffset: ['34%', '-80%'],
label: {
normal: {
position:'insideTop',
show: true,
distance: 6,
formatter: '{c}',
textStyle:{
color:'#ffffff',
}
}
},
itemStyle: {
normal: {
color: ['#35B3E2']
},
emphasis: {
color: ['#35B3E2']
}
},
markArea: {
itemStyle: {
normal: {
color: ['#ffffff'],
}
}
},
data:[],
},
data:[],
}]
};
var myChart = echarts.init(document.getElementById('mapChart'));
myChart.setOption(option);
myChart.on('click', function (params) {
if(params.componentType == 'markPoint' && option.series[0].mapType == 'china' && !params.data.children){
global.ajaxLoading.pop("当前省份无数据,不能点击进行切换!",false,2000);
return;
}
if(option.series[0].mapType == 'china'){//进省份
var provinceName = params.data.name.substring(0,2);
var provinceData = [];
if(params.componentType == 'markPoint'){
provinceData = params.data.children;
}else{
// 获取数据
var isExist = false;
if(provinceName != ''){
for(var i = 0; i<_this.mapData.length;i++){
if(_this.mapData[i].name.indexOf(provinceName)>-1){//是该省份,有数据
provinceData = _this.mapData[i].children;
isExist = true;
break;
}
}
if(!isExist){
global.ajaxLoading.pop("当前省份无数据,不能点击进行切换!",false,2000);
return;
}
}
}
$.get(appCtx+'resources/js/common/plugin/echarts/map/'+encodeURIComponent(provinceName)+'.json', function (geoJson) {
echarts.registerMap(provinceName, geoJson);
option.series[0].mapType = provinceName;
option.series[0].markPoint.data = provinceData;
option.series[0].data = provinceData;
if(provinceName.indexOf('海南')>-1) { //由于海南地图包括南海及南海诸岛在内的大片区域,所以显示海南地图时,要将地图放大,并设置海南岛居中显示
option.series[0].center = [109.844902, 19.0392];
option.series[0].layoutCenter = ['50%', '58%'];
option.series[0].layoutSize = "600%";
} else { //非显示海南时,将设置的参数恢复默认值
option.series[0].center = undefined;
option.series[0].layoutCenter = undefined;
option.series[0].layoutSize = undefined;
}
_this.mapChart.refresh(option);
_this.setTimer(_this.mapChart);
/*window.onresize = function () {
myChart.resize();
};*/
});
}else{//进全国
$.get(appCtx+'resources/js/common/plugin/echarts/map/'+encodeURIComponent('全国')+'.json', function (geoJson) {
echarts.registerMap('china', geoJson);
option.series[0].mapType = 'china';
option.series[0].markPoint.data = _this.mapData;
option.series[0].data = _this.mapData;
option.series[0].center = undefined;
option.series[0].layoutCenter = undefined;
option.series[0].layoutSize = undefined;
_this.mapChart.refresh(option);
_this.setTimer(_this.mapChart);
/*window.onresize = function () {
myChart.resize();
};*/
});
}
});
$(window).resize(function () { //当浏览器大小变化时
myChart.resize();
});
return {
refresh : function(option){
myChart.setOption(option,true);
},
option : option,
};
},
// 地图数据
getMapChartData:function(){
var _this = this;
var option = _this.mapChart.option;
var data = {"山东省":{"德州市":{"alarmNum":11},"德州市1":{"alarmNum":11}},"海南省":{"海口市":{"alarmNum":11}},"贵州省":{"贵阳市":{"alarmNum":122},"遵义市":{"alarmNum":51}},"广东省":{"广州市":{"alarmNum":15}},"北京市":{"北京市":{"alarmNum":21}},"河北省":{"衡水市":{"alarmNum":31}}};
if(data){
_this.checkMapData(data);
if(_this.mapData.length>0){
option.series[0].mapType = 'china';
option.series[0].markPoint.data = _this.mapData;
option.series[0].data = _this.mapData;
option.series[0].center = undefined;
option.series[0].layoutCenter = undefined;
option.series[0].layoutSize = undefined;
_this.mapChart.refresh(option);
_this.setTimer(_this.mapChart);
}else{
_this.provinceIndex = -1;
option.series[0].markPoint.data = [];
option.series[0].data = [];
_this.mapChart.refresh(option);
}
}else{
option.series[0].markPoint.data = [];
option.series[0].data = [];
_this.mapChart.refresh(option);
}
},
// 设置定时器
setTimer: function(chart){
var _this = this;
if(chart.option.series[0].mapType == 'china'){//如果已经是全国了,就直接遍历轮播省份
_this.provinceIndex = 0;
}else{//如果是省份,就先进入全国,重新遍历
_this.provinceIndex = -1;
}
if(_this.timer){
clearInterval(_this.timer);
}
_this.timer = setInterval(function(){
_this.handleMapData(chart);
}, 1000*60*1);//1分钟
},
//数据检查处理
checkMapData: function(result){
var _this = this;
var mapData = [];
for(var key in result){
if(key.length>=2 && (geoCoordMap[key.substring(0,2)] || geoCoordMap[key.substring(0,3)])){//省份存在
var children = [];
var total = 0; //省份总数
for(var childKey in result[key]){
if(geoCoordMap[childKey]){//判断市是否存在
total += result[key][childKey].alarmNum;
children.push({
name: childKey,
value: result[key][childKey].alarmNum,
coord: geoCoordMap[childKey]
});
}else{
delete result[key][childKey];
}
}
if(children.length>0){//避免存在无效数据,删除children为空的父对象
var obj = {
name:key,
children:children,
value: total,
coord: geoCoordMap[key.substring(0,2)]?geoCoordMap[key.substring(0,2)]:geoCoordMap[key.substring(0,3)]
};
mapData.push(obj);
}else{
delete result[key];
}
}else{
delete result[key];
}
}
_this.mapData = mapData;
_this.totalProvince = mapData.length;
return result;
},
/*
* 地图数据封装
* chart 需要改变的echart
* */
handleMapData: function(chart){
var _this = this;
var option = chart.option;
if(_this.provinceIndex != -1 && _this.provinceIndex < _this.totalProvince){//省份中还有数据,继续遍历
var province = _this.mapData[_this.provinceIndex];// 省份数据
var provinceData = province.children;// 省份中的市级数据
var provinceName = province.name.substring(0,2);// 省份名
$.get(appCtx+'resources/js/common/plugin/echarts/map/'+encodeURIComponent(provinceName)+'.json', function (geoJson) {
echarts.registerMap(provinceName, geoJson);
option.series[0].mapType = provinceName;
option.series[0].markPoint.data = provinceData;
option.series[0].data = provinceData;
if(provinceName.indexOf('海南')>-1) { //由于海南地图包括南海及南海诸岛在内的大片区域,所以显示海南地图时,要将地图放大,并设置海南岛居中显示
option.series[0].center = [109.844902, 19.0392];
option.series[0].layoutCenter = ['50%', '58%'];
option.series[0].layoutSize = "600%";
} else { //非显示海南时,将设置的参数恢复默认值
option.series[0].center = undefined;
option.series[0].layoutCenter = undefined;
option.series[0].layoutSize = undefined;
}
chart.refresh(option);
if(_this.provinceIndex == _this.totalProvince-1){//最后一个了
_this.provinceIndex = -1;
}else{
_this.provinceIndex = _this.provinceIndex + 1;
}
/*window.onresize = function () {
myChart.resize();
};*/
});
}else{//所有省份全部遍历完了,进入全国
$.get(appCtx+'resources/js/common/plugin/echarts/map/'+encodeURIComponent('全国')+'.json', function (geoJson) {
echarts.registerMap('china', geoJson);
option.series[0].mapType = 'china';
option.series[0].markPoint.data = _this.mapData;
option.series[0].data = _this.mapData;
option.series[0].center = undefined;
option.series[0].layoutCenter = undefined;
option.series[0].layoutSize = undefined;
chart.refresh(option);
if(_this.totalProvince>0){
_this.provinceIndex = 0;
}else{
_this.provinceIndex = -1;
}
/*window.onresize = function () {
myChart.resize();
};*/
});
}
}
}
/**
* 获取文本宽高
* @param text 文本
* @param fontSize 代表汉字的大小,英文字会自动按照默认值
* @returns {{width: *, height: *}}
*/
function textSize(text,fontSize) {
var span = document.createElement("span");
var result = {
"width": span.offsetWidth,
"height": span.offsetHeight
};
span.style.visibility = "hidden";
span.style.fontSize = fontSize || "12px";
document.body.appendChild(span);
if (typeof span.textContent != "undefined")
span.textContent = text || "国";
else span.innerText = text || "国";
result.width = span.offsetWidth - result.width;
result.height = span.offsetHeight - result.height;
span.parentNode.removeChild(span);
return result;
}
注意点:
1.切换地图的时候,setOption里面要true,就是重新渲染,否则,地图鼠标移至地图上时,省份数据会拿不到
refresh : function(option){
myChart.setOption(option,true);
},
用到的文件
1.地图地区坐标数据、省份数据文件