<style lang='scss' scoped>
	.canvas{
		width: 100%;
	}
</style>
<template>
	<view class="chart" :style="{height: height+'rpx',width:width+'rpx'}">
		<canvas :canvas-id="canvasId" :style="{height: height+'rpx',width:width+'rpx'}" class="canvas" 
		@touchstart="touchLineA" ></canvas>		
	</view>
</template>
<script>
	let _self;
	import uCharts from '@/components/u-charts/u-charts.js';
	export default {
		data() {
			return {
				canvaRing:null,
				cWidth:'',
				cHeight:'',
				arcbarWidth:'',//圆弧进度图，进度条宽度,此设置可使各端宽度一致
				pixelRatio:1,
				isShow:false,
			}
		},
		props:{
			canvasId:{
				type:String,
				default:"canvasColumn"
			},
			width:{
				type:[String,Number],
				default:750
			},
			height:{
				type:[String,Number],
				default:550
			},
			chartData:{
				type:[Object],
				default:null
			},
			subtitleFontSize:{
				type:[String,Number],
				default:15
			},
			offsetY:{
				type:[String,Number],
				default:0
			},
		},
		watch:{
			chartData(newVal){
				console.log(newVal,"newVal");
				if(this.isShow){
					this.showArcbar(this.canvasId,newVal);
				}
			}
		},
		created() {
			_self = this;
			this.cWidth=uni.upx2px(this.width);
			this.cHeight=uni.upx2px(this.height);
			this.arcbarWidth=uni.upx2px(20);
		},
		mounted() {
			this.isShow = true;
			if(!!this.chartData){
				console.log("ok?");
				this.showArcbar(this.canvasId,this.chartData);
			}
		},
		methods: {
			toJSON(){},
			// 展示图标的函数 接收参数，一个块的id,一个数据
			showArcbar(canvasId, chartData) {
				this.canvaArcbar = new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'arcbar',
					fontSize:11,
					legend:false,
					title: {
						name: Math.round(chartData.series[0].data*100)+'%',
						color: chartData.series[0].color,
						fontSize: 25*_self.pixelRatio,
						offsetY: parseInt(_self.offsetY) 
					},
					subtitle: {
						name: chartData.series[0].name,
						color: '#666666',
						fontSize: _self.subtitleFontSize*_self.pixelRatio
					},
					extra: {
						arcbar:{
							type:'circle',//整圆类型进度条图
							width: _self.arcbarWidth*_self.pixelRatio,//圆弧的宽度
							startAngle:1.5//整圆类型只需配置起始角度即可
						}
					},
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					series: chartData.series,
					animation: true,
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					dataLabel: true,
				});
			},
			// 点击图表显示的内容
			touchLineA(e) {
				// 使用声明的变量canvaLineA
				this.canvaArcbar.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			}
		}
	}
</script>
