BigScreen/src/views/home/leftbox/middleBox.vue

<template>
  <div class="left-top-box">
    <ul class="flex justify-end gap-15px mb-15px absolute right-15px z-10">
      <li
        :class="[
          'w-50px cursor-pointer text-center b-solid b-1px b-color-#389bff hover:b-color-#FAC858',
          i === selectedI ? 'b-color-#FAC858' : ''
        ]"
        v-for="(item, i) in options"
        :key="item.code"
        @click="dayClick(i)"
      >
        <span class="text-12px">{{ item.name }}</span>
      </li>
    </ul>
    <ECharts
      id="xwjc-echarts"
      ref="echartsRef"
      width="100%"
      height="276px"
      :loading="loading"
      :fullOptions="fullOptions"
    />
  </div>
</template>

<script setup>
  import { chartOptions } from '@/components/ECharts/optionsConfig'

  const loading = ref(true)
  const echartsRef = ref(null)
  let timer = null

  let xData = [],
    yData1 = [],
    yData2 = [],
    yData3 = [],
    yData4 = []
  const fullOptions = ref({ options: {} })

  const selectedI = ref(0)
  const options = ref([
    { name: '当日', code: 0 },
    { name: '近一周', code: 1 },
    { name: '近一月', code: 2 }
  ])
  const dayClick = (v) => {
    selectedI.value = v
    switch (v) {
      case 0: {
        const xPoint = []
        for (let i = 0; i < 10; i++) {
          let currentTime = new Date().getTime() - 3600 * 1000 * i
          let time = new Date(currentTime).toLocaleTimeString()
          xPoint.push(time)
        }
        xData = xPoint
        for (let i = 0; i < xData.length; i++) {
          const curData1 = [],
            curData2 = [],
            curData3 = [],
            curData4 = []
          for (let j = 0; j < 10; j++) {
            curData1.push(Math.floor(Math.random() * 100))
            curData2.push(Math.floor(Math.random() * 100))
            curData3.push(Math.floor(Math.random() * 100))
            curData4.push(Math.floor(Math.random() * 100))
          }
          ;[yData1, yData2, yData3, yData4] = [curData1, curData2, curData3, curData4]
        }
        break
      }
      case 1: {
        const xPoint = []
        for (let i = 0; i < 7; i++) {
          // 修改循环次数为7
          let currentTime = new Date().getTime() - 24 * 3600 * 1000 * i // 修改为每天减少一天的时间
          let time = new Date(currentTime).toLocaleDateString() // 使用 toLocaleDateString 获取日期部分
          xPoint.push(time)
        }
        xData = xPoint

        for (let i = 0; i < xData.length; i++) {
          const curData1 = [],
            curData2 = [],
            curData3 = [],
            curData4 = []
          for (let j = 0; j < 7; j++) {
            curData1.push(Math.floor(Math.random() * 100))
            curData2.push(Math.floor(Math.random() * 100))
            curData3.push(Math.floor(Math.random() * 100))
            curData4.push(Math.floor(Math.random() * 100))
          }
          ;[yData1, yData2, yData3, yData4] = [curData1, curData2, curData3, curData4]
        }
        break
      }

      case 2: {
        const xPoint = []
        for (let i = 0; i < 30; i++) {
          // 修改循环次数为30
          let currentTime = new Date().getTime() - 24 * 3600 * 1000 * i // 修改为每天减少一天的时间
          let time = new Date(currentTime).toLocaleDateString() // 使用 toLocaleDateString 获取日期部分
          xPoint.push(time)
        }
        xData = xPoint
        for (let i = 0; i < xData.length; i++) {
          const curData1 = [],
            curData2 = [],
            curData3 = [],
            curData4 = []
          for (let j = 0; j < 30; j++) {
            curData1.push(Math.floor(Math.random() * 100))
            curData2.push(Math.floor(Math.random() * 100))
            curData3.push(Math.floor(Math.random() * 100))
            curData4.push(Math.floor(Math.random() * 100))
          }
          ;[yData1, yData2, yData3, yData4] = [curData1, curData2, curData3, curData4]
        }
        break
      }
    }
    const options = chartOptions.setXwjcOption(xData, yData1, yData2, yData3, yData4)
    if (v === 2) {
      options.xAxis[0].axisLabel.rotate = 0
      fullOptions.value.options = Object.assign(options, {
        dataZoom: [
          {
            type: 'slider',
            start: 0,
            end: 10,
            showDataShadow: false,
            height: 20,
            width: '80%',
            top: '14%'
          }
        ]
      })
    } else {
      fullOptions.value.options = options
    }
  }

  const moveShow = () => {
    let count = 0
    let dataLength = yData4.length
    timer && clearInterval(timer)
    timer = setInterval(() => {
      echartsRef.value.myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 1
      })
      echartsRef.value.myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 1,
        dataIndex: count % dataLength
      })
      echartsRef.value.myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 1,
        dataIndex: count % dataLength
      })
      count++
    }, 2000)
  }

  onMounted(() => {
    setTimeout(() => {
      loading.value = false
      dayClick(selectedI.value)
      moveShow()
    }, 1000)
  })

  onBeforeUnmount(() => {
    clearInterval(timer)
  })
</script>

<style scoped lang="scss">
  .box-style {
    background: url('@/assets/images/box-bg.png') no-repeat center;
    background-size: 100% 100%;
  }
  .left-top-box {
    :deep(.swiper) {
      width: 100%;
      height: 300px;
      .swiper-slide {
        height: 100%;
      }
      .swiper-pagination {
        --swiper-pagination-bottom: -5px;
      }
      .swiper-pagination-bullet {
        --swiper-pagination-bullet-width: 20px;
        --swiper-pagination-bullet-height: 4px;
        border-radius: 0;
      }
    }
  }
</style>