bigScreenShow/page/bigData/component/high-incidence-disease.js

(function() {
//<img src="../images/icon.png" class="icon-img">
	Vue.component('high-incidence-disease', {
		template: '<div style="height: 100%;">\
						<h4 class="c-b5e1fc c-f16 c-t-center div-common-title">本月高发疾病排行</h4>\
						<div data-toggle="buttons" class="btn-group">\
							<label class="btn btn-default" :class="{active: index1 == 0}" @click="btnClick1(0)">\
								<input type="radio">全部\
							</label>\
							<label class="btn btn-default" :class="{active: index1 == 1}" @click="btnClick1(1)">\
								<input type="radio">住院\
							</label>\
							<label class="btn btn-default" :class="{active: index1 == 2}" @click="btnClick1(2)">\
								<input type="radio">门诊\
							</label>\
						</div>\
						<div data-toggle="buttons" class="btn-group fr mr20" style="margin-left: 0;">\
							<label class="btn btn-default" :class="{active: index2 == 0}" @click="btnClick2(0)">\
								<input type="radio">本月\
							</label>\
							<label class="btn btn-default" :class="{active: index2 == 1}" @click="btnClick2(1)">\
								<input type="radio">本季\
							</label>\
							<label class="btn btn-default" :class="{active: index2 == 2}" @click="btnClick2(2)">\
								<input type="radio">本年\
							</label>\
						</div>\
						<div id="div-gaofa-disease-chart" class="ml30"></div>\
					</div>',
		props: ["data"],
		data: function() {
			return {
				index1:0,
				index2:0,
				gaoBingFaData:null
			}
		},
		mounted: function() {
			var vm = this;
			setTimeout(function(){
				vm.gaoBingFaData = vm.data["本月高并发疾病"].全部.本月;
				vm.initData();
			},50)
		},
		watch:{
			data:function(data){
				this.data = data;
				this.refreshData();
			}
		},
		methods: {
			btnClick1:function(idx){
				this.index1 = idx;
				this.refreshData();
			},
			btnClick2:function(idx){
				this.index2 = idx;
				this.refreshData();
			},
			refreshData:function(){
				if(this.index1==0){//全部
					if(this.index2==0){//本月
						this.gaoBingFaData = this.data["本月高并发疾病"].全部.本月;
					}else if(this.index2==1){//本季
						this.gaoBingFaData = this.data["本月高并发疾病"].全部.本季;
					}else if(this.index2==2){//本年
						this.gaoBingFaData = this.data["本月高并发疾病"].全部.本年;
					}
				}else if(this.index1==1){//住院
					if(this.index2==0){//本月
						this.gaoBingFaData = this.data["本月高并发疾病"].住院[0].本月;
					}else if(this.index2==1){//本季
						this.gaoBingFaData = this.data["本月高并发疾病"].住院[1].本季;
					}else if(this.index2==2){//本年
						this.gaoBingFaData = this.data["本月高并发疾病"].住院[2].本年;
					}
				}else if(this.index1==2){//门诊
					if(this.index2==0){//本月
						this.gaoBingFaData = this.data["本月高并发疾病"].门诊[0].本月;
					}else if(this.index2==1){//本季
						this.gaoBingFaData = this.data["本月高并发疾病"].门诊[1].本季;
					}else if(this.index2==2){//本年
						this.gaoBingFaData = this.data["本月高并发疾病"].门诊[2].本年;
					}
				}
				this.initData();
			},
			initData:function(){//高发疾病
				var zhuYuanData = [],zhuYuanTitle = "";
				var xAxisData = this.gaoBingFaData.xAxis[0].data;
				var menZhenData = this.gaoBingFaData.series[0].data;
				var menZhenTitle = this.gaoBingFaData.series[0].name;
				if(this.index1==0){//全部,显示门诊/住院数据叠加
					 zhuYuanData = this.gaoBingFaData.series[1].data;
					 zhuYuanTitle = this.gaoBingFaData.series[1].name;
					this.geoFaMainFun(xAxisData,menZhenData,zhuYuanData,menZhenTitle,zhuYuanTitle)
				}
				else if(this.index1==1 || this.index1==2){//住院或门诊时,显示单个柱状图
					this.geoFaMainFun(xAxisData,menZhenData,zhuYuanData,menZhenTitle,zhuYuanTitle)
				}
			},
			geoFaMainFun:function(xAxisData,menZhenData,zhuYuanData,menZhenTitle,zhuYuanTitle){
				var gaoFaChart = echarts.init(document.getElementById('div-gaofa-disease-chart'));
				var gaofaOption = {
					"tooltip": {
						"trigger": "axis"
					},
					grid: {top: 40, bottom: 30, left: 80},
					"yAxis": [{
						"type": "category",
						"name": "人次",
						"data": xAxisData,
						axisPointer: {
							type: 'shadow'
						},
						axisTick: {
							show: false
						},
						axisLine: {
							lineStyle: {
								color: '#095f8e'
							}
						},
						axisLabel: {
							color: '#b5e1fc'
						},
						nameTextStyle:{color: '#b5e1fc'}
					}],
					"xAxis": [{
						"type": "value",
						axisPointer: {
							type: 'shadow'
						},
						axisTick: {
							show: false
						},
						axisLine: {
							lineStyle: {
								color: '#095f8e'
							}
						},
						axisLabel: {
							color: '#fff'
						},
						splitLine: {
							show: false // 不显示坐标轴刻度
						}
					}],
					"series": [{
							"smooth": true,
							"name": menZhenTitle,
							"type": "bar",
							stack: '高发疾病',
							barWidth: 20,
							"label": {
								show: true,
								position: "right",
								color: '#00e6f3'
							},
							"itemStyle": {
								"normal": {
									"lineStyle": {
										"shadowColor": "rgba(0,0,0,0.4)"
									},
									color: '#00e6f3',
									barBorderRadius: [0, 8, 8, 0],
								}
							},
							"data": menZhenData
						},
					]
				}
				if(zhuYuanData.length>0){
					gaofaOption.series[0].label.show = false;
					gaofaOption.series[0].itemStyle.normal.color = "#6576e0";
					delete gaofaOption.series[0].itemStyle.normal.barBorderRadius;
					gaofaOption.series[1] = {
							"smooth": true,
							"name": zhuYuanTitle,
							"type": "bar",
							stack: '高发疾病',
							"label": {
								show: true,
								position: "right",
								formatter:function(param){
									var dataIndex = param.dataIndex,menZhenVal;
									 _.map(menZhenData,function(item,idx){
									 	if(idx==dataIndex){
									 		menZhenVal = item
									 	}
									})
	                                return menZhenVal+"+"+param.value;
	                           },
							},
							"itemStyle": {
								"normal": {
									"lineStyle": {
										"shadowColor": "rgba(0,0,0,0.4)"
									},
									barBorderRadius: [0, 8, 8, 0],
									color: '#00e6f3'
								}
							},
							"data": zhuYuanData
						}
				}else{
					gaofaOption.series = gaofaOption.series[0];
				}
				if(gaoFaChart){
					gaoFaChart.clear();
				}
				gaoFaChart.setOption(gaofaOption);
			}
		},
		
	})

})()