app-big-data/page/bigData/component/high-incidence-disease.js

(function() {
//<img src="../images/icon.png" class="icon-img">
//<label class="btn btn-default" :class="{active: index2 == 1}" @click="btnClick2(1)">
//									<input type="radio">本季
//								</label>
	Vue.component('high-incidence-disease', {
		template: '<div style="height: 100%;">\
						<h4 class="c-b5e1fc c-f16 c-t-center div-common-title">本月高发疾病排行</h4>\
						<img src="../images/icon.png" class="icon-img" @click="detailClick">\
						<div v-show="!hasData" class="no-result-panel">\
                            <div class="no-result-img" style="padding-top:1.09375rem;">\
                                <img src="../images/noData.png">\
                            </div>\
                            <div class="no-result-text">暂无数据！</div>\
                        </div>\
						<div data-toggle="buttons" class="btn-group" v-show="hasData">\
							<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;" v-show="hasData">\
							<label class="btn btn-default" :class="{active: index2 == 0}" @click="btnClick2(0)">\
								<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" v-show="hasData"></div>\
					</div>',
		props: ["data"],
		data: function() {
			return {
				index1:0,
				index2:0,
				gaoBingFaData:null,
				isInit:true,
				fontSize: 0.007 * window.screen.width,
				linkageFilter:"",
				hasData:true,
				monthData:null,
				yearMonth:null,
			}
		},
		mounted: function() {
			
		},
		watch:{
			data:function(data){
				if(data){
					this.monthData = data[0];
					this.yearData = data[1];
					this.initData();
				}
			}
		},
		methods: {
			detailClick:function(){
				var width = (0.7604 * window.screen.width) + 'px';
				var height = (0.41875 * window.screen.width) + 'px';
				top.layer.open({
					id: 'LAY_layuipro', //设定一个id，防止重复弹出
				    type: 2,
				    title: false,
				    closeBtn: 0,
				    shade: 0.5,
				    shadeClose: true,
				    area:  [width, height],
				    content: httpRequest.alertUrl+'/page/bigData/html/alert6.html'
				});
			},
			btnClick1:function(idx){
				this.index1 = idx;
				this.initData();
			},
			btnClick2:function(idx){
				this.index2 = idx;
				this.initData();
			},
			initData:function(){//高发疾病
				if(this.index2==0){//本月
					this.gaoBingFaData = this.monthData.successFlg?this.monthData.obj.viewInfos&&JSON.parse(this.monthData.obj.viewInfos[0].options[0].option):{};
				}else if(this.index2==2){//本年
					this.gaoBingFaData = this.yearData.successFlg?this.yearData.obj.viewInfos&&JSON.parse(this.yearData.obj.viewInfos[0].options[0].option):{};
				}
				if(this.gaoBingFaData.xAxis[0].data){
					this.hasData = true;
				}else{
					this.hasData = false;
					return false;
				}
				var menZhenData = [],menZhenTitle = "";
				var xAxisData = (this.gaoBingFaData.xAxis[0].data)||[];
				var zhuYuanData = (this.gaoBingFaData.series[1].data)||[];
				var zhuYuanTitle = this.gaoBingFaData.series[1].name||"";
				if(this.index1==0){//全部（显示门诊/住院数据叠加)
					 menZhenData = (this.gaoBingFaData.series[0].data);
					 menZhenTitle = this.gaoBingFaData.series[0].name;
				}else if(this.index1==2){//门诊(显示单个柱状图)
					 zhuYuanData = (this.gaoBingFaData.series[0].data);
					 zhuYuanTitle = this.gaoBingFaData.series[0].name;
					 menZhenData = [];
					 menZhenTitle = "";
				}
				//数据排序(降序排列)
				if(this.index1==0){
					var formatData = _.map(zhuYuanData,function(item,idx){
						var total = parseInt(item)+parseInt(menZhenData[idx]);
						return {total:total,zhuyuanval:parseInt(item),menzhenval:parseInt(menZhenData[idx]),xAxis:xAxisData[idx]}
					 })
					 formatData = _.sortBy(formatData,"total").reverse();
					 xAxisData = [],zhuYuanData=[],menZhenData=[];
					_.map(formatData,function(item,idx){
						xAxisData.push(item.xAxis);
						zhuYuanData.push(item.zhuyuanval);
						menZhenData.push(item.menzhenval);
					})
				}else if(this.index1==1 || this.index1==2){
					var formatData = _.map(zhuYuanData,function(item,idx){
						return {total:parseInt(item),zhuyuanval:parseInt(item),xAxis:xAxisData[idx]}
					 })
					 formatData = _.sortBy(formatData,"total").reverse();
					 xAxisData = [],zhuYuanData=[];
					_.map(formatData,function(item,idx){
						xAxisData.push(item.xAxis);
						zhuYuanData.push(item.zhuyuanval);
					}) 
				}
				this.geoFaMainFun(xAxisData,menZhenData,zhuYuanData,menZhenTitle,zhuYuanTitle)
			},
			geoFaMainFun:function(xAxisData,menZhenData,zhuYuanData,menZhenTitle,zhuYuanTitle){
				var vm = this;
				var gaoFaChart = echarts.init(document.getElementById('div-gaofa-disease-chart'));
				var gaofaOption = {
					"tooltip": {
						"trigger": "axis"
					},
					grid: {top: 40, bottom: 30, left: 140,right:80},
					"yAxis": [{
						"type": "category",
						"name": "人次",
						"data": xAxisData.reverse(),
						axisPointer: {
							type: 'shadow'
						},
						axisTick: {
							show: false
						},
						axisLine: {
							lineStyle: {
								color: '#095f8e'
							}
						},
						axisLabel: {
							color: '#b5e1fc',
							fontSize:vm.fontSize,
							interval: 0,
						    formatter: function(value) {
							    if (value.length > 8) {
							      return value.substring(0, 8) + "...";
							    } else {
							      return value;
							    }
							 }
						},
						nameTextStyle:{color: '#b5e1fc'},
					}],
					"xAxis": [{
						"type": "value",
						axisPointer: {
							type: 'shadow'
						},
						axisTick: {
							show: false
						},
						axisLine: {
							lineStyle: {
								color: '#095f8e'
							}
						},
						axisLabel: {
							color: '#fff',
							fontSize:vm.fontSize,
							interval:0
						},
						splitLine: {
							show: false // 不显示坐标轴刻度
						}
					}],
					"series": [{
							"smooth": true,
							"name": zhuYuanTitle,
							"type": "bar",
							stack: '高发疾病',
							barWidth: 20,
							"label": {
								show: true,
								position: "right",
								color: '#b5e1fc'
							},
							"itemStyle": {
								"normal": {
									"lineStyle": {
										"shadowColor": "rgba(0,0,0,0.4)"
									},
									color: '#00e6f3',
									barBorderRadius: [0, 8, 8, 0],
								}
							},
							"data": zhuYuanData.reverse()
						},
					]
				}
				if(menZhenData.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": menZhenTitle,
							"type": "bar",
							stack: '高发疾病',
							"label": {
								show: true,
								position: "right",
								color: '#b5e1fc',
								formatter:function(param){
									var dataIndex = param.dataIndex,zhuYuanVal;
									 _.map(zhuYuanData,function(item,idx){
									 	if(idx==dataIndex){
									 		zhuYuanVal = item
									 	}
									})
	                                return zhuYuanVal+"+"+param.value;
	                           },
							},
							"itemStyle": {
								"normal": {
									"lineStyle": {
										"shadowColor": "rgba(0,0,0,0.4)"
									},
									barBorderRadius: [0, 8, 8, 0],
									color: '#00e6f3'
								},
							},
							"data": menZhenData.reverse()
						}
				}else{
					gaofaOption.series = gaofaOption.series[0];
				}
				if(gaoFaChart){
					gaoFaChart.clear();
				}
				gaoFaChart.setOption(gaofaOption);
			}
		},
		
	})

})()