<style lang='scss' scoped>
	.canvas-leakage{
		width: 100%;
	}
</style>
<template>
	<view class="chart" :style="{height: height+'rpx',width:width+'rpx'}">
		<canvas :canvas-id="canvasId" :style="{height: height+'rpx'}" class="canvas-leakage" disable-scroll="true" 
		@touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
	</view>
</template>
<script>
	let _self;
	import uCharts from '@/components/u-charts/u-charts.js';
	export default {
		data() {
			return {
				canvaLineA:null,
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
			}
		},
		props:{
			extraLineType:{
				type:String,
				default:"straight"
			},
			yAxisTitle:{
				type:String,
				default:""
			},
			canvasId:{
				type:String,
				default:"canvasLine"
			},
			width:{
				type:[String,Number],
				default:750
			},
			height:{
				type:[String,Number],
				default:550
			},
			// 数据
			chartData:{
				type:[Object],
				default:null
			}
		},
		watch:{
			chartData(newVal){
				this.showAreaFn(this.canvasId,newVal);
			}
		},
		created() {
			_self = this;			
			this.cWidth=uni.upx2px(this.width);
			this.cHeight=uni.upx2px(this.height);
		},
		mounted() {
			if(!!this.chartData){
				this.showAreaFn(this.canvasId,this.chartData);
			}
		},
		methods: {
			toJSON(){},
			showAreaFn(canvasId,chartData){
				this.canvaLineA=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'area',
					fontSize:11,
					padding:[15,15,0,15],
					legend:{
						show:true,
						padding:5,
						lineHeight:11,
						margin:5,
					},
					dataLabel:true,
					dataPointShape:true,
					dataPointShapeType:'hollow',
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					enableScroll: true,//开启图表拖拽功能
					xAxis: {
						disableGrid:false,
						type:'grid',
						gridType:'dash',
						itemCount:4,
						scrollShow:true,
						scrollAlign:'left'
					},
					yAxis: {
						// showTitle:!!_self.yAxisTitle?true:false,
						// title:!!_self.yAxisTitle?_self.yAxisTitle:"",
						// //disabled:true
						gridType:'dash',
						splitNumber:8,
						min:10,
						max:180,
						format:(val)=>{return val.toFixed(1)}//如不写此方法，Y轴刻度默认保留两位小数
					},
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						// line:{
						// 	type: _self.extraLineType
						// },
						area:{
							type: 'curve',
							opacity:0.2,
							addLine:true,
							width:2,
							gradient:false
						}
					},
				});
				
			},
			touchLineA(e){
				this.canvaLineA.scrollStart(e);
			},
			moveLineA(e) {
				this.canvaLineA.scroll(e);
			},
			touchEndLineA(e) {
				this.canvaLineA.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				this.canvaLineA.touchLegend(e);
				this.canvaLineA.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},
		}
	}
</script>
