jayq_vue_newbigdata/src/views/analyse/center/scenicDetailAnalyse.vue

<template>
  <div class="content">
    <!-- 标题区域 -->
    <div class="header">游客分析</div>
    <!-- 内容区域 -->
    <div class="box">
      <!-- 今日旅游人次区域 -->
      <div class="box_left">
        <div class="board">
          <div class="board_box">
            <div class="box_title">今日旅游人次</div>
            <div class="box_line"></div>
            <div class="box_num">
              <div class="num_list">
                <div
                  class="list_item"
                  ref="itemsNum"
                  v-for="(item, index) in todayNumList"
                  :key="index"
                  :data-value="item"
                >
                  {{ item }}
                </div>
              </div>
              <div class="num_text">人次</div>
            </div>
            <!-- <div class="box_rate">
              <div class="rate_key">较昨日</div>
              <div class="rate_value">+10.06%</div>
            </div> -->
          </div>
        </div>
      </div>
      <!-- 折线图区域 -->
      <div class="box_right">
        <!-- 选择时间区域 -->
        <div class="time">
          <div class="time_box">
            <div
              class="box_item"
              :class="{ active: currentIndex === index }"
              v-for="(item, index) in timeList"
              :key="index"
              @click="handleChangeIndex(index)"
            >
              {{ item }}
            </div>
          </div>
        </div>
        <!-- 折线图 -->
        <div class="chart" ref="lineChart"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from "vue";
import * as Echarts from "echarts";
import { countUpNum } from "@/utils/countUpNum.ts";
// 引入景区相关的接口
import {
  reqGetAllNumToday,
  reqGetAllNumByDay,
  reqGetAllNumByMonth,
  reqGetAllNumByYear,
} from "@/api/scenic/index";

// 选择时间数组
const timeList = ref(["日", "月", "年"]);
// 当前激活索引
const currentIndex = ref<number>(0);

// DOM元素数组
const itemsNum = ref();

// 今日旅游人次
const todayNum = ref(0);
const todayNumList = ref<any>([]);

// 图表x轴数据
const chartXdata = ref<any>([]);
// 图表y轴数据
const chartYdata = ref([]);

// 折线图DOM元素
const lineChart = ref(null);
// 图表实例
let myLineChart: any;

onMounted(() => {
  // 获取今日旅游人次数据
  getAllNumToday();
  // 获取图表数据
  getChartData();
});

// 获取今日旅游人次数据
const getAllNumToday = async () => {
  const res = await reqGetAllNumToday();
  // console.log(res);
  todayNum.value = res.data.num * 1;
  // 处理人次数据
  todayNumList.value = todayNum.value.toString().split("");
  // 让数字跳动
  getCountUpNum();
};

// 让数字跳动
const getCountUpNum = () => {
  nextTick(() => {
    itemsNum.value.forEach((ele: any) => {
      countUpNum(ele, ele.dataset.value);
    });
  });
};

// 获取图表数据
const getChartData = () => {
  if (currentIndex.value === 0) {
    // 近8日
    getAllNumByDay();
  } else if (currentIndex.value === 1) {
    // 近8月
    getAllNumByMonth();
  } else if (currentIndex.value === 2) {
    // 近8年
    getAllNumByYear();
  }
};

// 获取近8日旅游人次数据
const getAllNumByDay = async () => {
  const res = await reqGetAllNumByDay();
  // console.log(res);
  chartYdata.value = res.data.map((ele: any) => ele.num * 1);
  chartXdata.value = res.data.map((ele: any) => ele.dateTime.slice(-2) + "日");
  // 初始化折线图
  initLineChart();
};

// 获取近8月旅游人次数据
const getAllNumByMonth = async () => {
  const res = await reqGetAllNumByMonth();
  // console.log(res);
  chartYdata.value = res.data.map((ele: any) => ele.num * 1);
  chartXdata.value = res.data.map((ele: any) => ele.dateTime.slice(-2) + "月");
  // 初始化折线图
  initLineChart();
};

