shenzeeUniApp/components/Charts/MyChartsColumn.vue

<template>
	<view class="qiun-columns">
		<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
			<view class="qiun-title-dot-light">{{chartTitle}}</view>
			<view style="text-align: center;position: relative;">
				<image @click="pre()" style="position: absolute;left: 40upx; width: 40upx;height: 40upx;" src="/static/img/leftTriangle.png"></image>
				<span v-if="this.chartType==='day'">{{startDate}}</span>
				<span v-if="this.chartType!=='day'">{{startDate}} 至 {{endDate}}</span>
				<image @click="next()" style="position: absolute;right: 40upx; width: 40upx;height: 40upx;" src="/static/img/rightTriangle.png"></image>
			</view>
		</view>
		<view class="qiun-charts" style="background-color: #E5FDC3;">
			<canvas :canvas-id="canvasId" :id="canvasId" class="charts" disable-scroll=true @touchstart="touchLineA" @touchmove="moveLineA"
			 @touchend="touchEndLineA" style="background-color: #E5FDC3;"></canvas>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from 'vuex';
	import {
		dateUtils
	} from '@/common/util.js';
	import uCharts from '@/components/u-charts/u-charts.js';
	var _self;
	var canvaColumn = null;
	export default {
		name: 'MyChartsColumn',
		props: {
			canvasId: String,
			chartTitle: String,
			chartType: String,
			equipmentId: '',
			adminId: '',
		},
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				serverData: '',
				canvaColumn: Object,
				startDate: String,
				endDate: String,
			}
		},
		computed: {
			...mapState(['loginUser']),
		},
		mounted() {
			_self = this;
			this.$data.type = this.chartType;
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
			this.init();
		},
		methods: {
			...mapActions('chart', ['getStatistics','getMainStatistics']),
			init() {
				this.initDateRang(new Date());
				this.getStatisticsData();
			},
			initDateRang(day) {
				const daystr = dateUtils.formateDate(day, 'yyyy/MM/dd');
				let startDate = daystr;
				let endDate = daystr;
				if (this.chartType === 'week') {
					startDate = dateUtils.formateDate(dateUtils.getFirstDayOfWeek(day), 'yyyy/MM/dd');
					endDate = dateUtils.formateDate(dateUtils.getLastDayOfWeek(day), 'yyyy/MM/dd');
				}
				if (this.chartType === 'month') {
					startDate = dateUtils.formateDate(dateUtils.getCurrentMonFirstDate(day), 'yyyy/MM/dd');
					endDate = dateUtils.formateDate(dateUtils.getCurrentMonLastDate(day), 'yyyy/MM/dd');
				}
				if (this.chartType === 'year') {
					startDate = dateUtils.formateDate(dateUtils.getCurrentYearFirstDate(day), 'yyyy/MM/dd');
					endDate = dateUtils.formateDate(dateUtils.getCurrentYearLastDate(day), 'yyyy/MM/dd');
				}
				this.$data.startDate = startDate;
				this.$data.endDate = endDate;
			},
			/**上一个 */
			pre() {
				const day = new Date(this.$data.startDate);
				if (this.chartType === 'day') { // 日
					day.setDate(day.getDate() - 1);
				}
				if(this.chartType === 'week'){ // 周
					day.setDate(day.getDate() - 7);
				}
				if (this.chartType === 'month') { // 月
					day.setMonth(day.getMonth() - 1);
				}
				if (this.chartType === 'year') { // 年
					day.setFullYear(day.getFullYear() - 1);
				}
				this.initDateRang(day);
				this.getStatisticsData();
			},
			/**下一个 */
			next() {
				const day = new Date(this.$data.startDate);
				if (this.chartType === 'day') { // 日
					day.setDate(day.getDate() + 1);
				}
				if(this.chartType === 'week'){ // 周
					day.setDate(day.getDate() + 7);
				}
				if (this.chartType === 'month') { // 月
					day.setMonth(day.getMonth() + 1);
				}
				if (this.chartType === 'year') { // 年
					day.setFullYear(day.getFullYear() + 1);
				}
				this.initDateRang(day);
				this.getStatisticsData();
			},
			getStatisticsData() {
				const param = {
					'startDate': this.$data.startDate,
					'endDate': this.$data.endDate,
					'chartType': this.chartType
				};
				// console.log('chartType:' + param.chartType)
				if(this.adminId){ // 子组件，则拿传过来的参
					param['adminId'] = this.adminId;
				}else if ('admin' !== this.loginUser['username']) { //否则为主页，拿登录用户
					param['adminId'] = this.loginUser['id'];
				}
				if (this.equipmentId) {
					param['equipmentId'] = this.equipmentId;
				}
				setTimeout(() => {
					this.getStatistics(param)
						.then(data => [uni.stopPullDownRefresh(), this.showColumn(this.canvasId, data)]
						, _ => void [uni.stopPullDownRefresh(),this.showColumn(this.canvasId, {categories:[],series:[]})]);
				}, 0);
			},
			showColumn(canvasId, chartData) {
				this.canvaColumn = new uCharts({
					$this: _self,
					canvasId: canvasId,
					enableScroll: true,
					type: 'column',
					legend: true,
					fontSize: 11,
					background: '#E5FDC3',
					pixelRatio: _self.pixelRatio,
					animation: true,
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						type: 'grid',
						gridType: 'dash',
						itemCount: 5, //x轴单屏显示数据的数量，默认为5个
						scrollShow: true, //新增是否显示滚动条，默认false
						scrollAlign: 'left', //滚动条初始位置
						scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF
						scrollColor: '#DEE7F7', //默认为 #A6A6A6
						// disableGrid:true,
					},
					yAxis: {
						//disabled:true
					},
					dataLabel: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						column: {
							// width: _self.cWidth*_self.pixelRatio*0.45/chartData.categories.length
							width: 30
						}
					}
				});
			},
			touchColumn(e) {
				this.canvaColumn.showToolTip(e, {
					format: function(item, category) {
						if (typeof item.data === 'object') {
							return category + ' ' + item.name + ':' + item.data.value
						} else {
							return category + ' ' + item.name + ':' + item.data
						}
					}
				});
			},
			touchLineA(e) {
				this.canvaColumn.scrollStart(e);
			},
			moveLineA(e) {
				this.canvaColumn.scroll(e);
			},
			touchEndLineA(e) {
				this.canvaColumn.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				this.canvaColumn.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},

		}
	}
</script>

<style>
	page {
		background: #F2F2F2;
		width: 750upx;
		overflow-x: hidden;
	}

	.qiun-padding {
		padding: 2%;
		width: 96%;
	}

	.qiun-wrap {
		display: flex;
		flex-wrap: wrap;
	}

	.qiun-rows {
		display: flex;
		flex-direction: row !important;
	}

	.qiun-columns {
		display: flex;
		flex-direction: column !important;
	}

	.qiun-common-mt {
		margin-top: 10upx;
	}

	.qiun-bg-white {
		background: #FFFFFF;
	}

	.qiun-title-bar {
		width: 96%;
		padding: 10upx 2%;
		flex-wrap: nowrap;
	}

	.qiun-title-dot-light {
		border-left: 10upx solid #0ea391;
		padding-left: 10upx;
		font-size: 32upx;
		color: #000000
	}

	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

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