czc
2 years ago
parent
5257ec80ec
commit
606a5a2758
@ -0,0 +1,32 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 获取首页查询热卖商品TOP
|
||||||
|
export function goodsStatistics(query) {
|
||||||
|
return request({
|
||||||
|
url: '/dev/statistics/index/goodsStatistics',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
export function memberAndCartStatistics() {
|
||||||
|
return request({
|
||||||
|
url: '/dev/statistics/index/memberAndCart/statistics',
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function orderAndAftersaleStatistics() {
|
||||||
|
return request({
|
||||||
|
url: '/dev/statistics/index/order/aftersale/statistics',
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取订单信息
|
||||||
|
export function orderStatistics(query) {
|
||||||
|
return request({
|
||||||
|
url: '/dev/statistics/index/orderStatistics',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
@ -0,0 +1,263 @@
|
|||||||
|
<template>
|
||||||
|
<el-card style="margin: 20px 20px; font-size: 14px;">
|
||||||
|
<div slot="header" class="clearfix">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12">
|
||||||
|
<div style="text-align: left">
|
||||||
|
<el-radio-group v-model="params.type" size="small" @change="OnRadioChange">
|
||||||
|
<el-radio-button label="0">订单数</el-radio-button>
|
||||||
|
<el-radio-button label="30">支付金额</el-radio-button>
|
||||||
|
</el-radio-group>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<!-- <el-col :span="12">-->
|
||||||
|
<!-- <div style="border-left:1px solid #DCDFE6">-->
|
||||||
|
<!-- <el-date-picker v-model="orderCountDate" align="right" end-placeholder="结束日期"-->
|
||||||
|
<!-- :picker-options="pickerOptions" range-separator="至" size="small"-->
|
||||||
|
<!-- start-placeholder="开始日期" style="float: right;z-index: 1" type="daterange"-->
|
||||||
|
<!-- unlink-panels="unlink-panels" @change="handleDateChange"></el-date-picker>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- </el-col>-->
|
||||||
|
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
<div :style="{minHeight:height,minWidth:width}">
|
||||||
|
<div ref="chart" class="chart" :style="{height:height,width:width}"/>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
import {orderStatistics} from "@/api/statistics";
|
||||||
|
import echarts from 'echarts'
|
||||||
|
|
||||||
|
require('echarts/theme/macarons') // echarts theme
|
||||||
|
import resize from './mixins/resize'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
mixins: [resize],
|
||||||
|
name: "OrderLineChart",
|
||||||
|
props: {
|
||||||
|
width: {
|
||||||
|
type: String,
|
||||||
|
default: '100%'
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: String,
|
||||||
|
default: '350px'
|
||||||
|
},
|
||||||
|
autoResize: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
pickerOptions: {
|
||||||
|
shortcuts: [{
|
||||||
|
text: '最近一周',
|
||||||
|
onClick(picker) {
|
||||||
|
const end = new Date();
|
||||||
|
let start = new Date();
|
||||||
|
start.setFullYear(2018);
|
||||||
|
start.setMonth(10);
|
||||||
|
start.setDate(1);
|
||||||
|
end.setTime(start.getTime() + 3600 * 1000 * 24 * 7);
|
||||||
|
picker.$emit('pick', [start, end]);
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
text: '最近一月',
|
||||||
|
onClick(picker) {
|
||||||
|
const end = new Date();
|
||||||
|
let start = new Date();
|
||||||
|
start.setFullYear(2018);
|
||||||
|
start.setMonth(10);
|
||||||
|
start.setDate(1);
|
||||||
|
end.setTime(start.getTime() + 3600 * 1000 * 24 * 30);
|
||||||
|
picker.$emit('pick', [start, end]);
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
orderCountDate: '',
|
||||||
|
params: {
|
||||||
|
type: 0
|
||||||
|
},
|
||||||
|
chartData: {},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.initChart()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
if (!this.chart) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.chart.dispose()
|
||||||
|
this.chart = null
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
orderStatistics().then(res => {
|
||||||
|
const orderAmount = res.map(it => {
|
||||||
|
return it.orderAmount
|
||||||
|
})
|
||||||
|
const orderCount = res.map(it => {
|
||||||
|
return it.orderCount
|
||||||
|
})
|
||||||
|
const dateList = res.map(it => {
|
||||||
|
return it.date
|
||||||
|
})
|
||||||
|
console.log(dateList, 'date')
|
||||||
|
this.chartData = {dateList, orderAmount, orderCount}
|
||||||
|
this.initChart()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
OnRadioChange(type) {
|
||||||
|
this.initChart(type)
|
||||||
|
|
||||||
|
},
|
||||||
|
initChart(type = 0) {
|
||||||
|
this.chart = echarts.init(this.$refs.chart, 'macarons')
|
||||||
|
if (type == 0) {
|
||||||
|
this.setOptions(this.chartData)
|
||||||
|
} else {
|
||||||
|
this.setAmountOptions(this.chartData)
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
setOptions({dateList, orderAmount, orderCount} = {}) {
|
||||||
|
this.chart.setOption({
|
||||||
|
xAxis: {
|
||||||
|
data: dateList,
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: 10,
|
||||||
|
right: 10,
|
||||||
|
bottom: 20,
|
||||||
|
top: 30,
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross'
|
||||||
|
},
|
||||||
|
padding: [5, 10]
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['订单数', '支付订单']
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
// {
|
||||||
|
// name: '订单数', itemStyle: {
|
||||||
|
// normal: {
|
||||||
|
// color: '#FF005A',
|
||||||
|
// lineStyle: {
|
||||||
|
// color: '#FF005A',
|
||||||
|
// width: 2
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// smooth: true,
|
||||||
|
// type: 'line',
|
||||||
|
// data: orderAmount,
|
||||||
|
// animationDuration: 2800,
|
||||||
|
// animationEasing: 'cubicInOut'
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
name: '支付订单',
|
||||||
|
smooth: true,
|
||||||
|
type: 'line',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#3888fa',
|
||||||
|
lineStyle: {
|
||||||
|
color: '#3888fa',
|
||||||
|
width: 2
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
color: '#f3f8ff'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: orderCount,
|
||||||
|
animationDuration: 2800,
|
||||||
|
animationEasing: 'quadraticOut'
|
||||||
|
}]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
, setAmountOptions({dateList, orderAmount, orderCount} = {}) {
|
||||||
|
this.chart.setOption({
|
||||||
|
xAxis: {
|
||||||
|
data: dateList,
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: 10,
|
||||||
|
right: 10,
|
||||||
|
bottom: 20,
|
||||||
|
top: 30,
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross'
|
||||||
|
},
|
||||||
|
padding: [5, 10]
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['支付金额']
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '支付金额', itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#FF005A',
|
||||||
|
lineStyle: {
|
||||||
|
color: '#FF005A',
|
||||||
|
width: 2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
smooth: true,
|
||||||
|
type: 'line',
|
||||||
|
data: orderAmount,
|
||||||
|
animationDuration: 2800,
|
||||||
|
animationEasing: 'cubicInOut'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleDateChange() {
|
||||||
|
this.getData();
|
||||||
|
}
|
||||||
|
,
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped lang="scss">
|
||||||
|
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue