app-big-data/page/bigData/component/key-service-population.js

(function() {

	Vue.component('key-service-population', {
		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 fr mr40 mt0" style="position: absolute;right: 0.208rem;top: 0.05rem;z-index: 99999;">\
							<label class="btn btn-default" :class="{active: activeIndex == 0}" @click="btnClick(0)">\
								<input type="radio">月\
							</label>\
							<label class="btn btn-default" :class="{active: activeIndex == 1}" @click="btnClick(1)">\
								<input type="radio">季\
							</label>\
							<label class="btn btn-default" :class="{active: activeIndex == 2}" @click="btnClick(2)">\
								<input type="radio">年\
							</label>\
						</div>\
						<div id="div-zhongidan-echart" class="ml30"></div>\
					</div>',
		props: ["data"],
		data: function() {
			return {
				keyServiceData:null,
				activeIndex:0,
				fontSize: 0.007 * window.screen.width,
			}
		},
		mounted: function() {
			var vm = this;
			setTimeout(function(){
				vm.initData();
			},50)
		},
		watch:{
			data:function(data){
				this.data = data;
				this.initData();
			}
		},
		methods: {
			initData:function(){//重点人群
				this.activeIndex = 0;
				this.keyServiceData = this.data["重点服务人群增加趋势"].本月;
				this.chartMainFun();
			},
			btnClick:function(type){
				this.activeIndex = type;
				if(type==0){//本月
					this.keyServiceData = this.data["重点服务人群增加趋势"].本月;
				}
				if(type==1){//本季
					this.keyServiceData = this.data["重点服务人群增加趋势"].本季;
				}
				if(type==2){//本年
					this.keyServiceData = this.data["重点服务人群增加趋势"].本年;
				}
				this.chartMainFun();
			},
			chartMainFun:function(){
				var vm = this;
				var xAxisData = this.keyServiceData.xAxis[0].data;
				var pjcrsData = this.keyServiceData.series[0].data;
				var huanbiData = this.keyServiceData.series[1].data;
				var zhongdianChart = echarts.init(document.getElementById('div-zhongidan-echart'));
				var zhongdianOption =  {
				    tooltip: {
				         trigger: 'axis',
					     axisPointer: {
					         type : 'shadow'
					    },
				         formatter: '{b} <br /> {a0}: {c0}<br />{a1}: {c1}' + "%"
				    },
					grid: {top: 50, bottom: 30, left: 30,right:80},
				    legend: {
				        data:['平均床日数','环比'],
						textStyle: {
							color: '#b5e1fc'
						}
				    },
				    xAxis: [
				        {
				            type: 'category',
				            data: xAxisData,
				            axisPointer: {
				                type: 'shadow'
				            },
				            axisTick: {
				                show: false
				            },
							axisLine: {
								lineStyle: {
									color: '#095f8e'
								}
							},
							axisLabel: {
								color: '#b5e1fc',
								fontSize:vm.fontSize
							}
				        }
				    ],
				    yAxis: [
				        {
				            type: 'value',
				            name: '平均床日数',
							nameTextStyle: {
								color: '#b5e1fc' // 坐标轴名称颜色
							},
							splitLine: {
								show: false
							},
							axisLine: {
								lineStyle: {
									color: '#095f8e'
								}
							},
							axisLabel: {
								color: '#b5e1fc',
								fontSize:vm.fontSize
							}
				        },
				        {
				            type: 'value',
				            name: '环比',
							nameTextStyle: {
								color: '#b5e1fc' // 坐标轴名称颜色
							},
							splitLine: {
								show: false  // 不显示坐标轴刻度
							},
							axisLine: {
								lineStyle: {
									color: '#095f8e'  // 坐标轴轴线颜色
								}
							},
							axisLabel: {
								color: '#b5e1fc' ,// 坐标轴刻度标签文本颜色
								fontSize:vm.fontSize
							},
							show: true
				        }
				    ],
				    series: [
				        {
				            name:'平均床日数',
				            type:'bar',
				            data:pjcrsData,
				            barWidth: 20,
							label: {
				                normal: {
				                    show: true,
				                    position: 'top', // 在柱状图上方显示
									color: '#fff',// 柱状图上方显示的数值颜色
				                }
				            },
				            itemStyle: {
				                barBorderRadius: [8,8,0,0],
				                color: '#00e6f3'
				            }
				        },
				        {
				            name:'环比',
				            type:'line',
				            yAxisIndex: 1,
				            data:huanbiData,
							itemStyle: {
				                color: '#03fa6d'
				           },
				        }
				    ]
				};
				
				zhongdianChart.setOption(zhongdianOption);
			},
		
		
		
		}
		
	})

})()