ECharts地圖應用定位

//   地圖
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");
                };
            });            

    }


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章