shunfengche-sfd/echarts/jgOrder/statistics.vue

<template>
	<view class="order-statistics">
		<view class="select-date">
			<u-input
				style="flex: 1;"
				v-model="timeRange"
				type="select"
				:selectOpen="show"
				border
				placeholder="选择时间范围"
				@click="show = true"
				height="76rpx"
			/>
			<view style="margin-left: 16rpx;"><u-icon name="download" size="48"></u-icon></view>
			<u-calendar
				v-model="show"
				mode="range"
				@change="bindDateChange"
				startText="开始日期"
				endText="结束日期"
				active-bg-color="#00C18A"
				active-color="#FFFFFF"
				range-bg-color="#00C18A"
				rangeColor="#FFFFFF"
				zIndex="9999999"
			>
			</u-calendar>
		</view>
		<!-- 四个框框(统计数据) -->
		<view class="overview-data-box">
			<view class="data-item" v-for="(item, index) in overviewData" :key="index">
				<data-item :dataItem="item" :globalImages="globalImages"/>
			</view>
		</view>
		
		<u-card v-show="!show" padding="32" full :showHead="false">
			<view slot="body" style="width: 100%;height: 400rpx;position: relative;">
				<BtnGroup v-model="orderSelect" :defaultVal="2" :options="orderOptions"></BtnGroup>
				<EcChart v-if="optionReady" :chartOption="option" width="100%" height="100%" />
				<!-- <uni-ec-canvas class="uni-ec-canvas" id="order-revenue" canvas-id="order-revenue-chart" :ec="ec1" ref="canvas1"></uni-ec-canvas> -->
			</view>
		</u-card>
		<view></view>
		<u-card v-show="!show" padding="32" full :showHead="false">
			<view slot="body" style="width: 100%;height: 400rpx;position: relative;">
				<BtnGroup v-model="compareSelect" :defaultVal="2" :options="compareOptions"></BtnGroup>
				<EcChart v-if="optionReady2" :chartOption="option2" width="100%" height="100%" />
				<!-- <uni-ec-canvas class="uni-ec-canvas" id="data-compare" canvas-id="data-compare-chart" :ec="ec2" ref="canvas2"></uni-ec-canvas> -->
			</view>
		</u-card>
	</view>
</template>

