标签:方向 function div apt tooltip 分布 angular items ati
在用echart地图时,看到地图坐标数据,数据的格式是这样的{“徐州”:[lng,lat],....},一时不知道咋处理,数组的话还有点头绪,一看对象顿时懵了。不说废话,先上代码
var person ={}; var strArr=["a","b"]; person[‘abc‘] = "aasdf"; for (var index = 0; index <= strArr.length; index++) { person[strArr[index]]=[index,index+1]; } for(var item in person) { console.log(person[item]); }
//返回的数据格式是{“a”:[0,1],"b":[1,2],"abc":[2,3]}
angular中
$http.get("CityJDWD").success(function(data){
$scope.value=[];
var name=[];
var location=[];
var geo={};
angular.forEach(data,function(value){
$scope.value.push({name:value.jwpp,value:value.cs})
});
angular.forEach(data,function(value){
name.push(value.jwpp)
});
angular.forEach(data,function(value){
location.push([value.lng,value.lat])
});
for (var index = 0; index <= name.length; index++) {
geo[name[index]]=location[index];
}
var myChart2 = echarts.init(document.getElementById(‘chart4‘));
option = {
title : {
text: ‘vpn使用用户全国分布‘,
x:‘center‘
},
tooltip : {
trigger: ‘item‘
},
dataRange: {
min : 0,
max : 500,
calculable : true,
color: [‘maroon‘,‘purple‘,‘red‘,‘orange‘,‘yellow‘,‘lightgreen‘]
},
series : [
{
name: ‘用户访问量‘,
type: ‘map‘,
mapType: ‘china‘,
hoverable: true,
roam:false,
data : $scope.value,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
markPoint : {
symbolSize: 5, // 标注大小,半宽(半径)参数,当图形为方向或菱形则总宽度为symbolSize * 2
itemStyle: {
normal: {
borderColor: ‘#87cefa‘,
borderWidth: 1, // 标注边线线宽,单位px,默认为1
label: {
show: false
}
},
emphasis: {
borderColor: ‘#1e90ff‘,
borderWidth: 5,
label: {
show: true
}
}
},
data : $scope.value
},
geoCoord: geo
},
{
name: ‘Top5‘,
type: ‘map‘,
mapType: ‘china‘,
data:[],
markPoint : {
symbol:‘emptyCircle‘,
symbolSize : function (v){
return 10 + v/100
},
effect : {
show: true,
shadowBlur : 0
},
itemStyle:{
normal:{
label:{show:false}
}
},
data : [
{name: "吴中", value: 1210},
{name: "张家港", value: 194},
{name: "姑苏", value: 229},
{name: "鼓楼", value: 273},
{name: "安庆", value: 279}
]
}
}
]
};
myChart2.setOption(option);
})
完成了echart中地图的所有数据
标签:方向 function div apt tooltip 分布 angular items ati
原文地址:http://www.cnblogs.com/321a/p/6729126.html