toastr.options = { "closeButton": true, "positionClass": "toast-top-center", "preventDuplicates": true } new Vue({ el: '#main', data: { jsonUrl:"../../../dataJson/jumingHealthJson/高血压人群.json", jsonData:null, city:'贵港市', town:[ { "townName": "贵港市", "result": "0" }, { "townName": "港北区", "result": "26531" }, { "townName": "港南区", "result": "25634" }, { "townName": "桂平市", "result": "113485" }, { "townName": "平南县", "result": "74128" }, { "townName": "覃塘区", "result": "12587" }, ], mapData:null, skipShow:0, }, mounted: function() { this.bindEvents(); this.getJsonData(); }, methods: { getJsonData:function(){ var vm = this; bigDataAPI.getJsonData(this.jsonUrl).then(function(res){ vm.jsonData = res; var options = _.map(res.town,function(item,idx){ var it = {name:item.townName,value:item.result} return it; }) vm.mapData ={data:options,zoom:1}; }) }, bindEvents:function(){ var vm = this; EventBus.$on("refresh-json-data", function(arg) { var type = arg.type;//0:高血压 1糖尿病 if(type==0){ vm.jsonUrl = "../../../dataJson/jumingHealthJson/高血压人群.json"; }else if(type==1){ vm.jsonUrl = "../../../dataJson/jumingHealthJson/糖尿病人群.json"; } vm.getJsonData(); }); }, setCity(item){ this.city = item.townName; var vm =this; this.town.map(function(v,i){ if(v.townName == item.townName) { vm.$refs.map.selectLineHeight(i) //高亮地图 vm.refreshAllData(item.result); } }) }, clickMap:function(res){ this.city = res.name; this.refreshAllData(res.value); }, refreshAllData:function(cityVal){ var vm = this; cityVal = parseInt(cityVal) switch(cityVal){ case 0: vm.jsonUrl = "../../../dataJson/jumingHealthJson/高血压人群.json"; break;//贵港市 case 26531: vm.jsonUrl = "../../../dataJson/jumingHealthJson/港北区.json"; break;//港北区 case 25634: vm.jsonUrl = "../../../dataJson/jumingHealthJson/港南区.json";break;//港南区 case 113485: vm.jsonUrl = "../../../dataJson/jumingHealthJson/桂平市.json"; break;//桂平市 case 74128: vm.jsonUrl = "../../../dataJson/jumingHealthJson/平南县.json"; break;//平南县 case 12587:vm.jsonUrl = "../../../dataJson/jumingHealthJson/覃塘区.json"; break;//覃塘区 default:break; } vm.getJsonData(); }, skipClick:function(){ console.log(222) this.skipShow == 0 ? this.skipShow = 1 : this.skipShow = 0 } }, watch:{ jsonData:function(data){ this.jsonData = data; } } }); //数字格式化 function toThousands(str) { if(!str)return str =parseInt(str); if(typeof(str) == 'number')str = str.toString() var newStr = ""; var count = 0; if(str.indexOf(".") == -1) { for(var i = str.length - 1; i >= 0; i--) { if(count % 3 == 0 && count != 0) { newStr = str.charAt(i) + "," + newStr; } else { newStr = str.charAt(i) + newStr; } count++; } str = newStr; } else { for(var i = str.indexOf(".") - 1; i >= 0; i--) { if(count % 3 == 0 && count != 0) { newStr = str.charAt(i) + "," + newStr; } else { newStr = str.charAt(i) + newStr; //逐个字符相接起来 } count++; } str = newStr + (str + "00").substr((str + "00").indexOf("."), 3); } return str; }