<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" :disable-scroll="true" 
		@touchstart="touchColumn" @touchmove="moveColumn" @touchend="touchEndColumn"></canvas>		
	</view>
</template>
<script>
	let _self;
	import uCharts from '@/components/u-charts/u-charts.js';
	export default {
		data() {
			return {
				canvaColumn:null,
				cWidth:'',
				cHeight:'',
				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
			}
		},
		watch:{
			// chartData(newVal){
			// 	console.log(newVal,"newVal");
			// 	if(this.isShow){
			// 		this.showColumn(this.canvasId,newVal);
			// 	}
			// }
		},
		created() {
			_self = this;
			this.cWidth=uni.upx2px(this.width);
			this.cHeight=uni.upx2px(this.height);
		},
		mounted() {
			// this.isShow = true;
			if(!!this.chartData){
				this.showColumn(this.canvasId,this.chartData);
			}
		},
		methods: {
			toJSON(){},
			showColumn(canvasId,chartData){
				console.log(canvasId,"canvasIdcanvasIdcanvasId");
				console.log(chartData,"chartData");
				
				this.canvaColumn=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'column',
					padding:[15,15,0,15],
					legend:{
						show:true,
						padding:5,
						lineHeight:11,
						margin:0,
					},
					fontSize:11,
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					animation: false,
					rotate:true,
					// #ifdef MP-ALIPAY
					rotateLock:true,//百度及支付宝需要锁定旋转
					// #endif
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						disableGrid:true,
					},
					yAxis: {
						//disabled:true
					},
					dataLabel: true,
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						column: {
							type:'group',
							width: _self.cWidth*_self.pixelRatio*0.45/chartData.categories.length,
							meter:{
								//这个是外层边框的宽度
								border:4,
								//这个是内部填充颜色
								fillColor:'#E5FDC3'
							}
						}
					  }
				});
			},
			touchColumn(e){
				this.canvaColumn.scrollStart(e);
			},
			moveColumn(e) {
				this.canvaColumn.scroll(e);
			},
			touchEndColumn(e) {
				this.canvaColumn.scrollEnd(e);
				this.canvaColumn.touchLegend(e, {
					animation:true,
				});
				this.canvaColumn.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},
		}
	}
</script>