// 获取近8年旅游人次数据
const getAllNumByYear = async () => {
  const res = await reqGetAllNumByYear();
  // console.log(res);
  chartYdata.value = res.data.map((ele: any) => ele.num * 1);
  chartXdata.value = res.data.map((ele: any) => ele.dateTime + "年");
  // 初始化折线图
  initLineChart();
};

// 初始化折线图
const initLineChart = () => {
  myLineChart = Echarts.init(lineChart.value);
  // 折线图配置
  const options = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: "12%",
      right: "1%",
      top: "10%",
      bottom: "20%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: true,
      axisLabel: {
        color: "#fff",
        fontSize: 16,
        margin: 20,
      },
      data: chartXdata.value,
    },
    yAxis: {
      type: "value",
      name: "人次",
      nameTextStyle: {
        color: "#fff",
        fontSize: 16,
      },
      axisLabel: {
        color: "#fff",
        fontSize: 16,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: ["rgba(255, 255, 255, 0.15)"],
        },
      },
    },
    series: [
      {
        data: chartYdata.value,
        type: "line",
        smooth: true,
        color: "#1F92F6",
        tooltip: {
          valueFormatter: function (value: any) {
            return value + "人次";
          },
        },
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 1,
            x2: 0,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: "rgba(25, 104, 255, 0.2)",
              },
              {
                offset: 1,
                color: "rgba(54, 161, 255, 0.6)",
              },
            ],
          },
        },
      },
    ],
  };
  myLineChart.setOption(options);
};

// 切换选择时间时的回调
const handleChangeIndex = (index: number) => {
  currentIndex.value = index;
  // 销毁图表实例重新加载
  myLineChart.dispose();
  getChartData();
};
</script>

<style lang="scss" scoped>
.content {
  width: 986px;
  height: 545px;

  .header {
    padding-left: 44px;
    width: 986px;
    height: 48px;
    font-size: 28px;
    font-family: "庞门正道标题体";
    background-image: url(@/assets/images/scenicDetail-title-img.png);
    background-size: 100% 100%;
  }

  .box {
    display: flex;
    width: 986px;
    height: 497px;

    .box_left {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 324px;
      height: 497px;

      .board {
        width: 268px;
        height: 278px;
        background-image: url(@/assets/images/scenicDetail-board.png);
        background-size: 100% 100%;

        .board_box {
          margin: 59px 0 0 37px;
          padding-right: 28px;

          .box_title {
            font-size: 20px;
          }

          .box_line {
            margin: 24px 0;
            width: 174px;
            height: 4px;
            background-image: url(@/assets/images/news-list-bottomLine.png);
            background-size: 100% 100%;
          }

          .box_num {
            display: flex;
            justify-content: flex-end;
            align-items: end;
            height: 40px;

            .num_list {
              display: flex;
              overflow: hidden;

              .list_item {
                display: flex;
                justify-content: center;
                align-items: center;
                margin-right: 7px;
                width: 29px;
                height: 40px;
                font-size: 26px;
                color: #abd2ff;
                background-image: url(@/assets/images/scenicDetail-boardNum.png);
                background-size: 100% 100%;
              }
            }

            .num_text {
              margin-left: 5px;
              font-size: 12px;
            }
          }

          // .box_rate {
          //   display: flex;
          //   margin-top: 24px;
          //   font-size: 14.5px;

          //   .rate_key {
          //     margin-right: 8px;
          //   }

          //   .rate_value {
          //     color: #ffd15c;
          //     font-weight: bold;
          //   }
          // }
        }
      }
    }
    .box_right {
      width: 662px;
      height: 497px;

      .time {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        width: 662px;
        height: 90px;

        .time_box {
          display: flex;
          justify-content: space-evenly;
          align-items: center;
          width: 232px;
          height: 37px;
          border: 1px solid #9c9c9c;

          .box_item {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 71px;
            height: 30px;
            cursor: pointer;
            background-color: rgba(114, 151, 179, 0.5);
          }

          .active {
            background-color: rgba(112, 183, 250, 0.5);
          }
        }
      }
      .chart {
        width: 662px;
        height: 407px;
      }
    }
  }
}
</style>
@/utils/getNearDay