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',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");
};
});
}