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

<template>
  <div class="content">
    <!-- 标题区域 -->
    <div class="header">游客近8小时趋势走势</div>

    <!-- 内容区域 -->
    <div class="box" ref="lineChart"></div>
  </div>
</template>

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

// 折线图DOM元素
const lineChart = ref(null);

// 昨日数据
const yesterdayData = ref([]);
// 今日数据
const todayData = ref([]);
// x轴时间数据
const timeData = ref([]);

onMounted(() => {
  // 获取游客人数今日12小时趋势
  getHourByToday();
  // 获取游客人数昨日12小时趋势
  getHourByYesterday();
});

// 获取游客人数今日12小时趋势
const getHourByToday = async () => {
  const res = await reqGetHourByToday();
  // console.log(res);
  todayData.value = res.data.map((ele: any) => ele.num * 1);
};

// 获取游客人数昨日12小时趋势
const getHourByYesterday = async () => {
  const res = await reqGetHourByYesterday();
  // console.log(res);
  timeData.value = res.data.map((ele: any) => ele.dateTime.slice(-2) + ":00");
  yesterdayData.value = res.data.map((ele: any) => ele.num * 1);

  nextTick(() => {
    // 初始化折线图
    initLineChart();
  });
};

// 初始化折线图
const initLineChart = () => {
  let myLineChart = Echarts.init(lineChart.value);
  // 折线图配置
  const options = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "line",
        lineStyle: {
          color: "#fff",
          type: "solid",
        },
      },
    },
    legend: {
      top: 40,
      right: 20,
      icon: "roundRect",
      data: ["今日", "昨日"],
      textStyle: {
        color: "#fff",
      },
    },
    grid: {
      left: "0%",
      right: "10%",
      top: "25%",
      bottom: "5%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      name: "小时",
      nameTextStyle: {
        color: "#fff",
        fontSize: 14,
      },
      boundaryGap: true,
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "#7AADFF",
        fontSize: 14,
      },
      data: timeData.value.slice(0, 8).reverse(),
    },
    yAxis: {
      type: "value",
      name: "人数",
      nameTextStyle: {
        color: "#fff",
        fontSize: 14,
      },
      // min: 30,
      // max: 100,
      axisLabel: {
        color: "#fff",
        fontSize: 14,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: ["rgba(32, 121, 160, 0.5)"],
        },
      },
    },
    series: [
      {
        name: "今日",
        type: "line",
        smooth: true,
        symbol: "none",
        itemStyle: {
          color: "#F2B949",
        },
        tooltip: {
          valueFormatter: function (value: any) {
            return value + "人";
          },
        },
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 1,
            x2: 0,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: "rgba(242,185,73, 0.2)",
              },
              {
                offset: 1,
                color: "rgba(154, 161, 255, 0.6)",
              },
            ],
          },
        },
        data: todayData.value.slice(0, 8),
      },
      {
        name: "昨日",
        type: "line",
        smooth: true,
        symbol: "none",
        itemStyle: {
          color: "#0368FF",
        },
        tooltip: {
          valueFormatter: function (value: any) {
            return value + "人";
          },
        },
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 1,
            x2: 0,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: "#2B63CE",
              },
              {
                offset: 1,
                color: "#2B63CE",
              },
            ],
          },
        },
        data: yesterdayData.value.slice(0, 8),
      },
    ],
  };
  myLineChart.setOption(options);
};
</script>

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

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

  .box {
    width: 484px;
    height: 442px;
  }
}
</style>