<template>
  <div class="container-echart">
    <div :id="'echart' + timeId" class="interface-echart"></div>
  </div>
</template>
<script lang="ts" setup>
import * as echarts from "echarts";
import { EChartsType } from "echarts";
import { onMounted, ref, watch, onBeforeUnmount, nextTick } from "vue";

const props = defineProps({
  NamechartData: {
    // 柱形图x轴数据
    type: Array,
    default: true,
  },
  ArrOneData: {
    // 柱形图x轴数据
    type: Array,
    default: true,
  },
  ArrTwoData: {
    // 柱形图x轴数据
    type: Array,
    default: true,
  },
});

let myEchart: EChartsType;
const timeId = ref(Math.floor(new Date().getTime() * Math.random())); // 使该图表保持唯id
const myEchartData = () => {
  const option = {
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["翻转", "水浸", "水位"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: [
        "01",
        "02",
        "03",
        "04",
        "05",
        "06",
        "07",
        "08",
        "09",
        "12",
        "11",
        "12",
        "13",
        "14",
        "15",
        "16",
        "17",
        "18",
        "19",
        "20",
        "22",
        "22",
        "23",
        "24",
        "25",
        "26",
        "27",
        "28",
        "29",
        "30",
        "31",
      ],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "翻转",
        type: "bar",
        stack: "total",
        data: [
          2.0,
          4.9,
          7.0,
          23.2,
          25.6,
          76.7,
          135.6,
          162.2,
          32.6,
          20.0,
          6.4,
          3.3,
          2.0,
          4.9,
          7.0,
          23.2,
          25.6,
          76.7,
          135.6,
          162.2,
          32.6,
          20.0,
          6.4,
          3.3,
          2.0,
          4.9,
          7.0,
          23.2,
          25.6,
          76.7,
          135.6,
          162.2,
          32.6,
          20.0,
          6.4,
          3.3,
        ],
      },
      {
        name: "水浸",
        type: "bar",
        stack: "total",
        data: [
          2.6,
          5.9,
          9.0,
          26.4,
          28.7,
          70.7,
          175.6,
          182.2,
          48.7,
          18.8,
          6.0,
          2.3,
          2.0,
          4.9,
          7.0,
          23.2,
          25.6,
          76.7,
          135.6,
          162.2,
          32.6,
          20.0,
          6.4,
          3.3,
          2.0,
          4.9,
          7.0,
          23.2,
          25.6,
          76.7,
          135.6,
          162.2,
          32.6,
          20.0,
          6.4,
          3.3,
        ],
      },
      {
        name: "水位",
        type: "bar",
        stack: "total",
        data: [
          2.6,
          5.9,
          9.0,
          26.4,
          28.7,
          70.7,
          175.6,
          182.2,
          48.7,
          18.8,
          6.0,
          2.3,
          2.0,
          4.9,
          7.0,
          23.2,
          25.6,
          76.7,
          135.6,
          162.2,
          32.6,
          20.0,
          6.4,
          3.3,
          2.0,
          4.9,
          7.0,
          23.2,
          25.6,
          76.7,
          135.6,
          162.2,
          32.6,
          20.0,
          6.4,
          3.3,
        ],
      },
    ],
  };
  // { notMerge: true } 解决删除数据时,数据不刷新的问题
  myEchart.setOption(option, { notMerge: true });
};

watch(
  //监控数据变化
  () => props.NamechartData,
  () => {
    setTimeout(() => {
      myEchartData();
    }, 500);
  },
  { deep: true }
);

watch(
  //监控数据变化
  () => props.ArrOneData,
  () => {
    setTimeout(() => {
      myEchartData();
    }, 500);
  },
  { deep: true }
);

watch(
  //监控数据变化
  () => props.ArrTwoData,
  () => {
    setTimeout(() => {
      myEchartData();
    }, 500);
  },
  { deep: true }
);

onMounted(() => {
  setTimeout(() => {
    const dom = document.getElementById(`echart${timeId.value}`) as any;
    myEchart = echarts.init(dom);
    myEchartData();
  }, 500);

  // 当窗口发生变化时
  window.addEventListener("resize", () => {
    myEchart.resize();
  });
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", () => {
    myEchart.resize();
  });
});
</script>
<style scoped lang="scss">
.container-echart {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.interface-echart {
  width: 100%;
  height: 100%;
}
</style>
