oms/src/views/components/line01.vue

<template>
  <div class="chart-box">
    <div class="title-top">
      <span>每月店铺订单量日趋势</span>
    </div>
    <div class="chart" :id="id"></div>
  </div>
  
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
import * as echarts from 'echarts';
type EChartsOption = echarts.EChartsOption;

@Component
export default class Line01 extends Vue {
  id=this.randomString();

  mounted(){
    this.getData()
  }

  randomString(){
    const str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
    let result = '';
    for (let i = 10; i > 0; --i) 
      result += str[Math.floor(Math.random() * str.length)];
    return result;
  }
  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',
        smooth: true,
        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 = {
      tooltip: {
        trigger: 'axis'
      },
      legend:{
        show:true,
        top:0
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          // saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: dataX
      },
      yAxis: {
        type: 'value'
      },
      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-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>