ucharts，数据交互

<template>
	<view>
		<view class="ucharts-tit">kw.h</view>
		<view class="qiun-charts">
			<canvas canvas-id="ExtremunColumn" id="ExtremunColumn" class="charts" disable-scroll=true @touchstart="touchColumn"
				@touchmove="moveColumn" @touchend="touchEndColumn"></canvas>
		</view>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts/u-charts.js';
	var _self;
	var canvaColumn = null;

	export default {
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				serverData: '',
				back_id: this.backid,
				day_date: this.dayresult,
				day: [],
				name: '',
				event_hour: [], //小时
				dayuser: [],
			}
		},
		props: ['backid', 'dayresult'],

		watch: {
			backid(val) {
				this.event_hour = [];
				this.dayuser = [];
				this.getServerData()
			},
			dayresult(val) {
				this.event_hour = [];
				this.dayuser = [];
				this.getServerData()
			},
		},

		beforeMount() {
			_self = this;
			this.cWidth = uni.upx2px(680);
			this.cHeight = uni.upx2px(420);
			this.getServerData();
		},
		methods: {
			getServerData() {
				this.$http.get('/power/day', {
					back_id: this.backid,
					day: this.daydate
				}).then(res => {
					if (res.data.result === 1) {
						let server = res.data.data;
						server.list.forEach(item => {
							name: item.back_name;
							this.dayuser.push(
								item.used
							);
							this.event_hour.push(
								item.event_hour,
							);
						});

						let Column = {
							categories: [], //横轴
							series: [{
								name: '用电量',
								data: this.dayuser,
								color: '#047efd'
							}]
						};
						Column.categories = this.event_hour; //横坐标值
						// Column.series = ; //竖坐标值（每天电量）
						_self.showColumn("ExtremunColumn", Column);
					} else {
						uni.showToast({
							icon: 'none',
							title:'图表暂无数据'
						})
					}
				})
			},
			showColumn(canvasId, chartData) {
				canvaColumn = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'column',
					legend: {
						show: true
					},
					fontSize: 11,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					animation: true,
					categories: chartData.categories,
					series: chartData.series,
					enableScroll: true, //开启图表拖拽功能
					xAxis: {
						disableGrid: true,
						fontSize: 11,
						gridType: 'dash',
						itemCount: 7, //x轴单屏显示数据的数量，默认为5个
						scrollShow: true, //新增是否显示滚动条，默认false
						scrollAlign: 'left', //滚动条初始位置
						scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF
						scrollColor: '#DEE7F7', //默认为 #A6A6A6
					},
					yAxis: {
						max: 300,
						splitNumber: 5,
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 5,
						splitNumber: 6,
						format: (val) => {
							return val.toFixed(0)
						}
						// splitNumber: 2, //横轴区间
					},
					dataLabel: false,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						column: {
							type: 'group',
							width: _self.cWidth * _self.pixelRatio * 0.45 / chartData.categories.length
						}
					}
				});

			},
			//拖拽
			touchColumn(e) {
				canvaColumn.scrollStart(e);
			},
			moveColumn(e) {
				canvaColumn.scroll(e);
			},
			touchEndColumn(e) {
				canvaColumn.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvaColumn.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
		}
	}
</script>

<style>
	.qiun-charts {
		width: 680upx;
		height: 420upx;
		background-color: #FFFFFF;
	}

	.charts {
		width: 680upx;
		height: 420upx;
		background-color: #FFFFFF;
	}
</style>