<template>
	<view class="">
		<view class="qiun-charts" >
			<view class="progress">
				<canvas canvas-id="canvasPie1" id="canvasPie1" class="charts"   @touchstart="touchPie1"></canvas>
			</view>
			<view class="progress">
				<canvas canvas-id="canvasPie2" id="canvasPie2"  class="charts"   @touchstart="touchPie2"></canvas>
			</view>
		</view>
	</view>
</template>

<script>
	import uCharts from '@/assets/js/u-charts/u-charts/u-charts.js';
	var _self;
	var canvaPie1=null;
	var canvaPie2=null;
   
	export default {
		data() {
			return {
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				serverData:'',
			}
		},
		props: {
			pieData:{
				type:Object,
				default:null
			}
		},
		created() {
			_self = this;
			this.cWidth=uni.upx2px(400);
			this.cHeight=uni.upx2px(400);
			this.init()
		},
		methods: {
			init(){
				let chartData1= {
				  "series": [{
					"name": "内部人员",
					"data":  this.pieData.insideTotal,
					color: '#5064eb'
				  }, {
					"name": "外部人员",
					"data": this.pieData.outsideTotal,
					color: '#d10000'
				  }]
				}
				let chartData2= {
				  "series": [{
					"name": "车辆进出",
					"data": this.pieData.carTotal,
					color: '#5064eb'
				  }, {
					"name": "人员进出",
					"data": this.pieData.peopleNum,
					color: '#d10000'
				  }]
				}
				_self.showPie1("canvasPie1",chartData1);
				_self.showPie2("canvasPie2",chartData2);
			},
			showPie1(canvasId,chartData){
				canvaPie1=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'pie',
					fontSize:11,
					legend:{show:true},
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					series: chartData.series,
					animation: true,
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					dataLabel: true,
					extra: {
						pie: {
						  lableWidth:15
						}
					},
				});
			},
			showPie2(canvasId,chartData){
				canvaPie2=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'pie',
					fontSize:11,
					legend:{show:true},
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					series: chartData.series,
					animation: true,
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					dataLabel: true,
					extra: {
						pie: {
						  lableWidth:15
						}
					},
				});
			},
			touchPie1(e){
				canvaPie1.showToolTip(e, {
					format: function (item) {
						return item.name + ':' + item.data 
					}
				});
			},
			touchPie2(e){
				canvaPie2.showToolTip(e, {
					format: function (item) {
						return item.name + ':' + item.data 
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.qiun-charts {
		width: 100%!important;
		background-color: #FFFFFF;
		position: relative;
		display: flex;
		justify-content: space-around;
		padding-bottom: 30rpx;
	}
	.progress{
		width: 50%;
		height: 100%;
	}
	.charts {
		width: 400upx;
		height: 400upx;
		background-color: #FFFFFF;
		margin: 0rpx auto;
	}
</style>
