便利贴--44{vue3+echarts+felx布局，解决实时应用echarts组件大小-只用了高度，宽度同理}

实现效果

通过监听等手段动态给echarts dom 修改高度

实现代码 片断

<Card
        :title="$t('assetAnalysis.monthlyNewAssets')"
        :msg="'（' + $t('assetAnalysis.dwwy') + '）'"
        id="ect1Main1"
      >
        <div id="ect1"></div>
      </Card>

实现逻辑：因为ect1Main1是flex：1，所以在获取其高度的时候要考虑到该dom填充需要时间，否则高度不真实，在传值到echarts高度之前，需要判断或者直接清空之前的高度，否者ect1Main1的高度永远是使用过程中最大的

onMounted(() => {
  initEct();
  addEventListen(window, "resize", usSize);
});

//初始化图形数据
const ourEct = {
  ect1: null,
  ect2: null,
};

//获取每个表的dom并初始化
const initEct = () => {
  for (let k in ourEct) {
    if (ourEct[k]) continue;
    let dom = document.getElementById(k);
    ourEct[k] = echarts.init(dom);
  }
  usSize();
};
//获取felx dom高度
const getDomHeight = (dom) => {
  if (!dom) return;
  return new Promise((re, rj) => {
    let doit = (dom) => {
      let m = document.querySelector(dom).querySelector(".main");
      console.log(m);
      if (m.clientHeight < 40 || !m) {
        setTimeout(() => {
          doit(dom);
        }, 200);
      } else {
        console.log(m.clientHeight, "m.clientHeightm.clientHeightm.clientHeight");
        re(m.clientHeight - 20);
        return;
      }
    };
    doit(dom);
  });
};
let time = null;
// 监听尺寸事件
const usSize = () => {
  if (!time) {
    //清除高度
    onResetEctSize();
    getDomHeight("#ect1Main1").then((res) => {
      console.log(res, document.getElementById("ect1"));
      getEct1(res + "px");
    });
    getDomHeight("#ect1Main2").then((res) => {
      console.log(res, document.getElementById("ect1"));
      getEct2(res + "px");
    });
    time = setTimeout(() => {
      clearTimeout(time);
      time = null;
    }, 200);
  }
};
//清除高度
const onResetEctSize = () => {
  for (let k in ourEct) {
    if (ourEct[k]?.resize) {
      ourEct[k].resize({ height: 0 });
    }
  }
};

const getEct1 = (heightChang) => {
  let option = {
    width: "auto",
    height: "auto",
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      top: "3%",
      containLabel: true,
    },
    tooltip: {
      trigger: "item",
    },
    // legend: {
    //   orient: "vertical",
    //   left: "left",
    // },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["68%", "90%"],
        label: {
          show: true,
          formatter: "{b} {d}%",
        },
        data: [
          { value: 5, name: "1", itemStyle: { color: "#F17474" } },
          { value: 18, name: "2", itemStyle: { color: "#EBA639" } },
          { value: 18, name: "3", itemStyle: { color: "#7E5AF5" } },
          { value: 21, name: "4", itemStyle: { color: "#66F9B0" } },
          { value: 65, name: "5", itemStyle: { color: "#3F91FB" } },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };
  ourEct.ect1.clear(); //清除画布，重新绘制的时候就不会遗留之前的数据，解决高度数据变化echarts高度不变问题
  ourEct.ect1.setOption(option);
  ourEct.ect1.resize({ height: heightChang }); //设置图表动态高度
};