shuhi-ui/src/views/index/components/sale-card.vue

<template>
  <ele-card
    header="订单趋势"
    :header-style="{ padding: '0 24px' }"
    :body-style="{ padding: 0 }"
  >
    <template #extra>
      <div
        class="hidden-xs-only"
        style="display: flex; align-items: center; margin: 16px 0"
      >
        <el-radio-group v-model="saleSearch.dateType" @change="updateDateRange">
          <el-radio-button label="2">近7日</el-radio-button>
          <el-radio-button label="3">近15日</el-radio-button>
          <el-radio-button label="4">近一年</el-radio-button>
        </el-radio-group>
        <div class="hidden-md-and-down" style="width: 320px; margin-left: 12px">
          <el-date-picker
            unlink-panels
            type="datetimerange"
            v-model="saleSearch.datetime"
            range-separator="-"
            format="YYYY-MM-DD HH:mm"
            value-format="YYYY-MM-DD HH:mm"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            class="ele-fluid"
          />
        </div>
      </div>
    </template>
    <div class="sale-body">
      <v-chart
        ref="saleChartRef"
        :option="saleChartOption"
        style="height: 400px"
      />
    </div>
  </ele-card>
</template>

<script setup>
  import { ref, reactive, watch, getCurrentInstance } from 'vue';
  import { EleMessage } from 'ele-admin-plus/es';
  import { use } from 'echarts/core';
  import { CanvasRenderer } from 'echarts/renderers';
  import { BarChart } from 'echarts/charts';
  import { GridComponent, TooltipComponent } from 'echarts/components';
  import VChart from 'vue-echarts';
  import { useEcharts } from '@/utils/use-echarts';
  import dayjs from 'dayjs';
  const { proxy } = getCurrentInstance();

  use([CanvasRenderer, BarChart, GridComponent, TooltipComponent]);

  const saleChartRef = ref(null);

  useEcharts([saleChartRef]);

  /** 销售额柱状图配置 */
  const saleChartOption = reactive({});

  /** 订单数据 */
  const orderData = ref([]);

  /** 销售量搜索参数 */
  const saleSearch = reactive({
    dateType: '2',
    datetime: []
  });

  /** 更新时间范围 */
  const updateDateRange = (type) => {
    console.log(type, 'type');
    const now = dayjs();
    let start, end;

    switch (type) {
      case '2': // 近7日
        start = now.subtract(6, 'day').startOf('day');
        end = now.endOf('day');
        break;
      case '3': // 近15日
        start = now.subtract(14, 'day').startOf('day');
        end = now.endOf('day');
        break;
      case '4': // 近一年
        start = now.subtract(1, 'year').startOf('day');
        end = now.endOf('day');
        break;
    }

    saleSearch.datetime = [
      start.format('YYYY-MM-DD HH:mm'),
      end.format('YYYY-MM-DD HH:mm')
    ];
  };

  /** 获取订单数据 */
  const getOrderData = async () => {
    const [startTime, endTime] = saleSearch.datetime;
    proxy.$http
      .get('/order/orderstat/orderNumStat', {
        params: { startTime, endTime }
      })
      .then((res) => {
        if (res.data.code === 200) {
          orderData.value = res.data.data;
          updateChartOption();
        } else {
          EleMessage.error(res.data.msg || '获取订单数据失败');
        }
      });
  };

  /** 更新图表配置 */
  const updateChartOption = () => {
    const dates = orderData.value.map((item) => item.date);
    const values = orderData.value.map((item) => item.orderNum);

    Object.assign(saleChartOption, {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: dates,
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '订单数量',
          type: 'bar',
          data: values
        }
      ]
    });
  };

  // 监听日期范围变化
  watch(
    () => saleSearch.datetime,
    (newDatetime) => {
      if (newDatetime && newDatetime.length === 2) {
        getOrderData();
      }
    }
  );

  // 初始化
  updateDateRange('2');
</script>

<style lang="scss" scoped>
  .sale-body {
    padding: 16px 0 10px 0;
  }

  .sale-body-title {
    padding: 6px 20px;
  }

  .sale-rank-item {
    display: flex;
    align-items: center;
    padding: 0 20px;
    margin-top: 18px;
    box-sizing: border-box;

    .sale-rank-item-text {
      flex: 1;
      padding-left: 12px;
    }
  }
</style>