udpate

src/api/statistic.ts

@@ -69,12 +69,9 @@ export const getAllRoomStatistic = async (params: RoomMsgParams): Promise<AllRoo
 }
 
 export const getOnlineTimeCount = async (): Promise<DataLabelType[]> => {
-    const res = await axios.get('takelook/onlineTimeCount')
-    const data = res.data as any as DataLabelType[] || []
-    return data
+    const res = await axios.get<DataLabelType[]>('takelook/onlineTimeCount')
+    return res
 }
 export const getRoomVisitData = async (): Promise<DataLabelType[]> => {
-    const res = await axios.get('takelook/roomVisitData')
-    const data = res.data as any as DataLabelType[] || []
-    return data
+    return await axios.get('takelook/roomVisitData')
 }

src/components.d.ts

@@ -10,6 +10,7 @@ declare module '@vue/runtime-core' {
     AAvatar: typeof import('ant-design-vue/es')['Avatar']
     AButton: typeof import('ant-design-vue/es')['Button']
     ACard: typeof import('ant-design-vue/es')['Card']
+    ACheckboxGroup: typeof import('ant-design-vue/es')['CheckboxGroup']
     ACol: typeof import('ant-design-vue/es')['Col']
     AConfigProvider: typeof import('ant-design-vue/es')['ConfigProvider']
     ADropdown: typeof import('ant-design-vue/es')['Dropdown']
@@ -29,6 +30,7 @@ declare module '@vue/runtime-core' {
     AppstoreOutlined: typeof import('@ant-design/icons-vue')['AppstoreOutlined']
     ARangePicker: typeof import('ant-design-vue/es')['RangePicker']
     ARow: typeof import('ant-design-vue/es')['Row']
+    ASelect: typeof import('ant-design-vue/es')['Select']
     ATable: typeof import('ant-design-vue/es')['Table']
     ATabPane: typeof import('ant-design-vue/es')['TabPane']
     ATabs: typeof import('ant-design-vue/es')['Tabs']

src/store/modules/statistic.ts

@@ -4,7 +4,8 @@ import {
     getHeroStatus,
     getRoomMsgList,
     getAllRoomStatistic,
-    getOnlineTimeCount
+    getOnlineTimeCount,
+    getRoomVisitData
 } from '@/api'
 
 import type {
@@ -22,6 +23,7 @@ export const useStatisticStore = defineStore('statistic', {
         top5: {} as Top5DataType,
         roomData: {} as HeroStatusType,
         onlineTimeCount: [] as any as DataLabelType[],
+        rooUseChart: [] as any as DataLabelType[],
         allRoom: {
             list: [] as any as SRoom[],
             pageNum: 1,
@@ -45,7 +47,8 @@ export const useStatisticStore = defineStore('statistic', {
             this.top5 = await getTop5()
         },
         async fetchOnlineTimeCount() {
-            this.onlineTimeCount = await getOnlineTimeCount()
+            const res = await getOnlineTimeCount()
+            this.onlineTimeCount = res
         },
         async fetchAllRoomList(params: RoomMsgParams) {
             this.allRoom = await getAllRoomStatistic(params)
@@ -56,6 +59,9 @@ export const useStatisticStore = defineStore('statistic', {
         },
         async fetchRoomMsglist(params: RoomMsgParams) {
             this.roomMsg = await getRoomMsgList(params)
+        },
+        async fetchRoomVisitChart() {
+            this.rooUseChart = await getRoomVisitData()
         }
     }
 })

src/views/statistic/tab/tab1.vue

@@ -77,7 +77,9 @@
         <a-card title="带看次数排行（前5）" :bordered="false">
           <ul class="topic-list">
             <li v-for="top in takeLookList" :key="top.dataKey">
-              <p><span>{{ top.dataKey }}</span> <span>{{ top.dataCount }}</span></p>
+              <p>
+                <span>{{ top.dataKey }}</span> <span>{{ top.dataCount }}</span>
+              </p>
             </li>
           </ul>
         </a-card>
@@ -86,25 +88,34 @@
         <a-card title="留言数排行（前5）" :bordered="false">
           <ul class="topic-list">
             <li v-for="top in danmakuList" :key="top.dataKey">
-              <p><span>{{ top.dataKey }}</span> <span>{{ top.dataCount }}</span></p>
+              <p>
+                <span>{{ top.dataKey }}</span> <span>{{ top.dataCount }}</span>
+              </p>
             </li>
           </ul>
         </a-card>
       </a-col>
     </a-row>
 
-    <a-row>
+    <a-row style="margin-bottom: 20px">
       <a-col :span="24">
         <a-card title="各时间段在线人数">
           <div id="chart-1" class="chart"></div>
         </a-card>
       </a-col>
     </a-row>
+    <a-row>
+      <a-col :span="24">
+        <a-card title="房间使用情况">
+          <div id="chart-2" class="chart"></div>
+        </a-card>
+      </a-col>
+    </a-row>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted } from 'vue'
+import { computed, onMounted, watchEffect, unref } from 'vue'
 import Vue3Autocounter from 'vue3-autocounter'
 import * as echarts from 'echarts'
 import type { ECharts } from 'echarts'
@@ -115,36 +126,96 @@ const statisticStore = useStatisticStore()
 const takeLookList = computed(() => statisticStore.top5.takeLookList)
 const danmakuList = computed(() => statisticStore.top5.danmakuList)
 const heroStatus = computed(() => statisticStore.roomData)
+let onlineTimeChart: ECharts
+let roomUseChart: ECharts
 
 onMounted(async () => {
   await statisticStore.fetchTop()
   await statisticStore.fetchOnlineTimeCount()
   await statisticStore.fetchHeroStatus()
-  const chart1 = document.getElementById('chart-1')
-  let myChart: ECharts
-  if (chart1) {
-    myChart = echarts.init(chart1)
-    // 绘制图表
-    myChart.setOption({
-      title: { text: '总用户量' },
-      tooltip: {},
-      xAxis: {
-        data: ['12-3', '12-4', '12-5', '12-6', '12-7', '12-8']
-      },
-      yAxis: {},
-      series: [
-        {
-          name: '用户量',
-          type: 'line',
-          data: [5, 20, 36, 10, 10, 20]
-        }
-      ]
-    })
+  await statisticStore.fetchRoomVisitChart()
+  
+
+  const onelineTimeCount = computed(() => statisticStore.onlineTimeCount)
+
+  const initOnlineChart = () => {
+    const chart1 = document.getElementById('chart-1')
+    const data = unref(onelineTimeCount)
+    const xAxis = data.map(i => i.dataKey)
+    const yAxis = data.map(i => i.dataCount)
+    const max = Math.max.apply(Math, yAxis) + 200
+    const min =
+      Math.min.apply(Math, yAxis) === 0 ? 0 : Math.min.apply(Math, yAxis)
+    if (chart1) {
+      onlineTimeChart = echarts.init(chart1)
+      // 绘制图表
+      onlineTimeChart.setOption({
+        title: { text: '' },
+        tooltip: {},
+        xAxis: {
+          data: xAxis
+        },
+        yAxis: {
+          min: min,
+          max: max
+        },
+        series: [
+          {
+            name: '人数',
+            type: 'line',
+            smooth: true,
+            data: yAxis
+          }
+        ]
+      })
+    }
+  }
+
+  const initRoomUseChart = () => {
+    const chart1 = document.getElementById('chart-2')
+    const data = unref(onelineTimeCount)
+    const xAxis = data.map(i => i.dataKey)
+    const yAxis = data.map(i => i.dataCount)
+    const max = Math.max.apply(Math, yAxis) + 200
+    const min =
+      Math.min.apply(Math, yAxis) === 0 ? 0 : Math.min.apply(Math, yAxis)
+    if (chart1) {
+      onlineTimeChart = echarts.init(chart1)
+      // 绘制图表
+      onlineTimeChart.setOption({
+        title: { text: '' },
+        tooltip: {},
+        xAxis: {
+          data: xAxis
+        },
+        yAxis: {
+          min: min,
+          max: max
+        },
+        series: [
+          {
+            name: '人数',
+            type: 'line',
+            smooth: true,
+            data: yAxis
+          }
+        ]
+      })
+    }
   }
 
+  watchEffect(() => {
+    if (unref(onelineTimeCount)?.length) {
+      initOnlineChart()
+    }
+    if (unref(onelineTimeCount)?.length) {
+      initOnlineChart()
+    }
+  })
+
   window.onresize = function () {
     //自适应大小
-    myChart.resize()
+    onlineTimeChart.resize()
   }
 })
 </script>