<template>
	<view class="box">
		<view class="content" style="margin-left:300px;">
			<view class="qiun-charts">
				<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" @click="touchColumn" @touchstart="touchColumn"></canvas>
			</view>
		</view>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	const lineCharts = {},
		optionAs = {};
	export default {
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				textarea: ''
			}
		},
		mounted() {
			//#ifdef MP-ALIPAY
			uni.getSystemInfo({
				success: function(res) {
					if (res.pixelRatio > 1) {
						//正常这里给2就行，如果pixelRatio=3性能会降低一点
						//this.pixelRatio =res.pixelRatio;
						this.pixelRatio = 2;
					}
				}
			});
			//#endif
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
			this.getServerData();
		},
		methods: {
			getServerData() {
				let Column = {
					categories: [],
					series: []
				};
				//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
				Column.categories = ["2013", "2014", "2015", "2016", "2017", "2018"];
				Column.series = [{
					"name": "新成交量3",
					"data": [35, 36, 31, 33, 13, 34]
				}];
				this.showColumn("canvasColumn", Column);
			},
			showColumn(canvasId, chartData) {
				optionAs[this.id] = {
					$this: this,
					canvasId: canvasId,
					type: 'column',
					padding: [15, 5, 0, 15],
					legend: {
						show: true,
						padding: 5,
						lineHeight: 11,
						margin: 0,
					},
					fontSize: 11,
					background: '#FFFFFF',
					pixelRatio: this.pixelRatio,
					animation: true,
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						disableGrid: true,
					},
					yAxis: {
						data: [{
							position: 'right',
							axisLine: false,
							format: (val) => {
								return val.toFixed(0) + '元'
							},
						}]
					},
					dataLabel: false,
					width: this.cWidth * this.pixelRatio,
					height: this.cHeight * this.pixelRatio,
					extra: {
						column: {
							type: 'group',
							width: this.cWidth * this.pixelRatio * 0.45 / chartData.categories.length
						}
					}
				}
				lineCharts[this.id] = new uCharts(optionAs[this.id]);

			},
			touchColumn(e) {
				lineCharts[this.id].showToolTip(e, {
					format: function(item, category) {
						console.log(item, 'item')
						if (typeof item.data === 'object') {
							return category + ' ' + item.name + ':' + item.data.value
						} else {
							return category + ' ' + item.name + ':' + item.data
						}
					}
				});
				lineCharts[this.id].touchLegend(e, {
					animation: true
				});
			},
		}
	}
</script>

<style>
	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.box {
		width: 750upx;
		height: 500upx;
	}

	.content {
		/* display: flex;
		justify-content: center;
		align-items: flex-start; */
		margin-top: 17.57upx;
	}

	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background: linear-gradient(180deg, rgba(0, 34, 67, 1) 0%, 52%, rgba(0, 34, 67, 1) 100%);
	}

	.charts {
		width: 750upx;
		height: 500upx;
		background: linear-gradient(180deg, rgba(0, 34, 67, 1) 0%, 52%, rgba(0, 34, 67, 1) 100%);
	}
</style>