echarts图自适应+字体自适应

一、echarts自适应

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

代码：

  machart.setOption(option);
    setTimeout(() => {
    window.addEventListener("resize", resizeFn);
  }, 100);
 const resizeFn = () => {
    return machart.resize();
  };

写到 machart.setOption(option);  下面的代码

onBeforeUnmount(() => {
  // 离开页面必须进行移除，否则会造成内存泄漏，导致卡顿
  window.removeEventListener("resize", initChart);
});

一个方法~

整体来说就这两处

<template>
  <div id="echarts1"></div>
</template>

<script setup>
import * as echarts from "echarts";
onMounted(() => {
  initChart();
});

//第一处
onBeforeUnmount(() => {
  // 离开页面必须进行移除，否则会造成内存泄漏，导致卡顿
  window.removeEventListener("resize", 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();
  };


};
defineExpose({
  initChart,
});
</script>

<style scoped>
#echarts1 {
  width: 100%;
  height: 35vh;
}
</style>

上面是vue3写的，vue2就改一下

onBeforeUnmount() {
  // 离开页面必须进行移除，否则会造成内存泄漏，导致卡顿
  window.removeEventListener("resize", initChart);
});

二、字体自适应

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

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

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