ruyi-ui/src/views/stat/voucher/index.vue

<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header"><span>搜索信息</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="120px">
              <el-form-item label="开始时间" prop="startTime">
                <el-date-picker clearable
                  v-model="queryParams.startTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="开始时间">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="结束时间" prop="endTime">
                <el-date-picker clearable
                  v-model="queryParams.endTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="请选择结束时间">
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8" class="card-box">
        <el-card>
          <div slot="header"><span>代金券发放比例</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="activities" style="height: 550px" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="16" class="card-box">
        <el-card>
          <div slot="header">
            <span>代金券发放数</span>
          </div>
          <div ref="usedmemory" style="height: 550px" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { issuedCountTyType } from "@/api/stat/index";
import echarts from "echarts";

export default {
  name: "Cache",
  dicts: ['user_tags'],
  data() {
    return {
      activities: null,
      // cache信息
      cache: [],
      queryParams: {},
      dateRange: [],
      userData: []
    }
  },
  mounted() {
    this.handleQuery();
  },
  methods: {
    // 搜索
    handleQuery() {
      this.$modal.loading("正在加载活动统计数据，请稍候！");
      this.getActivity();
      this.getUser();
    },
    // 重置
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    async getActivity() {
      const res = await issuedCountTyType(this.queryParams);
      const data = res?.data;
      const myChart = echarts.init(this.$refs.activities, 'macarons');
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: "{b}: {c} ({d}%)",
        },
        series: [
          {
            type: "pie",
            radius: '50%',
            center: ["50%", "38%"],
            data,
            animationEasing: "cubicInOut",
            animationDuration: 1000,
          }
        ]
      };
      myChart.setOption(option);
      this.$modal.closeLoading();
    },
    async getUser() {
      const res = await issuedCountTyType(this.queryParams);
      const data = res?.data;
      const myChart = echarts.init(this.$refs.usedmemory);
      const option = {
        xAxis: {
          type: 'category',
          data: (() => {
            let list = [];
              data.map((item) => {
                  list.push(item.name);
              });
              return list;
          })(),
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data,
            type: 'bar',
            label: {
              show: true,
              position: 'top'
            },
            itemStyle: {
              normal: {
                color: function(params) {
                    return '#3f48cc'
                }
              }
            }
          }
        ]
      };
      myChart.setOption(option);

      this.$modal.closeLoading();
    }
  }
};
</script>