shop-back/src/views/statistic/tab/tab1.vue

<template>
  <div>
    <a-row
      class="container status-number"
      type="flex"
      justify="center"
      align="middle"
    >
      <a-col :span="6">
        <div class="status-item">
          <span class="label">带看房间</span>
          <!-- <span class="number">80</span> -->
          <vue3-autocounter
            ref="counter"
            class="number"
            :startAmount="0"
            :endAmount="2021"
            :duration="2"
            separator=","
            decimalSeparator="."
            :decimals="0"
            :autoinit="true"
          />
        </div>
      </a-col>
      <a-col :span="6">
        <div class="status-item">
          <span class="label">访问总人数</span>
          <vue3-autocounter
            ref="counter"
            class="number"
            :startAmount="0"
            :endAmount="11122"
            :duration="2"
            separator=","
            decimalSeparator="."
            :decimals="0"
            :autoinit="true"
          />
        </div>
      </a-col>
      <a-col :span="6">
        <div class="status-item">
          <span class="label">访问总次数</span>
          <vue3-autocounter
            ref="counter"
            class="number"
            :startAmount="0"
            :endAmount="222225"
            :duration="2"
            separator=","
            decimalSeparator="."
            :decimals="0"
            :autoinit="true"
          />
        </div>
      </a-col>
      <a-col :span="6">
        <div class="status-item">
          <span class="label">访问总次数</span>
          <vue3-autocounter
            ref="counter"
            class="number"
            :startAmount="0"
            :endAmount="222225"
            :duration="2"
            separator=","
            decimalSeparator="."
            :decimals="0"
            :autoinit="true"
          />
        </div>
      </a-col>
    </a-row>

    <a-row>
      <div class="container">
        <div id="chart-1" class="chart"></div>
      </div>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted } from 'vue'
import Vue3Autocounter from 'vue3-autocounter'
import * as echarts from 'echarts'
import type { ECharts } from 'echarts'
onMounted(() => {
  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]
        }
      ]
    })
  }

  window.onresize = function () {
    //自适应大小
    myChart.resize()
  }
})
</script>
<style lang="less">
.status-number {
  .status-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .label {
      font-size: 14px;
      font-weight: 400;
      color: #969799;
      line-height: 16px;
    }
    .number {
      font-size: 24px;
      font-weight: bold;
      color: #323233;
      line-height: 28px;
    }
  }
}
.container {
  background-color: #fff;
  padding: 25px;
  width: 100%;
  margin-bottom: 25px;
}
.chart {
  width: 100%;
  min-height: 500px;
}
</style>