您的位置:首页 > 其它

ECharts地图应用图片定位

2017-01-09 19:22 232 查看
function CityMaptwo(){

        var qmyChartCity = echarts.init(document.getElementById('boxMap'));

                //  签约城市

                var qciytData = [

                     {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},

                     {name: '广州', value: 38},

                     {name: '延安', value: 38},

                     {name: '太原', value: 39},

                     {name: '清远', value: 39},

                     {name: '中山', value: 39},

                     {name: '昆明', value: 39},                         

                ];

            

                var qgeoCoordMap = {

                    '海门':[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],

                    '广州':[113.23,23.16],

                    '延安':[109.47,36.6],

                    '太原':[112.53,37.87],

                    '清远':[113.01,23.7],

                    '中山':[113.38,22.52],

                    '昆明':[102.73,25.04],                        

                };

                var resF = [];

                //  签约城市数据函数

                function signAContract(data){

                     for(var i = 0; i < data.length; i++){

                        var geoCoordF = qgeoCoordMap[data[i].name];

                        if (geoCoordF) {

                            resF.push({

                                name: data[i].name,

                                value: geoCoordF.concat(data[i].value),

                            });

                        };                             

                     }

                }                

                signAContract(qciytData)  // 签约城市数据            

                var qjsonOne = {

                    '海门':{judgData:"111111111"},

                    '招远':{judgData:"211111111"},

                    '鄂尔多斯':{judgData:"311111111"},

                    '舟山':{judgData:"411111111"},

                    '齐齐哈尔':{judgData:"511111111"},

                    '盐城':{judgData:"611111111"},

                    '赤峰':{judgData:"711111111"},

                    '沧州':{judgData:"811111111"},

                    '大庆':{judgData:"911111111"},

                    '莱芜':{judgData:"101111111"},

                    '常德':{judgData:"111111111"},

                    '保定':{judgData:"121111111"},

                    '湘潭':{judgData:"131111111"},

                    '金华':{judgData:"141111111"},

                    '长沙':{judgData:"151111111"},

                    '衢州':{judgData:"161111111"},

                    '廊坊':{judgData:"171111111"},

                    '菏泽':{judgData:"181111111"},

                    '合肥':{judgData:"191111111"},

                    '武汉':{judgData:"201111111"},                

                    '广州':{judgData:"111111111"},

                    '延安':{judgData:"222222222"},

                    '太原':{judgData:"333333333"},

                    '清远':{judgData:"444444444"},

                    '中山':{judgData:"555555555"},

                    '昆明':{judgData:"666666666"},                

                }

                qoptionCity = {

                    backgroundColor: '#000000',

                    tooltip : {

                        trigger: 'item',

                        borderRadius: 0,

                        backgroundColor:'#084186',

                        formatter:function(p){

                            var a=p.name;

                            var obj=qjsonOne[a];

                                var text = p.name+"</br>"                                

                                +"已签约设备总数:<span style='color:#f0921e'>"+obj.judgData+"</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: 'judgement',

                            type: 'scatter',

                            coordinateSystem: 'geo',                            

                            data: resF,

                            symbol:'image://../img/hongqi.png',    //  把显示颜色改成背景图片

                            symbolSize:15,  //改变红旗大小

                            zlevel: 1

                        },                                                

                        

                    ]

                };            

            qmyChartCity.setOption(qoptionCity);        
    }

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: