echarts图自适应

echarts图在调节窗口大小的时候进行自适应

代码如下：

<template>
  <div id="echarts1"></div>
</template>
 
<script setup>
import * as echarts from "echarts";
onMounted(() => {
  initChart();
});
 

const initChart = () => {
  let xdata = [];
  let ydata = [];
  const machart = echarts.init(document.getElementById("echarts1"));
 
  var option = {
    color: ["#027bd3", "#1aaed3"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      bottom: "10%",
      textStyle: {
        color: "#fff",
      },
    },
    grid: {
      left: "3%",
      right: "6%",
      bottom: "25%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
      axisLabel: {
        color: "#fff",
      },
      splitLine: {
        lineStyle: {
          type: "dashed",
        },
      },
    },
    yAxis: {
      type: "category",
      data: ["热源01", "热源02", "热源03", "热源04", "热源05", "热源06"],
      axisLabel: {
        color: "#fff",
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          type: "dashed",
        },
      },
    },
    series: [
      {
        name: "供热量",
        type: "bar",
        data: [18203, 23489, 29034, 104970, 131744, 630230],
      },
    ],
  };
 
  machart.setOption(option);


//第一处
  setTimeout(() => {
    window.addEventListener("resize", resizeFn);
  }, 100);
  const resizeFn = () => {
    return machart.resize();
  };


//第二处
onBeforeUnmount(() => {
  // 离开页面必须进行移除，否则会造成内存泄漏，导致卡顿
  window.removeEventListener("resize", initChart);
});
 
 
};
defineExpose({
  initChart,
});
</script>
 
<style scoped>
#echarts1 {
  width: 100%;
  height: 35vh;
}
</style>

第一、

写到 machart.setOption(option);  下面的代码
machart.setOption(option);
    setTimeout(() => {
    window.addEventListener("resize", resizeFn);
  }, 100);
 const resizeFn = () => {
    return machart.resize();
  };

第二、 在生命钩子函数中移除
onBeforeUnmount(() => {

// 离开页面必须进行移除，否则会造成内存泄漏，导致卡顿

window.removeEventListener("resize", initChart);

});

 

二、字体自适应
补充一下，字体的自适应：

二、字体自适应
字体的自适应：

font-size: calc(100vw * 14/ 1920);

14就是你想要的字号，改14即可