faiz
/
hy-shop-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1

This commit is contained in:
faiz 2024-07-10 14:05:37 +08:00
parent 2acce82e3f
commit 63fa5681de
2 changed files with 412 additions and 350 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

405
src/views/daily-statistics/components/DayData.vue
View File

@ -2,61 +2,73 @@
<div class="box-card statistics"> <div class="box-card statistics">
<el-tabs stretch v-model="activeName"> <el-tabs stretch v-model="activeName">
<el-tab-pane label="用户分析图" name="first"> <el-tab-pane label="用户分析图" name="first">
<echarts-from v-if="activeName=='first'" ref="optionUserData" :option-data="optionUserData" :styles="style" height="100%" width="100%" /> <echarts-from
v-if="activeName == 'first'"
ref="optionUserData"
:option-data="optionUserData"
:styles="style"
height="100%"
width="100%"
/>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="订单数量分析图" name="second"> <el-tab-pane label="订单数量分析图" name="second">
<echarts-from v-if="activeName=='second'" ref="optionOrderData" :option-data="optionOrderData" :styles="style" height="100%" width="100%" /> <echarts-from
v-if="activeName == 'second'"
ref="optionOrderData"
:option-data="optionOrderData"
:styles="style"
height="100%"
width="100%"
/>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="订单金额分析图" name="third"> <el-tab-pane label="订单金额分析图" name="third">
<echarts-from v-if="activeName=='third'" ref="optionOrderNumber" :option-data="optionOrderNumber" :styles="style" height="100%" width="100%" /> <echarts-from
v-if="activeName == 'third'"
ref="optionOrderNumber"
:option-data="optionOrderNumber"
:styles="style"
height="100%"
width="100%"
/>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
</template> </template>
<script> <script>
import echartsFrom from '@/components/echarts/index' import echartsFrom from "@/components/echarts/index";
import { roterPre } from '@/settings' import { roterPre } from "@/settings";
export default { export default {
name: 'DayData', name: "DayData",
components: { components: {
echartsFrom echartsFrom,
}, },
props:{ props: {
tableData: { tableData: {
type: Array, type: Array,
default: () => [] default: () => [],
} },
}, },
data() { data() {
return { return {
statisticsData: [],
roterPre: roterPre, roterPre: roterPre,
optionUserData:{}, optionUserData: {},
optionOrderData:{}, optionOrderData: {},
optionOrderNumber:{}, optionOrderNumber: {},
newUserList:[], listLoading: true,
order_amount:[], activeName: "first",
order_coupon:[], style: {
refund_amount:[], height: "360px",
pay_count:[], },
order_count:[], };
userList:[], },
timer:[], watch: {
listLoading:true, tableData() {
activeName:'first', this.getList();
style:{
height: '360px'
}
}
}, },
watch:{
tableData(){
this.getList()
}
}, },
methods: { methods: {
getLine(newUserList,userList,timer){ getLine(newUserList, userList, timer, activeCountList) {
const seriesData = [ const seriesData = [
{ {
name: "新增用户(人)", name: "新增用户(人)",
@ -66,12 +78,27 @@
normal: { normal: {
color: "#5AD8A6", color: "#5AD8A6",
lineStyle: { lineStyle: {
color: "#5AD8A6" color: "#5AD8A6",
} },
} },
}, },
data: newUserList, data: newUserList,
smooth: false smooth: false,
},
{
name: "活跃人数(人)",
type: "line",
stack: "用户量",
itemStyle: {
normal: {
color: "#5D7092",
lineStyle: {
color: "#5D7092",
},
},
},
data: activeCountList,
smooth: false,
}, },
{ {
name: "累计用户(人)", name: "累计用户(人)",
@ -82,13 +109,13 @@
normal: { normal: {
color: "#5B8FF9", color: "#5B8FF9",
lineStyle: { lineStyle: {
color: "#5B8FF9" color: "#5B8FF9",
} },
} },
}, },
data: userList, data: userList,
smooth: false smooth: false,
} },
]; ];
this.optionUserData = { this.optionUserData = {
tooltip: { tooltip: {
@ -96,52 +123,52 @@
axisPointer: { axisPointer: {
type: "cross", type: "cross",
label: { label: {
backgroundColor: "#6a7985" backgroundColor: "#6a7985",
} },
} },
}, },
legend: { legend: {
data: ["新增用户(人)", "累计用户(人)"], data: ["新增用户(人)", "累计用户(人)", "活跃人数(人)"],
orient: "vertical", orient: "vertical",
x:'right', x: "right",
y:'center', y: "center",
align:'left' align: "left",
}, },
grid: { grid: {
top:'8%', top: "8%",
left: "2%", left: "2%",
right: "8%", right: "8%",
bottom: "3%", bottom: "3%",
containLabel: true containLabel: true,
}, },
axisLine: { axisLine: {
show: false show: false,
}, },
xAxis: [ xAxis: [
{ {
type: "category", type: "category",
boundaryGap: false, boundaryGap: false,
axisLine: { axisLine: {
show: false show: false,
}, },
axisTick: { axisTick: {
alignWithLabel: true, alignWithLabel: true,
lineStyle: { lineStyle: {
color: "#D7DDE4" color: "#D7DDE4",
} },
}, },
splitLine: { splitLine: {
show: false show: false,
}, },
axisLabel: { axisLabel: {
interval: 0, interval: 0,
rotate: 50, rotate: 50,
textStyle: { textStyle: {
color: "#7F8B9C" color: "#7F8B9C",
} },
},
data: Array.from(new Set(timer)),
}, },
data: Array.from(new Set(timer))
}
], ],
yAxis: [ yAxis: [
{ {
@ -151,208 +178,242 @@
{ {
type: "value", type: "value",
splitLine: { splitLine: {
show: false show: false,
} },
} },
], ],
series: seriesData series: seriesData,
}; };
}, },
getOrderLine(order_amount,order_coupon,refund_amount,timer){ getOrderLine(order_amount, order_coupon, refund_amount, timer) {
this.optionOrderData = { this.optionOrderData = {
tooltip: { tooltip: {
trigger: 'axis', trigger: "axis",
axisPointer: { axisPointer: {
type: 'cross', type: "cross",
label: { label: {
backgroundColor: '#6a7985' backgroundColor: "#6a7985",
} },
} },
}, },
legend: { legend: {
data: ['实付订单金额(含运费/元)', '抵扣券使用数量', '退订单退款金额(元)'], data: [
"实付订单金额(含运费/元)",
"抵扣券使用数量",
"退订单退款金额(元)",
],
orient: "vertical", orient: "vertical",
x:'right', x: "right",
y:'center', y: "center",
align:'left' align: "left",
}, },
grid: { grid: {
left: '3%', left: "3%",
right: '12%', right: "12%",
bottom: '3%', bottom: "3%",
containLabel: true containLabel: true,
}, },
xAxis: [ xAxis: [
{ {
type: "category", type: "category",
boundaryGap: false, boundaryGap: false,
axisLine: { axisLine: {
show: false show: false,
}, },
axisTick: { axisTick: {
alignWithLabel: true, alignWithLabel: true,
lineStyle: { lineStyle: {
color: "#D7DDE4" color: "#D7DDE4",
} },
}, },
splitLine: { splitLine: {
show: false show: false,
}, },
axisLabel: { axisLabel: {
interval: 0, interval: 0,
rotate: 50, rotate: 50,
textStyle: { textStyle: {
color: "#7F8B9C" color: "#7F8B9C",
} },
},
data: Array.from(new Set(timer)),
}, },
data: Array.from(new Set(timer))
}
], ],
yAxis: [ yAxis: [
{ {
type: 'value' type: "value",
} },
], ],
series: [ series: [
{ {
name: '实付订单金额(含运费/元)', name: "实付订单金额(含运费/元)",
type: 'line', type: "line",
stack: 'Total', stack: "Total",
areaStyle: {}, areaStyle: {},
emphasis: { emphasis: {
focus: 'series' focus: "series",
}, },
data: order_amount data: order_amount,
}, },
{ {
name: '抵扣券使用数量', name: "抵扣券使用数量",
type: 'line', type: "line",
stack: 'Total', stack: "Total",
areaStyle: {}, areaStyle: {},
emphasis: { emphasis: {
focus: 'series' focus: "series",
}, },
data: order_coupon data: order_coupon,
}, },
{ {
name: '退订单退款金额(元)', name: "退订单退款金额(元)",
type: 'line', type: "line",
stack: 'Total', stack: "Total",
label: { label: {
show: true, show: true,
position: 'top' position: "top",
}, },
areaStyle: {}, areaStyle: {},
emphasis: { emphasis: {
focus: 'series' focus: "series",
}, },
data: refund_amount data: refund_amount,
} },
] ],
}; };
}, },
getBar(order_count,pay_count,timer){ getBar(order_count, pay_count, timer) {
this.optionOrderNumber = { this.optionOrderNumber = {
tooltip: { tooltip: {
trigger: 'axis', trigger: "axis",
axisPointer: { axisPointer: {
type: 'cross', type: "cross",
label: { label: {
backgroundColor: '#6a7985' backgroundColor: "#6a7985",
} },
} },
},
grid: {
left: "3%",
right: "12%",
bottom: "3%",
containLabel: true,
}, },
legend: { legend: {
data: ['支付人数(人)', '支付订单数(单)'], data: ["支付人数(人)", "支付订单数(单)"],
orient: "vertical", orient: "vertical",
x:'right', x: "right",
y:'center', y: "center",
align:'left' align: "left",
}, },
xAxis: [ xAxis: [
{ {
type: "category", type: "category",
boundaryGap: false, // boundaryGap: false,
axisLine: { axisLine: {
show: false show: false,
}, },
axisTick: { axisTick: {
alignWithLabel: true, alignWithLabel: true,
lineStyle: { lineStyle: {
color: "#D7DDE4" color: "#D7DDE4",
} },
}, },
splitLine: { splitLine: {
show: false show: false,
}, },
axisLabel: { axisLabel: {
interval: 0, interval: 0,
rotate: 50, rotate: 50,
textStyle: { textStyle: {
color: "#7F8B9C" color: "#7F8B9C",
} },
},
data: Array.from(new Set(timer)),
}, },
data: Array.from(new Set(timer))
}
], ],
yAxis: [ yAxis: [
{ {
type: 'value' type: "value",
} }
], ],
series: [ series: [
{ {
name: '支付人数(人)', name: "支付人数(人)",
type: 'bar', type: "bar",
barGap: 0, // barGap: 0,
emphasis: { itemStyle: {
focus: 'series' normal: {
color: "#ff9900",
lineStyle: {
color: "#ff9900",
}, },
data: order_count },
},
emphasis: {
focus: "series",
},
data: pay_count,
}, },
{ {
name: '支付订单数(单)', name: "支付订单数(单)",
type: 'bar', type: "bar",
itemStyle: {
normal: {
color: "#20894d",
lineStyle: {
color: "#20894d",
},
},
},
emphasis: { emphasis: {
focus: 'series' focus: "series",
}, },
data: pay_count data: order_count,
}
]
}
}, },
getList(){ ],
this.newUserList= [] };
this.userList= [] },
this.timer= [] getList() {
this.order_coupon= [] let newUserList = [];
this.refund_amount= [] let userList = [];
this.order_count= [] let timer = [];
this.pay_count= [] let order_coupon = [];
this.order_amount = []//订单金额 let refund_amount = [];
this.tableData.map(item => { let order_count = [];
this.newUserList.push(item.reg_count); let pay_count = [];
this.userList.push(item.user_count); let order_amount = []; //订单金额
this.timer.push(item.date); let activeCountList = [];
this.order_amount.push(item.order_amount) //订单金额 let Daydata = [...this.tableData]
this.order_coupon.push(item.order_coupon) //优惠券 // 对日期数组进行排序
this.refund_amount.push(item.refund_amount) //退款 Daydata.sort((a, b) => {
this.order_count.push(item.order_count) let dateA = new Date(a.date);
this.pay_count.push(item.pay_count) let dateB = new Date(b.date);
return dateA - dateB;
}); });
this.getLine(this.newUserList,this.userList,this.timer); Daydata.map((item) => {
this.getOrderLine(this.order_amount,this.order_coupon,this.refund_amount,this.timer); newUserList.push(item.reg_count);
this.getBar(this.order_count,this.pay_count,this.timer) userList.push(item.user_count);
} timer.push(item.date);
} order_amount.push(item.order_amount); //订单金额
} order_coupon.push(item.order_coupon); //优惠券
</script> refund_amount.push(item.refund_amount); //退款
order_count.push(item.order_count);
pay_count.push(item.pay_count);
activeCountList.push(item.active_count);
});
this.getLine(newUserList, userList, timer, activeCountList);
this.getOrderLine(order_amount, order_coupon, refund_amount, timer);
this.getBar(order_count, pay_count, timer);
},
},
};
</script>
<style lang="scss" scoped> <style lang="scss" scoped>
.statistics { .statistics {
min-width: 700px; min-width: 700px;
margin-top: 0; margin-top: 0;
background: #fff; background: #fff;
} }
</style> </style>

1
src/views/daily-statistics/index.vue
View File

@ -32,6 +32,7 @@
<el-table-column label="id" min-width="130" prop="id"></el-table-column> <el-table-column label="id" min-width="130" prop="id"></el-table-column>
<el-table-column label="时间" min-width="130" prop="date"></el-table-column> <el-table-column label="时间" min-width="130" prop="date"></el-table-column>
<el-table-column label="新增用户(人)" min-width="130" prop="reg_count"></el-table-column> <el-table-column label="新增用户(人)" min-width="130" prop="reg_count"></el-table-column>
<el-table-column label="活跃人数(人)" min-width="130" prop="active_count"></el-table-column>
<el-table-column label="累计用户(人)" min-width="130" prop="user_count"></el-table-column> <el-table-column label="累计用户(人)" min-width="130" prop="user_count"></el-table-column>
<el-table-column label="支付人数(人)" min-width="130" prop="pay_count"></el-table-column> <el-table-column label="支付人数(人)" min-width="130" prop="pay_count"></el-table-column>
<el-table-column label="支付订单数(单)" min-width="130" prop="order_count"></el-table-column> <el-table-column label="支付订单数(单)" min-width="130" prop="order_count"></el-table-column>