new Vue({ el: '#app', data: { city:'贵港市', town: [ { "townName": "贵港市", "result": "0" }, { "townName": "港北区", "result": "26531" }, { "townName": "港南区", "result": "25634" }, { "townName": "桂平市", "result": "113485" }, { "townName": "平南县", "result": "74128" }, { "townName": "覃塘区", "result": "12587" }, ], timeType:'1',//时间过滤条件 1是上月 2是半年 leftData1:{}, //左边数据块1 leftData2:{}, //左边数据块2 yesterdayData:{}, leftChart1:null, //左边的图表1 leftChart2:null, //左边的图表2 rightChart1:null, //右边边的图表1 rightChart2:null, //右边的图表2 tableData1:null, //表格数据1 tableData2:null, //表格数据2 mapData:null, allData:null //所有的数据 用来切换区县 }, mounted: function() { this.initData() }, methods: { initData:function(){ this.allData = this.newObj(bigData); this.setLeftChart1(); this.setLeftChart2(); this.setRightChart1(); this.setRightChart2(); this.setTable1(); this.setTable2(); this.setleftData1(); this.setYesterDay(); this.setMapData(); }, setleftData1:function(){ var options = null; if(this.timeType == 1){ options= this.newObj(this.allData['上月']); } else{ options= this.newObj(this.allData['本年']) } this.setFormater(options); this.leftData1 = options; }, setYesterDay:function(){ var options = null; options= this.newObj(this.allData['昨日数据']) this.setFormater(options); this.yesterdayData = options; }, setLeftChart1:function(){ var options =this.allData['门诊人次月趋势']; this.leftChart1 = options }, setLeftChart2:function(){ var options =this.allData['住院人次月趋势']; this.leftChart2 = options }, setMapData:function(){ var options =this.allData['各区县服务患者数']; this.mapData ={data:options} ; }, setRightChart1:function(){ var options =this.allData['门诊分类别月趋势']; this.rightChart1= options }, setRightChart2:function(){ var options =this.allData['住院平均日数月趋势']; this.rightChart2= options }, setTable1:function(){ var options =this.allData['门急诊服务情况']; this.tableData1= options }, setTable2:function(){ var options =this.allData['住院服务情况']; this.tableData2= options }, setCity(item){ this.city = item.townName; var that =this; this.town.map(function(v,i){ if(v.townName == item.townName) { that.$refs.map.selectLineHeight(i) //高亮地图 } }) }, setTimeStr(v){ this.timeType = v; this.setleftData1() }, setFormater:function(obj){ for(var c in obj){ obj[c] =toThousands(obj[c]) } }, newObj:function(obj){ return JSON.parse(JSON.stringify(obj)) }, clickMap:function(res){ this.city = res.name; } } }); //数字格式化 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; }