vue3 页面尺寸改变 Echarts自适应大小

<template>
  <div class="area_car_container height_full">
    <div class="diff back" ref="areaCarRef"></div>
  </div>
</template>

<script setup>
import myTitle from "@/views/warehouse/components/title.vue";
import { getAreaCar, getCarAreaIds } from "@/api/main";
import { ref, reactive, onMounted, onUnmounted, nextTick } from "vue";
import img2 from "@/assets/warehouse/icon/circle.png";

const { proxy } = getCurrentInstance();
const areaCarRef = ref(null);
let chart = null;
/**
 * 数据部分
 */
const data = reactive({
  timer: null,
  groceriesId: null,
  coalId: null,
  oilId: null,
  
  areaCar: [
    {
      name: "港区",
      value: 0,
      color: "rgba(0,0,0,0)",
      colorList: ["rgba(31,102,192,0.8)", "#2e78eca8"],
    },
    {
      name: "化工区",
      value: 0,
      color: "rgba(0,0,0,0)",
      colorList: ["rgba(253, 167, 223,0.8)", "#ff9ff3"],
    },
    {
      name: "杂货区",
      value: 0,
      color: "rgba(0,0,0,0)",
      colorList: ["rgba(212, 191, 144,0.8)", "#bdaa80"],
    },
    {
      name: "煤炭区",
      value: 0,
      color: "rgba(0,0,0,0)",
      colorList: ["rgba(163, 203, 56,0.8)", "#7b992a"],
    },
  ],
});

const getInfo = () => {
  getAreaCar().then((res) => {
    const { total, oil, coal, groceries, coalId, oilId, groceriesId } =
        res.data.carNumMonitor,
      array = [total, oil, groceries, coal];
    data.groceriesId = groceriesId;
    data.coalId = coalId;
    data.oilId = oilId;
    data.areaCar.forEach((item, index) => {
      item.value = array[index];
    });

    if (chart) {
      updateChart();
    } else {
      nextTick(() => {
        initChart();
      });
    }
  });
};

// 初始化定时器
const initTimer = () => {
  getInfo();
  if (data.timer) clearInterval(data.timer);
  data.timer = setInterval(() => {
    getInfo();
  }, 1000 * 15);
};
initTimer();

// 初始化echarts
const initChart = () => {
  chart = proxy.$echarts.init(areaCarRef.value);

  const datas = computedData(),
    option = {
      grid: {
        show: false,
        top: 10,
        bottom: 10,
      },
      xAxis: [
        {
          gridIndex: 0,
          type: "value",
          show: false,
          min: 0,
          max: 100,
          nameLocation: "middle",
          nameGap: 5,
        },
      ],
      yAxis: [
        {
          gridIndex: 0,
          min: 0,
          show: false,
          max: 100,
          nameLocation: "middle",
          nameGap: 30,
        },
      ],
      series: [
        {
          type: "scatter",
          symbol: "circle",
          symbolSize: 120,
          label: {
            normal: {
              show: true,
              formatter: "{b}",
              color: "#fff",
              textStyle: {
                fontSize: "20",
              },
            },
          },
          animationDurationUpdate: 1000,
          animationEasingUpdate: 1000,
          animationDelay: function (idx) {
            // 越往后的数据延迟越大
            return idx * 100;
          },
          itemStyle: {
            normal: {
              color: "#00acea",
            },
          },
          data: datas,
        },
      ],
      graphic: [
        {
          type: "image",
          id: "logo1",
          left: "32%",
          bottom: "10%",
          z: -10,
          bounding: "raw",
          origin: [76, 76],
          style: {
            image: img2,
            width: 50,
            height: 50,
            opacity: 0.4,
          },
        },
        {
          type: "image",
          id: "logo2",
          left: "40%",
          bottom: "35%",
          z: -10,
          bounding: "raw",
          origin: [76, 76],
          style: {
            image: img2,
            width: 90,
            height: 90,
            opacity: 0.4,
          },
        },
      ],
    };

  chart.setOption(option);

  chart.on("click", (params) => {
    let param = {
      type: 1,
    };
    const { dataIndex } = params,
      { coalId, oilId, groceriesId, type } = data, 
      objFun = {
        0: () => {
          param.id = 99;
        },
        1: () => {
          param.id = oilId;
        },
        2: () => {
          param.id = groceriesId;
        },
        3: () => {
          param.id = coalId;
        },
      };
    if (objFun[dataIndex]) objFun[dataIndex]();
    if (dataIndex == 0) {
    } else {
      getCarAreaIds(param).then((res) => {});
    }
  });
};

// 更新echarts
const updateChart = () => {
  const datas = computedData(),
    option = chart.getOption();
  option.series[0].data = datas;

  chart.setOption(option);
};

// 生成echarts数据
const computedData = () => {
  // 偏移量
  const offsetData = [
      [80, 55],
      [35, 73],
      [15, 33],
      [60, 23],
    ],
    // symbolSize 散点气泡大小
    symbolSizeData = [130, 115, 100, 85],
    datas = data.areaCar.map((item, index) => {
      return {
        name: item.name + "\n\n" + item.value + "辆",
        value: offsetData[index],
        symbolSize: symbolSizeData[index],
        label: {
          normal: {
            textStyle: {
              fontSize: 16,
            },
          },
        },
        itemStyle: {
          normal: {
            color: {
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              type: "linear",
              global: false,
              colorStops: [
                {
                  offset: 0,
                  color: item.color,
                },
                {
                  offset: 0.8,
                  color: item.colorList[0],
                },
              ],
              opacity: 0.8,
              shadowColor: item.colorList[1],
              shadowBlur: 10,
              shadowOffsetX: 1,
              shadowOffsetY: 1,
            },
          },
        },
      };
    });
  return datas;
};

onMounted(() => {
  // 监听窗口大小变化并更新图表大小
  window.addEventListener("resize", () => {
    if (chart) chart.resize();
  });
});

onUnmounted(() => {
  if (data.timer) clearInterval(data.timer);
  if (chart) chart.dispose();
});
</script>
<style scoped lang="scss"></style>