数据图表

src/views/v1/api/gameLog/analyse.js

@@ -73,5 +73,15 @@ export default {
       method: 'get',
       params
     })
+  },
+  /**
+   * 数据图表
+   */
+  getChartData(params = {}) {
+    return request({
+      url: '/v1/gameLog/analyse/getChartData',
+      method: 'get',
+      params
+    })
   }
 }

src/views/v1/gameLog/chart/index.vue

@@ -0,0 +1,491 @@
+<template>
+  <div class="ma-content-block">
+    <a-layout-content class="flex flex-col lg:h-full relative w-full">
+      <a-card :bordered="false">
+        <a-row>
+          <a-col :flex="1">
+            <a-form :model="searchForm" ref="searchFormRef" :auto-label-width="true">
+              <a-row :gutter="10">
+                <a-col :sm="8" :xs="24">
+                  <a-form-item label="游戏" field="game_id">
+                    <game-select v-model="searchForm.game_id" multiple />
+                  </a-form-item>
+                </a-col>
+                <a-col :sm="8" :xs="24">
+                  <a-form-item label="对比方式" field="compare_type">
+                    <a-select
+                      v-model="searchForm.compare_type"
+                      :options="compareTypeOptions"
+                      placeholder="请选择对比方式">
+                    </a-select>
+                  </a-form-item>
+                </a-col>
+                <a-col :sm="8" :xs="24" v-if="searchForm.compare_type === 'day'">
+                  <a-form-item label="对比日期1" field="compare_date1">
+                    <a-range-picker v-model="searchForm.compare_date1" type="date" allow-clear />
+                  </a-form-item>
+                </a-col>
+                <a-col :sm="8" :xs="24" v-if="searchForm.compare_type === 'day'">
+                  <a-form-item label="对比日期2" field="compare_date2">
+                    <a-range-picker v-model="searchForm.compare_date2" type="date" allow-clear />
+                  </a-form-item>
+                </a-col>
+                <a-col :sm="8" :xs="24" v-if="searchForm.compare_type === 'hour'">
+                  <a-form-item label="对比日期1" field="compare_date1_date">
+                    <a-date-picker v-model="searchForm.compare_date1_date" type="date" allow-clear />
+                  </a-form-item>
+                </a-col>
+                <a-col :sm="8" :xs="24" v-if="searchForm.compare_type === 'hour'">
+                  <a-form-item label="对比日期2" field="compare_date2_date">
+                    <a-date-picker v-model="searchForm.compare_date2_date" type="date" allow-clear />
+                  </a-form-item>
+                </a-col>
+              </a-row>
+            </a-form>
+          </a-col>
+          <a-divider style="height: 84px" direction="vertical" />
+          <a-col flex="80px" :style="{ textAlign: 'right' }">
+            <a-space direction="vertical" :size="20">
+              <a-button type="primary" @click="search">
+                <template #icon>
+                  <icon-search />
+                </template>
+                {{ '搜索' }}
+              </a-button>
+              <a-button @click="resetSearch">
+                <template #icon>
+                  <icon-refresh />
+                </template>
+                {{ '重置' }}
+              </a-button>
+            </a-space>
+          </a-col>
+        </a-row>
+        <a-divider style="margin-top: 0; margin-bottom: 15px" />
+      </a-card>
+    </a-layout-content>
+
+    <!-- 充值对比 -->
+    <div class="p-10">
+      <sa-chart height="300px" :option="payChartOptions" />
+    </div>
+    <!-- 消耗对比 -->
+    <div class="p-10">
+      <sa-chart height="300px" :option="costChartOptions" />
+    </div>
+    <!-- 注册对比 -->
+    <div class="p-10">
+      <sa-chart height="300px" :option="registerChartOptions" />
+    </div>
+    <!-- 登录对比 -->
+    <div class="p-10">
+      <sa-chart height="300px" :option="loginChartOptions" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue'
+import GameSelect from '@/components/game-select/index.vue'
+import api from '@/views/v1/api/gameLog/analyse'
+import dayjs from 'dayjs'
+const payChartOptions = ref({})
+const costChartOptions = ref({})
+const registerChartOptions = ref({})
+const loginChartOptions = ref({})
+// 引用定义
+const compareTypeOptions = ref([
+  {
+    label: '按天',
+    value: 'day',
+  },
+  {
+    label: '按小时',
+    value: 'hour',
+  },
+])
+
+// 搜索表单
+const searchForm = ref({
+  game_id: '',
+  compare_type: 'day',
+  compare_date1: [],
+  compare_date2: [],
+  compare_date1_date: '',
+  compare_date2_date: '',
+})
+
+// 页面数据初始化
+const initPage = async () => {
+  searchForm.value.compare_date1[0] = dayjs().subtract(14, 'day').format('YYYY-MM-DD')
+  searchForm.value.compare_date1[1] = dayjs().subtract(7, 'day').format('YYYY-MM-DD')
+  searchForm.value.compare_date2[0] = dayjs().subtract(7, 'day').format('YYYY-MM-DD')
+  searchForm.value.compare_date2[1] = dayjs().subtract(0, 'day').format('YYYY-MM-DD')
+  searchForm.value.compare_date1_date = dayjs().subtract(1, 'day').format('YYYY-MM-DD')
+  searchForm.value.compare_date2_date = dayjs().format('YYYY-MM-DD')
+  await search()
+}
+
+// 页面加载完成执行
+onMounted(async () => {
+  initPage()
+})
+
+// 搜索
+const search = async () => {
+  const { data } = await api.getChartData(searchForm.value)
+  console.log(data)
+  const colors = ['#5470C6', '#EE6666']
+  payChartOptions.value = {
+    color: colors,
+    title: {
+      text: '充值对比',
+    },
+    tooltip: {
+      trigger: 'none',
+      axisPointer: {
+        type: 'cross',
+      },
+    },
+    legend: {},
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true,
+    },
+    xAxis: [
+      {
+        type: 'category',
+        axisTick: {
+          alignWithLabel: true,
+        },
+        axisLine: {
+          lineStyle: {
+            color: colors[1],
+          },
+        },
+        axisPointer: {
+          label: {
+            formatter: function (params) {
+              return params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '')
+            },
+          },
+        },
+        data: data.days2,
+      },
+      {
+        type: 'category',
+        axisTick: {
+          alignWithLabel: true,
+        },
+        axisLine: {
+          lineStyle: {
+            color: colors[0],
+          },
+        },
+        axisPointer: {
+          label: {
+            formatter: function (params) {
+              return params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '')
+            },
+          },
+        },
+        data: data.days1,
+      },
+    ],
+    yAxis: [
+      {
+        type: 'value',
+      },
+    ],
+    series: [
+      {
+        name: data.data1.series,
+        type: 'line',
+        xAxisIndex: 1,
+        smooth: true,
+        emphasis: {
+          focus: 'series',
+        },
+        data: data.data1.pay,
+      },
+      {
+        name: data.data2.series,
+        type: 'line',
+        smooth: true,
+        emphasis: {
+          focus: 'series',
+        },
+        data: data.data2.pay,
+      },
+    ],
+  }
+  costChartOptions.value = {
+    color: colors,
+    title: {
+      text: '消耗对比',
+    },
+    tooltip: {
+      trigger: 'none',
+      axisPointer: {
+        type: 'cross',
+      },
+    },
+    legend: {},
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true,
+    },
+    xAxis: [
+      {
+        type: 'category',
+        axisTick: {
+          alignWithLabel: true,
+        },
+        axisLine: {
+          lineStyle: {
+            color: colors[1],
+          },
+        },
+        axisPointer: {
+          label: {
+            formatter: function (params) {
+              return params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '')
+            },
+          },
+        },
+        // prettier-ignore
+        data: data.days2,
+      },
+      {
+        type: 'category',
+        axisTick: {
+          alignWithLabel: true,
+        },
+        axisLine: {
+          lineStyle: {
+            color: colors[0],
+          },
+        },
+        axisPointer: {
+          label: {
+            formatter: function (params) {
+              return params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '')
+            },
+          },
+        },
+        // prettier-ignore
+        data: data.days1,
+      },
+    ],
+    yAxis: [
+      {
+        type: 'value',
+      },
+    ],
+    series: [
+      {
+        name: data.data1.series,
+        type: 'line',
+        xAxisIndex: 1,
+        smooth: true,
+        emphasis: {
+          focus: 'series',
+        },
+        data: data.data1.cost,
+      },
+      {
+        name: data.data2.series,
+        type: 'line',
+        smooth: true,
+        emphasis: {
+          focus: 'series',
+        },
+        data: data.data2.cost,
+      },
+    ],
+  }
+  registerChartOptions.value = {
+    color: colors,
+    title: {
+      text: '注册对比',
+    },
+    tooltip: {
+      trigger: 'none',
+      axisPointer: {
+        type: 'cross',
+      },
+    },
+    legend: {},
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true,
+    },
+    xAxis: [
+      {
+        type: 'category',
+        axisTick: {
+          alignWithLabel: true,
+        },
+        axisLine: {
+          lineStyle: {
+            color: colors[1],
+          },
+        },
+        axisPointer: {
+          label: {
+            formatter: function (params) {
+              return params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '')
+            },
+          },
+        },
+        // prettier-ignore
+        data: data.days2,
+      },
+      {
+        type: 'category',
+        axisTick: {
+          alignWithLabel: true,
+        },
+        axisLine: {
+          lineStyle: {
+            color: colors[0],
+          },
+        },
+        axisPointer: {
+          label: {
+            formatter: function (params) {
+              return params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '')
+            },
+          },
+        },
+        // prettier-ignore
+        data: data.days1,
+      },
+    ],
+    yAxis: [
+      {
+        type: 'value',
+      },
+    ],
+    series: [
+      {
+        name: data.data1.series,
+        type: 'line',
+        xAxisIndex: 1,
+        smooth: true,
+        emphasis: {
+          focus: 'series',
+        },
+        data: data.data1.reg,
+      },
+      {
+        name: data.data2.series,
+        type: 'line',
+        smooth: true,
+        emphasis: {
+          focus: 'series',
+        },
+        data: data.data2.reg,
+      },
+    ],
+  }
+  loginChartOptions.value = {
+    color: colors,
+    title: {
+      text: '登录对比',
+    },
+    tooltip: {
+      trigger: 'none',
+      axisPointer: {
+        type: 'cross',
+      },
+    },
+    legend: {},
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true,
+    },
+    xAxis: [
+      {
+        type: 'category',
+        axisTick: {
+          alignWithLabel: true,
+        },
+        axisLine: {
+          lineStyle: {
+            color: colors[1],
+          },
+        },
+        axisPointer: {
+          label: {
+            formatter: function (params) {
+              return params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '')
+            },
+          },
+        },
+        // prettier-ignore
+        data: data.days2,
+      },
+      {
+        type: 'category',
+        axisTick: {
+          alignWithLabel: true,
+        },
+        axisLine: {
+          lineStyle: {
+            color: colors[0],
+          },
+        },
+        axisPointer: {
+          label: {
+            formatter: function (params) {
+              return params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '')
+            },
+          },
+        },
+        // prettier-ignore
+        data: data.days1,
+      },
+    ],
+    yAxis: [
+      {
+        type: 'value',
+      },
+    ],
+    series: [
+      {
+        name: data.data1.series,
+        type: 'line',
+        xAxisIndex: 1,
+        smooth: true,
+        emphasis: {
+          focus: 'series',
+        },
+        data: data.data1.login,
+      },
+      {
+        name: data.data2.series,
+        type: 'line',
+        smooth: true,
+        emphasis: {
+          focus: 'series',
+        },
+        data: data.data2.login,
+      },
+    ],
+  }
+}
+
+// 重置
+const resetSearch = async () => {
+  initPage()
+}
+</script>