bigScreenShow/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 v-show="!hasData" class="no-result-panel">\
                            <div class="no-result-img">\
                                <img src="../images/noData.png">\
                            </div>\
                            <div class="no-result-text">暂无数据！</div>\
                        </div>\
						<div id="div-zhongidan-echart" class="ml30" v-show="hasData"></div>\
					</div>',
		props: ["data"],
		data: function() {
			return {
				keyServiceData:null,
				activeIndex:0,
				fontSize: 0,
				hasData:true,
				monthData:null,
				jiData:null,
				yearData:null,
			}
		},
		mounted: function() {
			var width = window.screen.width>=1920?window.screen.width:1920;
			this.fontSize = 0.007 * width;
		},
		watch:{
			data:function(newData){
				this.data = newData;
				if(this.data && JSON.parse(this.data[0].obj.viewInfos[0].options[0].option).series[0].data){
					this.monthData = this.data[0].successFlg?this.data[0].obj.viewInfos&&JSON.parse(this.data[0].obj.viewInfos[0].options[0].option):{};
					this.jiData = this.data[1].successFlg?this.data[1].obj.viewInfos&&JSON.parse(this.data[1].obj.viewInfos[0].options[0].option):{};
					this.yearData = this.data[2].successFlg?this.data[2].obj.viewInfos&&JSON.parse(this.data[2].obj.viewInfos[0].options[0].option):{};
					this.initData();
					this.hasData = true;
				}else{
					this.hasData = false;
				}
			}
		},
		methods: {
			initData:function(){//重点人群
				this.activeIndex = 0;
				this.changeData();
				this.chartMainFun();
			},
			changeData:function(){
				if(this.activeIndex==0){//月
					this.keyServiceData = this.monthData;
				}else if(this.activeIndex==1){//季度
					this.keyServiceData = this.jiData;
				}else if(this.activeIndex==2){//年
					this.keyServiceData = this.yearData;
				}
			},
			btnClick:function(type){
				this.activeIndex = type;
				this.changeData();
				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;
				huanbiData = _.map(huanbiData,function(item,idx){
					item = item=="--"?0:item;
					return item;
				})
				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'
				           },
				        }
				    ]
				};
				if(zhongdianChart){
					zhongdianChart.clear();
				}
				zhongdianChart.setOption(zhongdianOption);
			},
		
		
		
		}
		
	})

})()