1
<script setup lang="ts">
2
import type { ChartCountData } from '@/api/home'
3
import type { EChartsOptions } from '@/plugins/echarts'
4
import { HomeApi } from '@/api/home'
5

6
const chartRef = useTemplateRef('chartRef')
7

8
// 从接口获取的数据列表缓存
9
const originDataList = ref<ChartCountData[]>([])
10
// echarts显示的数据列表
11
const dataList = ref<ChartCountData[]>([])
12

13
// echarts配置，包含dataList
14
const options = computed<EChartsOptions>(() => ({
15
  ...options
16
}))
17

18
// useECharts hook
19
const { setOption } = useECharts(chartRef, options.value, {
20
  defaultInit: false,
21
})
22
// loading状态
23
const loading = ref(false)
24
// 轮播定时器
25
const timeout = ref<NodeJS.Timeout | null>(null)
26
// 轮播步数，用于计算echarts显示的数据列表
27
const step = ref(0)
28
// 图表显示数据数量
29
const chartCount = ref(6)
30

31
// 获取数据
32
async function getData() {
33
  try {
34
    loading.value = true
35
    // 从接口获取数据
36
    const { data } = await HomeApi.policeCount({
37
      codeValue: userStore.addressCode,
38
      days: durationType.value,
39
    })
40
    // 缓存
41
    originDataList.value = data
42
    // 重置步数
43
    step.value = 0
44
    await nextTick()
45
    // 重置定时器
46
    if (timeout.value) {
47
      clearInterval(timeout.value)
48
    }
49
    // 数据量小于等于图表显示数量时，直接赋值
50
    if (originDataList.value.length <= chartCount.value) {
51
      dataList.value = data
52
      setOption(options.value)
53
    } else {
54
      // 数据量大于图表显示数量时，按图表显示数量滑动
55
      dataList.value = originDataList.value.slice(step.value, chartCount.value)
56
      setOption(options.value)
57
      timeout.value = setInterval(() => {
58
        step.value++
59
        // 小于原始数据长度时直接切割
60
        if (step.value + chartCount.value <= originDataList.value?.length) {
61
          dataList.value = originDataList.value.slice(
62
            step.value,
63
            step.value + chartCount.value,
64
          )
65
        } else {
66
          // 否则补全前面的数据
67
          dataList.value = [
68
            ...originDataList.value.slice(step.value),
69
            ...originDataList.value.slice(
70
              0,
71
              chartCount.value - (originDataList.value.length - step.value),
72
            ),
73
          ]
74
          if (step.value === originDataList.value.length) {
75
            step.value = 0
76
          }
77
        }
78
        setOption(options.value)
79
      }, 3000)
80
    }
81
  } finally {
82
    loading.value = false
83
  }
84
}
85

86
onMounted(() => {
87
  getData()
88
})
89

90
onBeforeUnmount(() => {
91
  if (timeout.value) {
92
    clearInterval(timeout.value)
93
  }
94
})
95
</script>
96

97
<template>
98
  <div class="relative h-238px w-full">
99
    <div
100
      ref="chartRef"
101
      :class="{
102
        'op-0': !dataList?.length,
103
      }"
104
      class="size-full"
105
    ></div>
106
    <span
107
      v-if="!dataList?.length"
108
      class="absolute left-1/2 top-1/2 translate--1/2 text-14px"
109
    >
110
      暂无数据
111
    </span>
112
  </div>
113
</template>