new Vue({ el: '#main', data: { alertData1:'',//总人数 alertData2:'',//新增人数 alertData3:'',//门诊人次 alertData4:'',//住院人次 alertChart1:'',//左边第一块表格 alertChart2:'',//右上第一块 alertChart3:'',//右上第二块 alertChart4:'',//右上第三块 alertChart5:'',//右下 bigData:'',//总数据 alertType:0, alertTime:0, type:'', title:'', }, mounted: function() { var vm = this; this.type = this.GetQueryString("type"); if(this.type == 0){ this.title = '高血压人群分布'; vm.bigData = bigData; }else if(this.type == 1){ this.title = '糖尿病人群分布'; vm.bigData = bigData2; } this.initData(); }, methods: { initData:function(){ var vm = this; vm.alertData1 = vm.bigData['总人数']; vm.alertData2 = vm.bigData['新增人数']; vm.alertData3 = vm.bigData['门诊人次']; vm.alertData4 = vm.bigData['住院人次']; this.setAlertChart1(0); this.setAlertChart2(0); this.setAlertChart3(0); this.setAlertChart4(0); this.setAlertChart5(0,0); console.log(vm.bigData) }, setAlertChart1:function(type){ var t = ''; switch(type){ case 0:t = '全部';break; case 1:t = '门诊';break; case 2:t = '住院';break; } var options = this.bigData[t]['区县分布']; options.series[0].label = {show: true,position: "right",color: '#b5e1fc'} this.alertChart1 = options }, setAlertChart2:function(type){ var t = ''; switch(type){ case 0:t = '全部';break; case 1:t = '门诊';break; case 2:t = '住院';break; } var options = this.bigData[t]['年龄段分布']; options.color = ["#6576e0","#03fa6c","#ff616f","#0fa5f2","#00e6f3"]; options.legend.formatter = function(name) { var index = 0; var clientlabels = options.legend.data; var clientcounts = _.map(options.series[0].data,function(item,idx){ return item.value; }); clientlabels.forEach(function(value,i){ if(value == name){ index = i; } }); return name + " " + clientcounts[index]; } options.legend.left = '48%'; options.legend.top = 0.044 * window.screen.width;//85; options.legend.itemWidth = 0.005 * window.screen.width;//10; options.legend.itemHeight = 0.005 * window.screen.width;//10; options.legend.itemGap = 0.0078 * window.screen.width;//15; options.series[0].center = ['25%','55%']; this.alertChart2 = options }, setAlertChart3:function(type){ var t = ''; switch(type){ case 0:t = '全部';break; case 1:t = '门诊';break; case 2:t = '住院';break; } var options = this.bigData[t]['性别分布']; options.color = ["#00E7F3","#ff616f"]; options.legend.formatter = function(name) { var index = 0; var clientlabels = options.legend.data; var clientcounts = _.map(options.series[0].data,function(item,idx){ return item.value; }); clientlabels.forEach(function(value,i){ if(value == name){ index = i; } }); return name + " " + clientcounts[index]; } options.legend.left = '48%'; options.legend.top = 0.0625 * window.screen.width;//120 options.legend.itemWidth = 0.005 * window.screen.width;//10; options.legend.itemHeight = 0.005 * window.screen.width;//10; options.legend.itemGap = 0.0078 * window.screen.width;//15; options.series[0].center = ['25%','55%']; this.alertChart3 = options }, setAlertChart4:function(type){ var t = ''; switch(type){ case 0:t = '全部';break; case 1:t = '门诊';break; case 2:t = '住院';break; } var options = this.bigData[t]["并发症"]; options.series[0].label = {show: true,position: "right",color: '#b5e1fc'}; options.series[0].itemStyle.normal.color = '#FFF71A'; this.alertChart4 = options }, setAlertChart5:function(type,time){ var t = '',m=''; switch(type){ case 0:t = '全部';break; case 1:t = '门诊';break; case 2:t = '住院';break; } switch(time){ case 0:m = '日';break; case 1:m = '月';break; case 2:m = '季';break; case 3:m = '年';break; } var options = this.bigData[t]['新增患者趋势'][m]; options.tooltip = { trigger: 'axis', axisPointer: { type : 'shadow' }, formatter: '{b}
{a0}: {c0}
{a1}: {c1}' + "%" } options.series[0].itemStyle.color = '#FF606E'; this.alertChart5 = options }, alertTitle:function(type){ this.alertTime = 0; this.setAlertChart1(type); this.setAlertChart2(type); this.setAlertChart3(type); this.setAlertChart4(type); this.setAlertChart5(type,0); this.alertType = type; }, alertChart:function(time){ var type = this.alertType; this.alertTime = time; this.setAlertChart5(type,time); }, closeAlertClick:function(){ parent.layer.closeAll(); }, GetQueryString :function (name){ var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if(r!=null)return unescape(r[2]); return null; } } }); //数字格式化 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; }