gxwebsoft
ced8c7cff7
- 后端新增专区销量统计相关 VO 并扩展 ShopHomeSection 实体 - 新增批量查询专区销量汇总与商品排行的 Mapper 方法及接口 - Controller 增加获取专区销量统计的接口支持时间范围查询 - 前端接口定义新增专区销量统计类型及请求方法 - 专区管理页面列表新增销量件数、销售额列及销量详情按钮 - 实现专区销量统计弹窗支持时间筛选、汇总展示和排行显示 - 完成前端相关界面和交互设计，保证功能完整可用 - 统计口径基于已支付且未取消/退款订单商品实际成交数据
92 lines
2.2 KiB
Vue
92 lines
2.2 KiB
Vue
<template>
|
|
<v-chart class="trend-chart" :option="chartOption" autoresize />
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { computed } from 'vue';
|
|
import { use } from 'echarts/core';
|
|
import { CanvasRenderer } from 'echarts/renderers';
|
|
import { LineChart, BarChart } from 'echarts/charts';
|
|
import {
|
|
TooltipComponent,
|
|
GridComponent,
|
|
LegendComponent,
|
|
DataZoomComponent
|
|
} from 'echarts/components';
|
|
import VChart from 'vue-echarts';
|
|
import type { ShopOrderTrendItem } from '@/api/shop/shopOrderStats/model';
|
|
|
|
use([
|
|
CanvasRenderer,
|
|
LineChart,
|
|
BarChart,
|
|
TooltipComponent,
|
|
GridComponent,
|
|
LegendComponent,
|
|
DataZoomComponent
|
|
]);
|
|
|
|
const props = defineProps<{
|
|
data?: ShopOrderTrendItem[] | null;
|
|
chartType?: 'line' | 'bar';
|
|
}>();
|
|
|
|
const chartOption = computed(() => {
|
|
const list = props.data ?? [];
|
|
const seriesType = props.chartType === 'bar' ? 'bar' : 'line';
|
|
const periods = list.map((d) => d.period);
|
|
const gmv = list.map((d) => Number(d.gmvSales) || 0);
|
|
const paid = list.map((d) => Number(d.paidSales) || 0);
|
|
const orders = list.map((d) => Number(d.orderCount) || 0);
|
|
return {
|
|
tooltip: { trigger: 'axis' },
|
|
legend: { data: ['GMV(含未付)', '实收(已付)', '订单数'], bottom: 0 },
|
|
grid: { left: 60, right: 24, top: 30, bottom: periods.length > 30 ? 70 : 50 },
|
|
xAxis: {
|
|
type: 'category',
|
|
data: periods,
|
|
boundaryGap: seriesType === 'bar'
|
|
},
|
|
yAxis: [
|
|
{ type: 'value', name: '金额(元)' },
|
|
{ type: 'value', name: '订单数', splitLine: { show: false } }
|
|
],
|
|
dataZoom:
|
|
periods.length > 30
|
|
? [{ type: 'inside' }, { type: 'slider', height: 18 }]
|
|
: undefined,
|
|
series: [
|
|
{
|
|
name: 'GMV(含未付)',
|
|
type: seriesType,
|
|
data: gmv,
|
|
smooth: true,
|
|
itemStyle: { color: '#91cc75' }
|
|
},
|
|
{
|
|
name: '实收(已付)',
|
|
type: seriesType,
|
|
data: paid,
|
|
smooth: true,
|
|
itemStyle: { color: '#00704A' }
|
|
},
|
|
{
|
|
name: '订单数',
|
|
type: seriesType,
|
|
yAxisIndex: 1,
|
|
data: orders,
|
|
smooth: true,
|
|
itemStyle: { color: '#5470c6' }
|
|
}
|
|
]
|
|
};
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.trend-chart {
|
|
height: 380px;
|
|
width: 100%;
|
|
}
|
|
</style>
|