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