shunfengche-sfd/my/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>
				<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>
				<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 '@/components/uni-ec-canvas/uni-ec-canvas'
	import * as echarts from '@/components/uni-ec-canvas/echarts.js'
	import { waitForGlobalImages } from '@/utils/globalImageLoader'
	
	export default {
		components: { DataItem, BtnGroup, uniEcCanvas },
		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: {},
				},
				a: '',
				orderSelect: null,
				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)
		},
		watch: {
			orderSelect(newVal) {
				if(newVal) {
					this.$refs.canvas1.init(this.initChart1)
				}
			},
			compareSelect(newVal) {
				if(newVal) {
					this.$refs.canvas2.init(this.initChart2)
				}
			},
		},
		methods: {
			// { startYear, startMonth, startDay, startDate, startWeek, endYear, endMonth, endDay, endDate, endWeek }
			bindDateChange(event) {
				this.timeRange = event.startDate + ' - ' + event.endDate
			},
			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>