khyznh-ui/src/components/HomeStatics/lineEcharts.vue

<template>
  <div class="lineEchartsClass" style="padding-left: 1vw;padding-top: 1.5vh;">
    <div class="title">七日趋势</div>
    <div ref="linechart" style="width:100%;height: 90%;"></div>
  </div>
</template>
<script setup name="Index" lang="ts">
import * as echarts from 'echarts';

const linechart = ref();
import { getpassenger } from "@/api/data"

const drawEchart = (kldata,hldata) => {
  let echartsObj = echarts.init(linechart.value, "macarons");
  var dateArray = getRecentDays();
  var option = {
    legend: {
      top: '2%',
      left: 'center',
      textStyle: {
        color: '#000000'
        // ...
      }
    },
    color: ['#3a9ede', '#2ACB97'],
    grid: {
      top: "15%",
      left: "3%",
      right: "8%",
      bottom: "11%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: dateArray,
      axisLine: {
        show: true,
        lineStyle: {
          color: "#353b5a",
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        // rotate: 60,
        textStyle: {
          color: "#000000"
        },
      },
    },
    yAxis: {
      show: false,
      type: "value",
      nameTextStyle: {
        color: "#000000",
        padding: [0, 0, 0, -35],
      },
      name: "数量",
      axisLine: {
        show: true,
        lineStyle: {
          color: "#48A7EF",
        },
      },
      axisLabel: {
        textStyle: {
          color: "#fff",
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        lineStyle: {
          color: "#353b5a",
        },
      },
    },
    series: [
      {
        name: "客流趋势",
        type: "line",
        data: kldata,
        smooth: false,
        symbol: 'circle',
        itemStyle: {
          normal: {
            color: "#ffffff",
            borderColor: '#3a9ede',
            borderWidth: 1,
          }
        },
        lineStyle: {
          color: "#3a9ede",
          width: 2,
        },
        areaStyle: {
          color: {
            x: 0,
            y: 1,
            x2: 0,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: "rgba(72, 167, 239, 0.1)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(72, 167, 239, 0.7)", // 100% 处的颜色
              },
            ],
          },
        },
      },
      {
        name: "货流趋势",
        type: "line",
        data: hldata,
        smooth: false,
        symbol: 'circle',
        itemStyle: {
          normal: {
            color: "#ffffff",
            borderColor: '#2ACB97',
            borderWidth: 1,
          }
        },
        lineStyle: {
          color: "#2ACB97",
          width: 2,
        },
        areaStyle: {
          color: {
            x: 0,
            y: 1,
            x2: 0,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: "rgba(42, 203, 151, 0.1)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(42, 203, 151, 0.7)", // 100% 处的颜色
              },
            ],
          },
        },
      },
    ],
  }
  echartsObj.setOption(option);
}

const getRecentDays = () => {
  const oneDay = 24 * 60 * 60 * 1000; // 这里定义一天的毫秒数
  const resultArray = [];
  for (let i = 6; i >= 0; i--) {
    const currentDate = new Date(Date.now() - i * oneDay); // 计算出每天的日期
    const year = currentDate.getFullYear();
    const month = String(currentDate.getMonth() + 1).padStart(2, "0"); // 月份需要补零
    const day = String(currentDate.getDate()).padStart(2, "0"); // 日期也需要补零
    const formattedDate = `${month}-${day}`; // 格式化日期为 yyyy-mm-dd 的形式
    resultArray.push(formattedDate);
  }
  return resultArray;
}


const getpassengerData = () =>{
  getpassenger().then(res=>{
      console.log(res)
      var date = [];
      var kldata = [];
      var hldata = [];
      for(var index in res.data){
           if(index > 0){
            date.push(res.data[index].end);
            kldata.push(res.data[index].flowCount.incount + res.data[index].flowCount.outcount)
            hldata.push(res.data[index].goodsOrderCount.ordercount)
           }
      }
      drawEchart(kldata,hldata)
  })
}

onMounted(() => {
  getpassengerData();
})
</script>
<style>
.lineEchartsClass {
  height: 28vh;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 8px 8px 8px 8px;
  box-shadow: 6px 6px 6px 6px rgba(0, 0, 0, 0.3);

  .title {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: bold;
    font-size: 20px;
    color: #000000;
    line-height: 24px;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
}
</style>