app-big-data/page/bigData/js/alert.js

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} <br /> {a0}: {c0}<br />{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;
}