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);
}
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);
}
相关文章推荐
- ECharts地图应用定位
- 地图应用定位,覆盖图层
- 纵谈地图应用中标识定位
- IOS之地图和定位应用开发
- iOS.定位服务与地图应用.04.使用iOS苹果地图
- iOS.定位服务与地图应用.03.地理信息编码查询
- J2ME游戏中地图,背景的绘制 --- 图片切割的应用
- Win8开始屏幕中地图应用的定位功能开启及使用介绍
- iOS之地图和定位应用开发
- iOS学习笔记–11 IOS之地图和定位应用开发
- iOS.定位服务与地图应用.06.调用iOS苹果地图
- Android开发--地图与定位应用--申请Google地图服务(API Key)
- Android GPS 定位 3 详细地址周边地图图片
- IOS之地图和定位应用开发
- IOS之地图和定位应用开发
- 地图应用定位,覆盖图层
- IOS之地图和定位应用开发
- IOS之地图和定位应用开发
- iOS.定位服务与地图应用.01.定位服务编程
- iOS.定位服务与地图应用.07.调用谷歌Web地图