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, lineHeightIndex:null, }, 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,index:vm.lineHeightIndex}; }) }, bindEvents:function(){ var vm = this; EventBus.$on("refresh-json-data", function(arg) { var type = arg.type;//0:高血压 1糖尿病 2孕产妇 365岁以上老年人人数 if(type==0){ vm.jsonUrl = "../../../dataJson/jumingHealthJson/高血压人群.json"; }else if(type==1){ vm.jsonUrl = "../../../dataJson/jumingHealthJson/糖尿病人群.json"; }else if(type==2){ vm.jsonUrl = "../../../dataJson/jumingHealthJson/孕产妇人群.json"; }else if(type==3){ vm.jsonUrl = "../../../dataJson/jumingHealthJson/65岁以上老年人人数.json"; } vm.getJsonData(); }); }, setCity(item){ this.city = item.townName; }, clickMap:function(res){ this.city = res.name; }, 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; }, city:function(value){ var that =this; that.lineHeightIndex =value; // debugger this.town.map(function(v,i){ if(v.townName == value) { that.refreshAllData(v.result); } }) } } }); //数字格式化 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; }