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

<template>
  <div class="lineEchartsClass">
    <div class="titleBg">
      <div class="titleFont">驿站库存量</div>
    </div>
    <div
      class="divContent"
      style="
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
      "
    >
      <div ref="linechart" style="width: 100%; height: 90%"></div>
    </div>
  </div>
</template>
<script setup name="Index" lang="ts">
import * as echarts from "echarts";
import moment from "moment";

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

const drawEchart = (arryData, total) => {
  let echartsObj = echarts.init(linechart.value, "macarons");
  var dateArray = getRecentDays();
  var option = (option = {
    title: [
      {
        text: "总数",
        subtext: total + "",
        textStyle: {
          fontSize: 15,
          color: "#fff",
        },
        subtextStyle: {
          fontSize: 20,
          color: "#fff",
        },
        textAlign: "center",
        x: "48%",
        y: "35%",
      },
    ],
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["40%", "70%"],
        labelLine: {
          // length2: 55,
          length: 15,
          length2: 85,
          lineStyle: {
            // type: "dashed",
            width: 2,
          },
        },
        label: {
          position: "outer",
          alignTo: "none",
          bleedMargin: 15,
          color: "#fff",
          formatter: " {b}\n{a|{c}}",
          padding: -85,
          rich: {
            a: {
              padding: [18, 0, 5, 0],
              fontSize: 14,
              color: "#fff",
              lineHeight: 20,
            },
            b: {
              padding: [18, 0, 5, 0],
              lineHeight: 20,
            },
          },
        },
        data: arryData,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  });
  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 getbagCountData = () => {
  var param = {
    beginCreatedAt: moment().format("YYYY-MM-DD 00:00:00"),
  };
  var obj = {
    params: param,
    pageSize: 1000,
  };
  bagCount(obj).then((res) => {
    console.log(res);
    var rkCount = 0;
    var ckCount = 0;
    var ycCount = 0;
    var clCount = 0;
    var total = res.total;
    for (var index in res.rows) {
      if (res.rows[index].bagStatus == 0) {
        rkCount++;
      } else if (res.rows[index].bagStatus == 1) {
        ckCount++;
      } else if (res.rows[index].bagStatus == 2) {
        ycCount++;
      } else if (res.rows[index].bagStatus == 3) {
        clCount++;
      }
    }
    var arryData = [
      { value: rkCount, name: "入库" },
      { value: ckCount, name: "出库" },
      { value: ycCount, name: "异常" },
      { value: clCount, name: "已处理" },
    ];
    drawEchart(arryData, total);
  });
};

onMounted(() => {
  getbagCountData();
});
</script>
<style scoped lang="scss">
.lineEchartsClass {
  height: 28vh;
  min-width: 400px;
  .titleBg {
    background: url("@/assets/images/homeImages/titleBg.png") no-repeat;
    background-size: 100% 100%;
  }

  .titleFont {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 18px;
    color: #ffffff;
    line-height: 4vh;
    text-shadow: 0px 4px 0px rgba(10, 40, 95, 0.69);
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-left: 2vw;
    letter-spacing: 5px;
  }

  .divContent {
    background: url("@/assets/images/homeImages/contentBg.png") no-repeat;
    background-size: 100% 100%;
    width: 20vw;
    height: 22vh;
    min-width: 400px;
  }
}
</style>