在用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中地图的所有数据
时间: 2024-10-05 10:26:21