|
|
@@ -0,0 +1,374 @@
|
|
|
+<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>
|
lxp