fj-dc-ui/.svn/pristine/c3/c396dc37c0f079dd60148dc080e3037cf7d2b826.svn-base

<!-- 督查对象完成情况饼图
	 通过props接收外部传值来更新饼图
-->
<template>
	<div style="width:100%;height:100%;">
		<div class="simple_header">
			<div class="simple_header_icon"></div>
			<div class="simple_header_text">督查对象</div>
		</div>
		<div class="right_FinishRate_content" >
			<div style="width:100%;height:100%;"  ref="finishratechart"  id="finishratechart"></div>
		</div>
	</div>
</template>

<script>
	//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
	//例如：import 《组件名称》 from '《组件路径》';
	import echarts from 'echarts'
	// import theme from '../../store/theme'
	export default {
		//import引入的组件需要注入到对象中才能使用
		components: {},
		props:['finishNumber','unfinishNumber'],
		data() {
			//这里存放数据
			return {
				viewHeight:window.innerHeight,
				viewWidth:window.innerWidth,
				itemWidthChart:25,
				itemHeightChart:14,
				topChart:'',
				pcOrPadFontSize:12,
				themeColor:'#333',
				finishNumberNew: null,
				unfinishNumberNew: null
			};
		},
		//监听属性 类似于data概念
		computed: {
			msg(){
				// return theme.state.testMsg;
				return this.$store.state.theme.testMsg;
			},
		},
		//监控data中的数据变化
		watch: {
			finishNumberNew:function(){
				if( (typeof this.finishNumberNew) == 'number'){
					this.initChart();
				}else{
					this.finishNumberNew = 85;
				}	
			},
			unfinishNumberNew:function(){
				if( (typeof this.unfinishNumberNew) == 'number'){
					this.initChart();
				}else{
					this.unfinishNumberNew = 15;
				}		
			},
			msg(n,o){
				if( n == 'dark'){
					this.themeColor = 'rgba(177, 210, 254, 1)';
					this.initChart();
				}else{
					this.themeColor = '#333';
					this.initChart();
				}
			}
		},
		//方法集合
		methods: {
			updateFinishRateDataAndChart:function(){
				// 制作方法调用以更新数据与图表。使用方法调用可以显式控制更新数据的先后顺序。
			},
			initChart:function(){
				let _self = this;
				let chart = echarts.init(this.$refs['finishratechart']);
				let option = {
						backgroundColor:'rgba(0,0,0,0)',
						color:['#5CE9C7','#FEB23A'],
						title: {
							text: '',
							left: 'center',
							top: 20,
							textStyle: {
								color: '#ccc'
							}
						},
						 legend: {
							textStyle:{
								fontSize:this.pcOrPadFontSize,
								color:this.themeColor
							},
							itemWidth: this.itemWidthChart,  // 设置宽度
							itemHeight: this.itemHeightChart, // 设置高度
							top:this.topChart,
							x : 'center',
							y : 'bottom',
							data:['已督查','未督查','完成率'],
							icon:'circle',
							formatter: function (name) {
								if(name=='已督查'){
									return '' + name+':'+_self.finishNumberNew;
								}else if(name=='未督查'){
									return '' + name+':'+_self.unfinishNumberNew;
								}else{
									return '' + name+':balabala%';
								}
								
							}
						},
						tooltip : {
							trigger: 'item',
							formatter: "{a} <br/>{b} : {c} ({d}%)"
						},
						series : [
							{
								name:'督查对象',
								type:'pie',
								radius : '60%',
								center: ['50%', '40%'],
								data:[
									{
										value:_self.finishNumberNew, name:'已督查',
									 	// itemStyle: {
										// 	normal: {
										// 		shadowBlur: 20,
										// 		shadowColor: '#5CE9C7'
										// 	}
										// }
									},
									{
										value:_self.unfinishNumberNew, name:'未督查',
									 	// itemStyle: {
										// normal: {
										// 	shadowBlur: 20,
										// 	shadowColor: '#0195F2'
										// 	}
										// }
									},
									
								],
								

								label: {
									normal: {
										show:false,
										textStyle: {
											color: 'rgba(255, 255, 255, 0.3)'
										}
									}
								},
								labelLine: {
									normal: {
										lineStyle: {
											color: 'rgba(255, 255, 255, 0.3)'
										},
										smooth: 0.2,
										length: 10,
										length2: 20
									}
								},
								
									animationType:'expansion'
								
							
							}
						],
						animationDuration: '400',
								animationDurationUpdate:'400',
								animationEasing: 'cubicOut',
								animationEasingUpdate: 'cubicOut',
					};
					chart.setOption(option,true);
			}
		},

		//生命周期 - 创建完成（可以访问当前this实例）
		created() {},
		//生命周期 - 挂载完成（可以访问DOM元素）
		mounted(){
			this.finishNumberNew = this.finishNumber
			this.unfinishNumberNew = this.unfinishNumber
			if(this.viewWidth >= 1920){
				this.itemWidthChart = 25;
				this.itemHeightChart = 14;
				this.topChart = '85%';
			}else if(this.viewWidth <= 1024){
				this.itemWidthChart = 5;
				this.itemHeightChart = 5;
				this.topChart = '85%';
				this.pcOrPadFontSize = 8;
			}else if(this.viewWidth <= 1360){
				this.itemWidthChart = 5;
				this.itemHeightChart = 5;
				this.topChart = '75%';
				this.pcOrPadFontSize = 10;
			}else{
				this.itemWidthChart = 10;
				this.itemHeightChart = 10;
				this.topChart = '75%';
			}
			if(!this.finishNumberNew){
				this.finishNumberNew = 85;
			}
			if(!this.unfinishNumberNew){
				this.unfinishNumberNew = 15;	
			}
			this.initChart();
		},
		beforeCreate() {}, //生命周期 - 创建之前
		beforeMount() {}, //生命周期 - 挂载之前
		beforeUpdate() {}, //生命周期 - 更新之前
		updated() {}, //生命周期 - 更新之后
		beforeDestroy() {}, //生命周期 - 销毁之前
		destroyed() {}, //生命周期 - 销毁完成
		activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
	};
</script>
<style lang="scss" scoped>
@media screen and (min-width: 960px) {
  @import "@scss/homeForPad";
}
// @media screen and (min-width: 1024px) {
//   @import "@scss/home1024";
// }
@media  screen and (min-width: 1024px) and (max-width:1920px){
	@import "@scss/home";
}
@media screen and (min-width: 1920px) {
  @import "@scss/home1920";
}
</style>