<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 Bar02 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(data:Array<any>){
    let chartDom:any = document.getElementById(this.id);
    let myChart = echarts.init(chartDom);
    let option: EChartsOption;
    let dataX:Array<any>=[]
    let dataY:Array<any>=[]
    for(const item of data) {
      dataX.push(item.month)
      dataY.push(item.total)
    }
    option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: dataX
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: dataY,
          type: 'bar',
          showBackground: true,
          barWidth: '60%',
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          },
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#83bff6' },
              { offset: 0.5, color: '#188df0' },
              { offset: 1, color: '#188df0' }
            ])
          }
        }
      ]
    };

    option && myChart.setOption(option);
  }
  getData() {
    (this as any).$request({
      url:'/omsOrder/report/monthlyCount',
      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;
    }
    .select{
      width: 100px;
      position: absolute;
      top: 6px;
      right: 0;
    }
  }
}
.chart{
  height: calc(100% - 40px);
  width: 100%;
}
</style>