<template>
	<view class="padding-top-50" style="z-index: 99;">
		<view class="qiun-charts">
			<canvas canvas-id="canvasGauge" id="canvasGauge" class="charts"></canvas>
		</view>
	</view>
</template>

<script>
	import uCharts from '@/assets/js/u-charts/u-charts/u-charts.js';
	var _self;
	var canvaGauge=null;
   
	export default {
		data() {
			return {
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				gaugeWidth:15
			}
		},
		props: {
			gaugeData:{
				type:Object,
				default:null
			},
		},
		created() {
			_self = this;
			this.cWidth=uni.upx2px(450);
			this.cHeight=uni.upx2px(400);
			_self.showGauge("canvasGauge",this.gaugeData);
		},
		methods: {
			showGauge(canvasId,chartData){
				canvaGauge = new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'gauge',
					fontSize:11,
					legend:false,
					title: {
						name: Math.round(chartData.series[0].data*100)+'%',
						color: chartData.categories[1].color,
						fontSize: 25*_self.pixelRatio,
						offsetY:50*_self.pixelRatio,//新增参数，自定义调整Y轴文案距离
					},
					subtitle: {
						name: chartData.series[0].name,
						color: '#666666',
						fontSize: 15*_self.pixelRatio,
						offsetY:-50*_self.pixelRatio,//新增参数，自定义调整Y轴文案距离
					},
					extra: {
						gauge:{
							type:'progress',
							width: _self.gaugeWidth*_self.pixelRatio,//仪表盘背景的宽度
							startAngle:0.75,
							endAngle:0.25,
							startNumber:0,
							endNumber:100,
							splitLine:{
								fixRadius:0,
								splitNumber:10,
								width: _self.gaugeWidth*_self.pixelRatio,//仪表盘背景的宽度
								color:'#FFFFFF',
								childNumber:5,
								childWidth:_self.gaugeWidth*0.4*_self.pixelRatio,//仪表盘背景的宽度
							},
							pointer:{
								width: _self.gaugeWidth*0.8*_self.pixelRatio,//指针宽度
								color:'auto'
							}
						}
					},
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					dataLabel: true,
				});
			}
		}
	}
</script>

<style>
	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts {
		margin: 0 auto;
		width: 450upx;
		height: 400upx;
		background-color: #FFFFFF;
	}
	
	.charts {
		width: 450upx;
		height: 400upx;
		background-color: #FFFFFF;
	}
</style>
