<template>
	<view class="content">
		<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" @touchstart="touchColumn"></canvas>  
	</view>
</template>

<script>
	var _self;
	var canvaColumn=null;
	export default {
		
		data() {
			return {
				pixelRatio:1,
				serverData:'',
				type:'',
				Column:{},
				max:"",
				min:"",
				Company:''
						
				
			}
		},
		mounted() {
			
			
		},
		methods: {
			show(type,Column,max,min,Company){
				
				this.type=type,
				this.Column=Column,
				this.max=max,
				this.min=min,
				this.Company=Company
				console.log(this.Company)
				this.$nextTick(()=>{
					this.cWidth = uni.upx2px(600);
					this.cHeight = uni.upx2px(400)
					this.showColumn('canvasColumn', this.Column)	
				})
			},
			showColumn(canvasId,chartData){
				canvaColumn=new this.$uCharts({
					
					title:"1111",
					$this:this,
					canvasId: canvasId,
					type:this.type,
					legend:{show:true},
					fontSize:11,
					background:'#FFFFFF',
					pixelRatio:this.pixelRatio,
					animation: true,
					categories: chartData.categories,
					series: chartData.series,
					
					xAxis: {
						disableGrid:true,
					},
					yAxis: {
						
						splitNumber:5,
						min:this.min,
						max:this.max,
						
					},
					
					dataLabel: true,
					width: this.cWidth*this.pixelRatio,
					height: this.cHeight*this.pixelRatio,
					extra: {
						column: {
							type:'group',
							width: this.cWidth*this.pixelRatio*0.45/chartData.categories.length
						}
					  }
				});
				
			},
			touchColumn(e){
				canvaColumn.showToolTip(e, {
					format: function (item, category) {
						
						if(typeof item.data === 'object'){
							console.log(item)
							return category + ' ' + item.name + ':' + item.data.value 
						}else{
							console.log(item)
							return category + ' ' + item.name + ':' + item.data 
						}
					}
				});
			},		
		}
	}
</script>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40rpx;
		
	}
	
	.charts {
		width: 650upx;
		height: 380upx;
		background-color: #FFFFFF;
		border-radius: 50upx;
		z-index:0;
		position:relative
	}
</style>