<script>
	import DataItem from './DataItem.vue'
	import BtnGroup from './BtnGroup.vue'
	// import uniEcCanvas from '@/echarts/uni-ec-canvas/uni-ec-canvas'
	// import * as echarts from '@/echarts/uni-ec-canvas/echarts.min.js'
	import EcChart from '@/echarts/EcChart.vue'
	import { waitForGlobalImages } from '@/utils/globalImageLoader'
	
	export default {
		components: { DataItem, BtnGroup, EcChart },
		data() {
			return {
				globalImages: null,
				// 表示选中的日期，格式为"YYYY-MM-DD"
				timeRange: null,
				show: false,
				overviewData: [
					{ title: '订单总量', value: '1248', status: 'up', fluctuate: '12.5%', bg: '#E8FBF6', valueColor: '#00C18A' },
					{ title: '总收入', value: '￥8642', status: 'up', fluctuate: '8.3%', bg: '#FCF6EC', valueColor: '#E6A23C' },
					{ title: '完成率', value: '98.7%', status: 'up', fluctuate: '1.2%', bg: '#ECF5FF', valueColor: '#409EFF' },
					{ title: '平均评分', value: '4.9', status: 'down', fluctuate: '0.1', bg: '#FFE9E9', valueColor: '#F56C6C' },
				],
				// ec1: {
				// 	option: {},
				// },
				// ec2: {
				// 	option: {},
				// },
				optionReady: false,
				option: {},
				optionReady2: false,
				option2: {},
				
				a: '',
				orderSelect: 2,
				orderOptions: [
					{ label: '日', value: 1 },
					{ label: '周', value: 2 },
					{ label: '月', value: 3 },
				],
				compareSelect: null,
				compareOptions: [
					{ label: '环比', value: 1 },
					{ label: '同比', value: 2 },
				],
			}
		},
		onLoad(e) {
			waitForGlobalImages().then((path) => {
				this.globalImages = path
			})
			// setTimeout(() => {
			// 	this.$nextTick(() => {
			// 		this.$refs.canvas1.init(this.initChart1)
			// 		this.$refs.canvas2.init(this.initChart2)
			// 	})
			// }, 20)
			this.$Request.getT('/app/orderStatistics/getTrend?choose=week').then(res => {
				if (res.code == 0) {
					const days = res.data.map(item => item.day)
					const moneys = res.data.map(item => item.money)
					const totals = res.data.map(item => item.total)
					// this.$refs.canvas1.init(this.initChart1)
					this.setOption(days, moneys, totals)
				}
			})
			this.$Request.getT('/app/orderStatistics/getYoYandQoQ?choose=t').then(res => {
				if (res.code == 0) {
					const days = res.data.map(item => item.day)
					const lastTotals = res.data.map(item => item.lastTotal)
					const totals = res.data.map(item => item.total)
					this.setOption2(days, lastTotals, totals)
				}
			})
			this.getStatistics()
		},
		watch: {
			orderSelect(newVal) {
				if(newVal) {
					// this.$refs.canvas1.init(this.initChart1)
					this.optionReady = false
					this.getTrend()
				}
			},
			compareSelect(newVal) {
				if(newVal) {
					// this.$refs.canvas2.init(this.initChart2)
					this.optionReady2 = false
					this.getYoYandQoQ()
				}
			},
		},
		methods: {
			// 订单总量 总收入 完成率 平均分接口
			getStatistics(start, end) {
				let data = {
					startTime: start ? start : '',
					endTime: end ? end : ''
				}
				this.$Request.getT('/app/orderStatistics/getStatistics', data).then(res => {
					if (res.code == 0) {
						this.overviewData.forEach((item, index) => {
							if(item.title === '订单总量') {
								item.value = res.data.total
								item.fluctuate = res.data.totalChange
								item.status = res.data.totalChangeSymbol == 0 ? 'up' : 'down'
							} else if(item.title === '总收入') {
								item.value = res.data.money
								item.fluctuate = res.data.moneyChange
								item.status = res.data.moneyChangeSymbol == 0 ? 'up' : 'down'
							} else if(item.tite === '完成率') {
								item.value = res.data.completionRate
								item.fluctuate = res.data.completionRateChange
								item.status = res.data.completionRateChangeSymbol == 0 ? 'up' : 'down'
							} else {
								item.value = res.data.avg
								item.fluctuate = res.data.avgChange
								item.status = res.data.avgChangeSymbol == 0 ? 'up' : 'down'
							}
						})
					}
				})
			},
			// 订单与收入趋势接口
			getTrend() {
				let choo = 'week'
				if (this.orderSelect == 1) {
					choo = 'day'
				} else if (this.orderSelect == 2) {
					choo = 'week'
				} else {
					choo = 'month'
				}
				this.$Request.getT('/app/orderStatistics/getTrend?choose=' + choo).then(res => {
					if (res.code == 0) {
						const days = res.data.map(item => item.day)
						const moneys = res.data.map(item => item.money)
						const totals = res.data.map(item => item.total)
						// this.$refs.canvas1.init(this.initChart1)
						this.optionReady = false
						this.option={}
						this.setOption(days, moneys, totals)
					}
				})
			},
			// 同比环比接口
			getYoYandQoQ() {
				let choo = 't'
				if (this.compareSelect == 1) {
					choo = 'h'
				} else {
					choo = 't'
				}
				this.$Request.getT('/app/orderStatistics/getYoYandQoQ?choose=' + choo).then(res => {
					if (res.code == 0) {
						const days = res.data.map(item => item.day)
						const lastTotals = res.data.map(item => item.lastTotal)
						const totals = res.data.map(item => item.total)
						// this.$refs.canvas1.init(this.initChart1)
						this.optionReady2 = false
						this.option2={}
						this.setOption2(days, lastTotals, totals)
					}
				})
			},
			// { startYear, startMonth, startDay, startDate, startWeek, endYear, endMonth, endDay, endDate, endWeek }
			bindDateChange(event) {
				this.timeRange = event.startDate + ' - ' + event.endDate
				this.getStatistics(event.startDate, event.endDate)
			},
			setOption(days, moneys, totals) {
				console.log(days, moneys, totals, 'days, moneys, totals');
				this.option = {
					title: {
					    text: '订单与收入趋势',
					    left: 0,
					    top: 0,
					    textStyle: {
							fontSize: 14
					    },
					},
					grid: {
						top: '36%',
						left: '10%',
						right: '5%',
						bottom: '20%',
						containLabel: true,
					},
					legend: {
						bottom: 0,
						itemGap: 20,
						data: ['订单量', '收入'],
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
						  type: 'line'
						},
						backgroundColor: 'rgba(0, 193, 138, 0.01)',
						borderColor: '#00c18a',
						textStyle: {
						  color: '#333',
						},
					},
					xAxis: {
						type: 'category',
						data: days,
						boundaryGap: ['20%', '20%'],
						axisTick: {
							show: false,
						},
						splitLine: {
						    show: false,
						},
						axisLine: {
						    lineStyle: {
						        color: '#E4E7ED',
						    },
						},
						axisLabel: {
						    color: '#333333',
						}
					},
					yAxis: [
						{
							type: 'value',
							name: '订单量',
							min: 0,
							nameGap: 24,
							nameLocation: 'end',
							nameTextStyle: {
								align: 'right',
								padding: [0, 10, 0, 0],
								color: '#333333',
							},
							boundaryGap: ['10%', '10%'],
							axisTick: {
								show: false,
							},
							axisLine: {
								show: false,
							},
							splitLine: {
							    lineStyle: {
									color: '#E4E7ED',
							    },
							},
							axisLabel: {
							    color: '#333333',
							},
							splitNumber: 3,
						},
						{
							type: 'value',
							name: '收入',
							min: 0,
							nameGap: 24,
							nameLocation: 'end',
							nameTextStyle: {
								align: 'left',
								padding: [0, 0, 0, 20],
								color: '#333333',
							},
							axisLabel: {
								formatter: '￥ {value}',
								color: '#333333',
							},
							boundaryGap: ['10%', '10%'],
							axisTick: {
								show: false,
							},
							axisLine: {
								show: false,
							},
							splitLine: {
							    lineStyle: {
									color: '#E4E7ED',
							    },
							},
							splitNumber: 3,
						},
					],
					series: [
						{
							name: '订单量',
							data: totals,
							type: 'bar',
							yAxisIndex: 0,
							itemStyle: {
								color: '#E8FBF6',
								borderRadius: [5, 5, 0, 0]
							},
							barWidth: 10,
						},
						{
							name: '收入',
							data: moneys,
							type: 'line',
							yAxisIndex: 1,
							itemStyle: {
								color: '#00C18A',
							},
							// symbolSize: 8,
						}
					]
				}
				this.optionReady = true // 让组件渲染
			},
			setOption2(days, lastTotals, totals) {
				this.option2 = {
					title: {
					    text: '数据对比',
					    left: 0,
					    top: 0,
					    textStyle: {
							fontSize: 14
					    },
					},
					grid: {
						top: '36%',
						left: '5%',
						right: '0%',
						bottom: '20%',
						containLabel: true,
					},
					legend: {
						bottom: 0,
						itemGap: 20,
						data: [this.compareSelect == 1 ? '本周' : '本年', this.compareSelect == 1 ? '上周' : '去年',],
						icon: 'roundRect',
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
						  type: 'line'
						},
						backgroundColor: 'rgba(0, 193, 138, 0.1)',
						borderColor: '#00c18a',
						textStyle: {
						  color: '#333',
						},
					},
					xAxis: {
						type: 'category',
						data: days,
						boundaryGap: [50, 50],
						axisTick: {
							show: false,
						},
						splitLine: {
						    show: false,
						}
					},
					yAxis: {
						type: 'value',
						name: '订单量',
						nameGap: 30,
						nameLocation: 'end',
						nameTextStyle: {
							align: 'right',
							padding: [0, 10, 0, 0]
						},
						boundaryGap: ['10%', '10%'],
						splitNumber: 4,
						axisTick: {
							show: false,
						},
						axisLine: {
							show: false,
						},
						splitLine: {
						    lineStyle: {
								color: '#E4E7ED',
						    },
						},
					},
					series: [
						{
							name: this.compareSelect == 1 ? '本周' : '本年',
							data: totals,
							type: 'bar',
							itemStyle: {
								color: '#F56C6C',
								borderRadius: [5, 5, 0, 0]
							},
							barWidth: 10,
						},
						{
							name: this.compareSelect == 1 ? '上周' : '去年',
							data: lastTotals,
							type: 'bar',
							itemStyle: {
								color: '#00C18A',
								borderRadius: [5, 5, 0, 0]
							},
							barWidth: 10,
						}
					]
				}
				this.optionReady2 = true // 让组件渲染
			},
			// initChart1(canvas, width, height, canvasDpr) {
			// 	let chart = echarts.init(canvas, null, {
			// 		width: width,
			// 		height: height,
			// 		devicePixelRatio: canvasDpr
			// 	})
				
			// 	canvas.setChart(chart)
			// 	let option = {
			// 		title: {
			// 		    text: '订单与收入趋势',
			// 		    left: 0,
			// 		    top: 0,
			// 		    textStyle: {
			// 				fontSize: 14
			// 		    },
			// 		},
			// 		grid: {
			// 			top: '36%',
			// 			left: '5%',
			// 			right: '0%',
			// 			bottom: '20%',
			// 			containLabel: true,
			// 		},
			// 		legend: {
			// 			bottom: 0,
			// 			itemGap: 20,
			// 			data: ['订单量', '收入'],
			// 		},
			// 		xAxis: {
			// 			type: 'category',
			// 			data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
			// 			boundaryGap: ['20%', '20%'],
			// 			axisTick: {
			// 				show: false,
			// 			},
			// 			splitLine: {
			// 			    show: false,
			// 			},
			// 			axisLine: {
			// 			    lineStyle: {
			// 			        color: '#E4E7ED',
			// 			    },
			// 			},
			// 			axisLabel: {
			// 			    color: '#333333',
			// 			}
			// 		},
			// 		yAxis: [
			// 			{
			// 				type: 'value',
			// 				name: '订单量',
			// 				nameGap: 24,
			// 				nameLocation: 'end',
			// 				nameTextStyle: {
			// 					align: 'right',
			// 					padding: [0, 10, 0, 0],
			// 					color: '#333333',
			// 				},
			// 				boundaryGap: ['10%', '10%'],
			// 				axisTick: {
			// 					show: false,
			// 				},
			// 				axisLine: {
			// 					show: false,
			// 				},
			// 				splitLine: {
			// 				    lineStyle: {
			// 						color: '#E4E7ED',
			// 				    },
			// 				},
			// 				axisLabel: {
			// 				    color: '#333333',
			// 				},
			// 				splitNumber: 3,
			// 			},
			// 			{
			// 				type: 'value',
			// 				name: '收入',
			// 				nameGap: 24,
			// 				nameLocation: 'end',
			// 				nameTextStyle: {
			// 					align: 'left',
			// 					padding: [0, 0, 0, 20],
			// 					color: '#333333',
			// 				},
			// 				axisLabel: {
			// 					formatter: '￥ {value}',
			// 					color: '#333333',
			// 				},
			// 				boundaryGap: ['10%', '10%'],
			// 				axisTick: {
			// 					show: false,
			// 				},
			// 				axisLine: {
			// 					show: false,
			// 				},
			// 				splitLine: {
			// 				    lineStyle: {
			// 						color: '#E4E7ED',
			// 				    },
			// 				},
			// 				splitNumber: 3,
			// 			},
			// 		],
			// 		series: [
			// 			{
			// 				name: '订单量',
			// 				data: [120, 200, 150, 80, 70, 110, 130],
			// 				type: 'bar',
			// 				yAxisIndex: 0,
			// 				itemStyle: {
			// 					color: '#E8FBF6',
			// 					borderRadius: [5, 5, 0, 0]
			// 				},
			// 				barWidth: 10,
			// 			},
			// 			{
			// 				name: '收入',
			// 				data: [120, 200, 150, 80, 70, 110, 130],
			// 				type: 'line',
			// 				yAxisIndex: 1,
			// 				itemStyle: {
			// 					color: '#00C18A',
			// 				},
			// 				// symbolSize: 8,
			// 			}
			// 		]
			// 	}
			// 	chart.setOption(option)
			// 	return chart
			// },
			// initChart2(canvas, width, height, canvasDpr) {
			// 	let chart = echarts.init(canvas, null, {
			// 		width: width,
			// 		height: height,
			// 		devicePixelRatio: canvasDpr
			// 	})
				
			// 	canvas.setChart(chart)
			// 	let option = {
			// 		title: {
			// 		    text: '数据对比',
			// 		    left: 0,
			// 		    top: 0,
			// 		    textStyle: {
			// 				fontSize: 14
			// 		    },
			// 		},
			// 		grid: {
			// 			top: '36%',
			// 			left: '5%',
			// 			right: '0%',
			// 			bottom: '20%',
			// 			containLabel: true,
			// 		},
			// 		legend: {
			// 			bottom: 0,
			// 			itemGap: 20,
			// 			data: ['本周', '上周'],
			// 			icon: 'roundRect',
			// 		},
			// 		xAxis: {
			// 			type: 'category',
			// 			data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
			// 			boundaryGap: [50, 50],
			// 			axisTick: {
			// 				show: false,
			// 			},
			// 			splitLine: {
			// 			    show: false,
			// 			}
			// 		},
			// 		yAxis: {
			// 			type: 'value',
			// 			name: '订单量',
			// 			nameGap: 30,
			// 			nameLocation: 'end',
			// 			nameTextStyle: {
			// 				align: 'right',
			// 				padding: [0, 10, 0, 0]
			// 			},
			// 			boundaryGap: ['10%', '10%'],
			// 			splitNumber: 4,
			// 			axisTick: {
			// 				show: false,
			// 			},
			// 			axisLine: {
			// 				show: false,
			// 			},
			// 			splitLine: {
			// 			    lineStyle: {
			// 					color: '#E4E7ED',
			// 			    },
			// 			},
			// 		},
			// 		series: [
			// 			{
			// 				name: '本周',
			// 				data: [120, 200, 150, 80, 70, 110, 130],
			// 				type: 'bar',
			// 				itemStyle: {
			// 					color: '#F56C6C',
			// 					borderRadius: [5, 5, 0, 0]
			// 				},
			// 				barWidth: 10,
			// 			},
			// 			{
			// 				name: '上周',
			// 				data: [110, 190, 130, 60, 50, 90, 110],
			// 				type: 'bar',
			// 				itemStyle: {
			// 					color: '#00C18A',
			// 					borderRadius: [5, 5, 0, 0]
			// 				},
			// 				barWidth: 10,
			// 			}
			// 		]
			// 	}
			// 	chart.setOption(option)
			// 	return chart
			// },
		},
	}
</script>

<style lang="scss">
	.order-statistics {
		width: 100%;
		position: relative;
		padding: 16rpx 32rpx;
		box-sizing: border-box;
		
		.select-date {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 16rpx;
		}
		
		.overview-data-box {
			margin-top: 24rpx;
			display: flex;
			flex-wrap: wrap;
			gap: 24rpx; /* 控制间距 */
			width: 100%;
			
			.data-item {
			    flex: 1 1 calc(50% - 24rpx);
				position: relative;
			}
		}
	}
</style>