自变化折线图（两周数据）

<template>
  <div id="main" @mouseenter="ClearInterval" @mouseleave="SetInterval"></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
const timerData = ref<string[]>([]);
const seriesData = ref<string[]>([]);
const seriesData2 = ref<string[]>([]);
let changeBaseLibrary: any = null;
let myChart: any;
let num = 0;
const MyCharts = () => {
  myChart = echarts.getInstanceByDom(document.getElementById("main") as HTMLDivElement);
  if (myChart == null) {
    myChart = echarts.init(document.getElementById("main") as HTMLDivElement);
  }
  var option;
  option = {
    title: {
      // text: '数据合规态势'
    },
    grid: {
      show: false,
      top: "20%", // 一下数值可为百分比也可为具体像素值
      right: "5%",
      bottom: "15%",
      left: "10%",
    },
    tooltip: {
      trigger: "axis",
      textStyle: {
        // 提示框浮层的文本样式。
        color: "#000",
        align: "left",
      },
    },
    color: ["#98c0fd", "#ff0000"],
    legend: {
      icon: "stack",
      data: ["合规风险", "合规隐患"],
      textStyle: {
        color: "#fff",
      },
      itemHeight: 7,
      left: 150,
      top: 10
    },
    xAxis: {
      type: "category",
      data: timerData.value,
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: "#00d4fe",
        },
      },
      axisLabel: {
        color: "#fff",
        interval: 0,
      },
    },
    yAxis: {
      name: " 单位: 个",
      nameTextStyle: {
        color: "#fff",
        fontSize: "13",
        fontWeight: "800",
        padding: [0, 0, -2, 0]
      },
      type: "value",
      axisLabel: {
        color: "#fff",
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#00d4fe",
        },
      },
      splitLine: {
        lineStyle: {
          // 设置背景横线
          type: "dashed",
          color: "#00d4fe",
        },
      },
    },
    series: [
      {
        name: "合规风险",
        data: seriesData.value,
        type: "line",
        smooth: true,
        showSymbol: false,
      },
      {
        name: "合规隐患",
        data: seriesData2.value,
        type: "line",
        smooth: true,
        showSymbol: false,
      },
    ],
  };

  option &&
    myChart.setOption(option, {
      notMerge: true, //不和之前的option合并
    });
};
onMounted(() => {
  getNowFormatDate();
  setTimeout(() => {
    if (num >= 9) {
      SetInterval();
    }
  }, 200);
  // 监听页面的大小
  window.addEventListener("resize", () => {
    myChart.resize();
  });
});
let date = new Date();
let year: number | string = date.getFullYear();
let month: number | string = date.getMonth() + 1;
let strDate: number | string = date.getDate();
let day = strDate;
let count = 0;
const getNowFormatDate = () => {
  num++;
  if (num != 1 && num != 2) {
    count++;
    if (day >= 1) {
      day--;
    }
  }
  if (count <= 14) {
    if (day < 1) {
      day = getCurrentMonthLast((month > 1 ? year : (year as number) -= 1) + '-' + (month > 1 ? (month as number) -= 1 : month = 12));
    }
  } else {
    year = date.getFullYear();
    month = date.getMonth() + 1;
    day = strDate as number;
    count = 0;
  }

  seriesData.value.push(`${Math.ceil(Math.random() * 150)}`);
  seriesData2.value.push(`${Math.ceil(Math.random() * 150)}`);
  timerData.value.push(year + "." + month + "." + day);

  num < 10 && setTimeout(getNowFormatDate, 10);
  num >= 10 && deleteFirst();
  MyCharts();
};
const deleteFirst = () => {
  seriesData.value.shift();
  seriesData2.value.shift();
  timerData.value.shift();
};
// 关闭计时器
const ClearInterval = () => {
  clearInterval(changeBaseLibrary);
  changeBaseLibrary = null;
};
// 启动计时器
const SetInterval = () => {
  changeBaseLibrary = setInterval(getNowFormatDate, 3000);
};
// 获取指定月的最后一天
const getCurrentMonthLast = (date) => {
  let endDate = new Date(date); //date 是需要传递的时间如：2018-08
  let month = endDate.getMonth();
  let nextMonth = ++month;
  let nextMonthFirstDay = new Date(endDate.getFullYear(), nextMonth, 1);
  let dateString = new Date(nextMonthFirstDay.setDate(nextMonthFirstDay.getDate() - 1));
  return dateString.getDate();
};
</script>
<style lang="scss" scoped>
#main {
  width: 100%;
  height: 90%;
  margin: 0 auto;
}
</style>