ECharts地图应用定位
2017-01-09 19:16
295 查看
// 地图
function CityMap(){
var myChartCity = echarts.init(document.getElementById('boxMap'));
var ciytData = [
{name: '海门', value: 0},
{name: '鄂尔多斯', value: 0},
{name: '招远', value: 0},
{name: '舟山', value: 0},
{name: '齐齐哈尔', value: 0},
{name: '盐城', value: 0},
{name: '赤峰', value: 0},
{name: '沧州', value: 0},
{name: '大庆', value: 9},
{name: '莱芜', value: 10},
{name: '常德', value: 11},
{name: '保定', value: 12},
{name: '湘潭', value: 13},
{name: '金华', value: 14},
{name: '长沙', value: 16},
{name: '衢州', value: 17},
{name: '廊坊', value: 18},
{name: '菏泽', value: 19},
{name: '合肥', value: 20},
{name: '武汉', value: 21},
];
var geoCoordMap = {
'海门':[121.15,31.89],
'鄂尔多斯':[109.781327,39.608266],
'招远':[120.38,37.35],
'舟山':[122.207216,29.985295],
'齐齐哈尔':[123.97,47.33],
'盐城':[120.13,33.38],
'赤峰':[118.87,42.28],
'沧州':[116.83,38.33],
'大庆':[125.03,46.58],
'莱芜':[117.67,36.19],
'常德':[111.69,29.05],
'保定':[115.48,38.85],
'湘潭':[112.91,27.87],
'金华':[119.64,29.12],
'长沙':[113,28.21],
'衢州':[118.88,28.97],
'廊坊':[116.7,39.53],
'菏泽':[115.480656,35.23375],
'合肥':[117.27,31.86],
'武汉':[114.31,30.52],
};
var resO = [];
var resT = [];
var resS = [];
var convertData = function (data) {
for (var i = 0; i < data.length; i++) {
if(data[i].value<=7){
var geoCoordO = geoCoordMap[data[i].name];
if (geoCoordO) {
resO.push({
name: data[i].name,
value: geoCoordO.concat(data[i].value),
obcity:geoCoordO // 自定义数据
});
};
}else if(data[i].value>7 && data[i].value<=14){
var geoCoordT = geoCoordMap[data[i].name];
if (geoCoordT) {
resT.push({
name: data[i].name,
value: geoCoordT.concat(data[i].value),
obcity:geoCoordT // 自定义数据
});
};
}else{
var geoCoordS = geoCoordMap[data[i].name];
if (geoCoordS) {
resS.push({
name: data[i].name,
value: geoCoordS.concat(data[i].value),
obcity:geoCoordS // 自定义数据
});
};
};
};
};
convertData(ciytData) // 筛选数据
var jsonOne = {
'海门':{presentSum:'1',presentOnline:'a',presentOffline:'11',WifiOnline:'aa',greaterthanTen:'111',lessthanTen:'aaa',judgData:"111111111"},
'招远':{presentSum:'2',presentOnline:'b',presentOffline:'22',WifiOnline:'bb',greaterthanTen:'222',lessthanTen:'bbb',judgData:"211111111"},
'鄂尔多斯':{presentSum:'3',presentOnline:'c',presentOffline:'33',WifiOnline:'cc',greaterthanTen:'333',lessthanTen:'ccc',judgData:"311111111"},
'舟山':{presentSum:'4',presentOnline:'d',presentOffline:'44',WifiOnline:'dd',greaterthanTen:'444',lessthanTen:'ddd',judgData:"411111111"},
'齐齐哈尔':{presentSum:'5',presentOnline:'e',presentOffline:'55',WifiOnline:'ee',greaterthanTen:'555',lessthanTen:'eee',judgData:"511111111"},
'盐城':{presentSum:'6',presentOnline:'f',presentOffline:'66',WifiOnline:'ff',greaterthanTen:'666',lessthanTen:'fff',judgData:"611111111"},
'赤峰':{presentSum:'7',presentOnline:'g',presentOffline:'77',WifiOnline:'gg',greaterthanTen:'777',lessthanTen:'ggg',judgData:"711111111"},
'沧州':{presentSum:'8',presentOnline:'h',presentOffline:'88',WifiOnline:'hh',greaterthanTen:'888',lessthanTen:'hhh',judgData:"811111111"},
'大庆':{presentSum:'9',presentOnline:'i',presentOffline:'99',WifiOnline:'ii',greaterthanTen:'999',lessthanTen:'iii',judgData:"911111111"},
'莱芜':{presentSum:'1',presentOnline:'a',presentOffline:'11',WifiOnline:'aa',greaterthanTen:'111',lessthanTen:'aaa',judgData:"101111111"},
'常德':{presentSum:'2',presentOnline:'b',presentOffline:'22',WifiOnline:'bb',greaterthanTen:'222',lessthanTen:'bbb',judgData:"111111111"},
'保定':{presentSum:'3',presentOnline:'c',presentOffline:'33',WifiOnline:'cc',greaterthanTen:'333',lessthanTen:'ccc',judgData:"121111111"},
'湘潭':{presentSum:'4',presentOnline:'d',presentOffline:'44',WifiOnline:'dd
4000
',greaterthanTen:'444',lessthanTen:'ddd',judgData:"131111111"},
'金华':{presentSum:'5',presentOnline:'e',presentOffline:'55',WifiOnline:'ee',greaterthanTen:'555',lessthanTen:'eee',judgData:"141111111"},
'长沙':{presentSum:'7',presentOnline:'g',presentOffline:'77',WifiOnline:'gg',greaterthanTen:'777',lessthanTen:'ggg',judgData:"151111111"},
'衢州':{presentSum:'8',presentOnline:'h',presentOffline:'88',WifiOnline:'hh',greaterthanTen:'888',lessthanTen:'hhh',judgData:"161111111"},
'廊坊':{presentSum:'9',presentOnline:'i',presentOffline:'99',WifiOnline:'ii',greaterthanTen:'999',lessthanTen:'iii',judgData:"171111111"},
'菏泽':{presentSum:'6',presentOnline:'f',presentOffline:'66',WifiOnline:'ff',greaterthanTen:'666',lessthanTen:'fff',judgData:"181111111"},
'合肥':{presentSum:'7',presentOnline:'g',presentOffline:'77',WifiOnline:'gg',greaterthanTen:'777',lessthanTen:'ggg',judgData:"191111111"},
'武汉':{presentSum:'8',presentOnline:'h',presentOffline:'88',WifiOnline:'hh',greaterthanTen:'888',lessthanTen:'hhh',judgData:"201111111"},
}
optionCity = {
backgroundColor: '#000000',
tooltip : {
trigger: 'item',
borderRadius: 0,
backgroundColor:'#084186',
formatter:function(p){
var a=p.name;
var obj=jsonOne[a];
var text = p.name+"</br>"
+"已签约设备总数：<span style='color:#f0921e'>"+obj.judgData+"</span></br>"
+"当前设备安装总数：<span style='color:#f0921e'>"+obj.presentSum+"</span></br>"
+"当前在线设备：<span style='color:#f0921e'>"+obj.presentOnline+"</span></br>"
+"当前离线设备：<span style='color:#f0921e'>"+obj.presentOffline+"</span></br>"
+"当前上网用户：<span style='color:#f0921e'>"+obj.WifiOnline+"</span></br>"
+">10人在线设备数：<span style='color:#f0921e'>"+obj.greaterthanTen+"</span></br>"
+"<10人在线设备数：<span style='color:#f0921e'>"+obj.lessthanTen+"</span></br>";
return text;
}
},
geo: {
map: 'china',
label: {
normal: {
textStyle:{color:'#92b1d8',fontSize:'12',fontFamily:'微软雅黑'},
show: true // 是否显示字体
},
// 滑过显示样式
emphasis: {
textStyle:{color:'#92b1d8',fontSize:'12',fontFamily:'微软雅黑'},
show: true
}
},
left: '18%',
roam: true,
itemStyle: {
normal: {
areaColor: '#102238',
borderColor: '#111'
},
emphasis: {
areaColor: '#102238'
}
}
},
series : [
{
name: 'one',
type: 'effectScatter',
coordinateSystem: 'geo',
data: resO,
symbolSize:20,
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
itemStyle: {
normal: {
color: '#35a165',
shadowBlur: 0,
shadowColor: '#35a165'
}
},
zlevel: 1
},
{
name: 'two',
type: 'effectScatter',
coordinateSystem: 'geo',
data: resT,
symbolSize:20,
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
itemStyle: {
normal: {
color: '#ef931c',
shadowBlur: 0,
shadowColor: '#ef931c'
}
},
zlevel: 1
},
{
name: 'three',
type: 'effectScatter',
coordinateSystem: 'geo',
data: resS,
symbolSize:20,
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
itemStyle: {
normal: {
color: '#e63f3f',
shadowBlur: 0,
shadowColor: '#e63f3f'
}
},
zlevel: 1
},
]
};
myChartCity.setOption(optionCity);
myChartCity.on('click', function (params) {
if(params.componentType=="series"){
console.log(params);
alert(params.data.obcity)
window.open ("twoMap.html", "newwindow", "height=600, width=1300, toolbar =no, menubar=no, scrollbars=yes, resizable=yes, location=no, status=no");
};
});
}
function CityMap(){
var myChartCity = echarts.init(document.getElementById('boxMap'));
var ciytData = [
{name: '海门', value: 0},
{name: '鄂尔多斯', value: 0},
{name: '招远', value: 0},
{name: '舟山', value: 0},
{name: '齐齐哈尔', value: 0},
{name: '盐城', value: 0},
{name: '赤峰', value: 0},
{name: '沧州', value: 0},
{name: '大庆', value: 9},
{name: '莱芜', value: 10},
{name: '常德', value: 11},
{name: '保定', value: 12},
{name: '湘潭', value: 13},
{name: '金华', value: 14},
{name: '长沙', value: 16},
{name: '衢州', value: 17},
{name: '廊坊', value: 18},
{name: '菏泽', value: 19},
{name: '合肥', value: 20},
{name: '武汉', value: 21},
];
var geoCoordMap = {
'海门':[121.15,31.89],
'鄂尔多斯':[109.781327,39.608266],
'招远':[120.38,37.35],
'舟山':[122.207216,29.985295],
'齐齐哈尔':[123.97,47.33],
'盐城':[120.13,33.38],
'赤峰':[118.87,42.28],
'沧州':[116.83,38.33],
'大庆':[125.03,46.58],
'莱芜':[117.67,36.19],
'常德':[111.69,29.05],
'保定':[115.48,38.85],
'湘潭':[112.91,27.87],
'金华':[119.64,29.12],
'长沙':[113,28.21],
'衢州':[118.88,28.97],
'廊坊':[116.7,39.53],
'菏泽':[115.480656,35.23375],
'合肥':[117.27,31.86],
'武汉':[114.31,30.52],
};
var resO = [];
var resT = [];
var resS = [];
var convertData = function (data) {
for (var i = 0; i < data.length; i++) {
if(data[i].value<=7){
var geoCoordO = geoCoordMap[data[i].name];
if (geoCoordO) {
resO.push({
name: data[i].name,
value: geoCoordO.concat(data[i].value),
obcity:geoCoordO // 自定义数据
});
};
}else if(data[i].value>7 && data[i].value<=14){
var geoCoordT = geoCoordMap[data[i].name];
if (geoCoordT) {
resT.push({
name: data[i].name,
value: geoCoordT.concat(data[i].value),
obcity:geoCoordT // 自定义数据
});
};
}else{
var geoCoordS = geoCoordMap[data[i].name];
if (geoCoordS) {
resS.push({
name: data[i].name,
value: geoCoordS.concat(data[i].value),
obcity:geoCoordS // 自定义数据
});
};
};
};
};
convertData(ciytData) // 筛选数据
var jsonOne = {
'海门':{presentSum:'1',presentOnline:'a',presentOffline:'11',WifiOnline:'aa',greaterthanTen:'111',lessthanTen:'aaa',judgData:"111111111"},
'招远':{presentSum:'2',presentOnline:'b',presentOffline:'22',WifiOnline:'bb',greaterthanTen:'222',lessthanTen:'bbb',judgData:"211111111"},
'鄂尔多斯':{presentSum:'3',presentOnline:'c',presentOffline:'33',WifiOnline:'cc',greaterthanTen:'333',lessthanTen:'ccc',judgData:"311111111"},
'舟山':{presentSum:'4',presentOnline:'d',presentOffline:'44',WifiOnline:'dd',greaterthanTen:'444',lessthanTen:'ddd',judgData:"411111111"},
'齐齐哈尔':{presentSum:'5',presentOnline:'e',presentOffline:'55',WifiOnline:'ee',greaterthanTen:'555',lessthanTen:'eee',judgData:"511111111"},
'盐城':{presentSum:'6',presentOnline:'f',presentOffline:'66',WifiOnline:'ff',greaterthanTen:'666',lessthanTen:'fff',judgData:"611111111"},
'赤峰':{presentSum:'7',presentOnline:'g',presentOffline:'77',WifiOnline:'gg',greaterthanTen:'777',lessthanTen:'ggg',judgData:"711111111"},
'沧州':{presentSum:'8',presentOnline:'h',presentOffline:'88',WifiOnline:'hh',greaterthanTen:'888',lessthanTen:'hhh',judgData:"811111111"},
'大庆':{presentSum:'9',presentOnline:'i',presentOffline:'99',WifiOnline:'ii',greaterthanTen:'999',lessthanTen:'iii',judgData:"911111111"},
'莱芜':{presentSum:'1',presentOnline:'a',presentOffline:'11',WifiOnline:'aa',greaterthanTen:'111',lessthanTen:'aaa',judgData:"101111111"},
'常德':{presentSum:'2',presentOnline:'b',presentOffline:'22',WifiOnline:'bb',greaterthanTen:'222',lessthanTen:'bbb',judgData:"111111111"},
'保定':{presentSum:'3',presentOnline:'c',presentOffline:'33',WifiOnline:'cc',greaterthanTen:'333',lessthanTen:'ccc',judgData:"121111111"},
'湘潭':{presentSum:'4',presentOnline:'d',presentOffline:'44',WifiOnline:'dd
4000
',greaterthanTen:'444',lessthanTen:'ddd',judgData:"131111111"},
'金华':{presentSum:'5',presentOnline:'e',presentOffline:'55',WifiOnline:'ee',greaterthanTen:'555',lessthanTen:'eee',judgData:"141111111"},
'长沙':{presentSum:'7',presentOnline:'g',presentOffline:'77',WifiOnline:'gg',greaterthanTen:'777',lessthanTen:'ggg',judgData:"151111111"},
'衢州':{presentSum:'8',presentOnline:'h',presentOffline:'88',WifiOnline:'hh',greaterthanTen:'888',lessthanTen:'hhh',judgData:"161111111"},
'廊坊':{presentSum:'9',presentOnline:'i',presentOffline:'99',WifiOnline:'ii',greaterthanTen:'999',lessthanTen:'iii',judgData:"171111111"},
'菏泽':{presentSum:'6',presentOnline:'f',presentOffline:'66',WifiOnline:'ff',greaterthanTen:'666',lessthanTen:'fff',judgData:"181111111"},
'合肥':{presentSum:'7',presentOnline:'g',presentOffline:'77',WifiOnline:'gg',greaterthanTen:'777',lessthanTen:'ggg',judgData:"191111111"},
'武汉':{presentSum:'8',presentOnline:'h',presentOffline:'88',WifiOnline:'hh',greaterthanTen:'888',lessthanTen:'hhh',judgData:"201111111"},
}
optionCity = {
backgroundColor: '#000000',
tooltip : {
trigger: 'item',
borderRadius: 0,
backgroundColor:'#084186',
formatter:function(p){
var a=p.name;
var obj=jsonOne[a];
var text = p.name+"</br>"
+"已签约设备总数：<span style='color:#f0921e'>"+obj.judgData+"</span></br>"
+"当前设备安装总数：<span style='color:#f0921e'>"+obj.presentSum+"</span></br>"
+"当前在线设备：<span style='color:#f0921e'>"+obj.presentOnline+"</span></br>"
+"当前离线设备：<span style='color:#f0921e'>"+obj.presentOffline+"</span></br>"
+"当前上网用户：<span style='color:#f0921e'>"+obj.WifiOnline+"</span></br>"
+">10人在线设备数：<span style='color:#f0921e'>"+obj.greaterthanTen+"</span></br>"
+"<10人在线设备数：<span style='color:#f0921e'>"+obj.lessthanTen+"</span></br>";
return text;
}
},
geo: {
map: 'china',
label: {
normal: {
textStyle:{color:'#92b1d8',fontSize:'12',fontFamily:'微软雅黑'},
show: true // 是否显示字体
},
// 滑过显示样式
emphasis: {
textStyle:{color:'#92b1d8',fontSize:'12',fontFamily:'微软雅黑'},
show: true
}
},
left: '18%',
roam: true,
itemStyle: {
normal: {
areaColor: '#102238',
borderColor: '#111'
},
emphasis: {
areaColor: '#102238'
}
}
},
series : [
{
name: 'one',
type: 'effectScatter',
coordinateSystem: 'geo',
data: resO,
symbolSize:20,
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
itemStyle: {
normal: {
color: '#35a165',
shadowBlur: 0,
shadowColor: '#35a165'
}
},
zlevel: 1
},
{
name: 'two',
type: 'effectScatter',
coordinateSystem: 'geo',
data: resT,
symbolSize:20,
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
itemStyle: {
normal: {
color: '#ef931c',
shadowBlur: 0,
shadowColor: '#ef931c'
}
},
zlevel: 1
},
{
name: 'three',
type: 'effectScatter',
coordinateSystem: 'geo',
data: resS,
symbolSize:20,
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
itemStyle: {
normal: {
color: '#e63f3f',
shadowBlur: 0,
shadowColor: '#e63f3f'
}
},
zlevel: 1
},
]
};
myChartCity.setOption(optionCity);
myChartCity.on('click', function (params) {
if(params.componentType=="series"){
console.log(params);
alert(params.data.obcity)
window.open ("twoMap.html", "newwindow", "height=600, width=1300, toolbar =no, menubar=no, scrollbars=yes, resizable=yes, location=no, status=no");
};
});
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ECharts地图应用图片定位
- 纵谈地图应用中标识定位
- IOS之地图和定位应用开发
- iOS.定位服务与地图应用.02.地理信息反编码
- iOS.定位服务与地图应用.07.调用谷歌Web地图
- iOS.定位服务与地图应用.06.调用iOS苹果地图
- 地图应用定位，覆盖图层
- IOS之地图和定位应用开发
- 百度地图API应用之——利用定位SDK和地图SDK来进行定位和显示当前位置
- IOS之地图和定位应用开发
- IOS之地图和定位应用开发
- IOS之地图和定位应用开发
- IOS之地图和定位应用开发
- IOS之地图和定位应用开发
- iOS.定位服务与地图应用.01.定位服务编程
- Android开发--地图与定位应用--申请Google地图服务（API Key）
- IOS之地图和定位应用开发
- iOS开发之地图和定位应用开发
- iOS.定位服务与地图应用.04.使用iOS苹果地图
- 11.3 IOS之地图和定位应用开发