|
@@ -1,5 +1,11 @@
|
|
|
<template>
|
|
|
- <div class="chart" :id="id"></div>
|
|
|
+ <div class="chart-box">
|
|
|
+ <div class="title-top">
|
|
|
+ <span>每月店铺订单量日趋势</span>
|
|
|
+ </div>
|
|
|
+ <div class="chart" :id="id"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
@@ -12,7 +18,7 @@ export default class Line01 extends Vue {
|
|
|
id=this.randomString();
|
|
|
|
|
|
mounted(){
|
|
|
- this.init()
|
|
|
+ this.getData()
|
|
|
}
|
|
|
|
|
|
randomString(){
|
|
@@ -22,20 +28,43 @@ export default class Line01 extends Vue {
|
|
|
result += str[Math.floor(Math.random() * str.length)];
|
|
|
return result;
|
|
|
}
|
|
|
- init(){
|
|
|
+ initChart(list:Array<any>){
|
|
|
+ if(!list) return
|
|
|
let chartDom:any = document.getElementById(this.id);
|
|
|
let myChart = echarts.init(chartDom);
|
|
|
let option: EChartsOption;
|
|
|
-
|
|
|
+ let dataX:Array<any>=this.getDaysList()
|
|
|
+ let dataY:Array<any>=[]
|
|
|
+ for(const item of list) {
|
|
|
+ let obj:any={
|
|
|
+ name: item[0].shop_name,
|
|
|
+ type: 'line',
|
|
|
+ data: []
|
|
|
+ }
|
|
|
+ if(item){
|
|
|
+ for(const arr of dataX) {
|
|
|
+ let isAdd = false
|
|
|
+ for(const item2 of item){
|
|
|
+ if(arr == item2.day) {
|
|
|
+ obj.data.push(item2.total)
|
|
|
+ isAdd = true
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if(!isAdd) {
|
|
|
+ obj.data.push(0)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ dataY.push(obj)
|
|
|
+ }
|
|
|
option = {
|
|
|
- title: {
|
|
|
- text: '每月成交量和退货量',
|
|
|
- },
|
|
|
tooltip: {
|
|
|
trigger: 'axis'
|
|
|
},
|
|
|
- legend: {
|
|
|
- data: ['成交量', '退货量',]
|
|
|
+ legend:{
|
|
|
+ show:true,
|
|
|
+ top:0
|
|
|
},
|
|
|
grid: {
|
|
|
left: '3%',
|
|
@@ -51,33 +80,65 @@ export default class Line01 extends Vue {
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
boundaryGap: false,
|
|
|
- data: ['2022/08', '2022/09', '2022/10', '2022/11', '2022/12', '2023/01','2023/02','2023/03','2023/04','2023/05','2023/06','2023/07']
|
|
|
+ data: dataX
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value'
|
|
|
},
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: '成交量',
|
|
|
- type: 'line',
|
|
|
- data: [0, 0, 0, 0, 0, 0, 0, 0,70,380,500, 580]
|
|
|
- },
|
|
|
- {
|
|
|
- name: '退货量',
|
|
|
- type: 'line',
|
|
|
- data: [0, 0, 0, 0, 0, 0, 0, 0,10,40,50, 62]
|
|
|
- }
|
|
|
- ]
|
|
|
+ series: dataY
|
|
|
};
|
|
|
|
|
|
option && myChart.setOption(option);
|
|
|
}
|
|
|
+ getDaysList() {
|
|
|
+ let daysHandle = (n:number) => {
|
|
|
+ let dy = new Date()
|
|
|
+ dy.setTime(dy.getTime() - 3600 * 1000 * 24 * n)
|
|
|
+ let y = dy.getFullYear();
|
|
|
+ let m:any = dy.getMonth() + 1;
|
|
|
+ let d:any = dy.getDate();
|
|
|
+ m = m < 10 ? '0' + m : m;
|
|
|
+ d = d < 10 ? '0' + d : d;
|
|
|
+ return y + '-' + m + '-' + d;
|
|
|
+ }
|
|
|
+ let data:Array<any> = []
|
|
|
+ for(let i = 29; i >= 0; i--) {
|
|
|
+ data.push(daysHandle(i))
|
|
|
+ }
|
|
|
+ return data;
|
|
|
+ }
|
|
|
+ getData() {
|
|
|
+ (this as any).$request({
|
|
|
+ url:'/omsOrder/report/shopDaylyCount',
|
|
|
+ method: 'GET',
|
|
|
+ }).then((res:any) => {
|
|
|
+ if(res.data) {
|
|
|
+ this.initChart(res.data)
|
|
|
+ }
|
|
|
+ }).catch(() =>{})
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.chart{
|
|
|
+.chart-box{
|
|
|
height: 100%;
|
|
|
width: 100%;
|
|
|
+ .title-top{
|
|
|
+ height: 40px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ >span{
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.chart{
|
|
|
+ height: calc(100% - 40px);
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
</style>
|