echarts gráfico adaptável + fonte adaptável

1. gráficos eletrônicos adaptativos

O gráfico echarts é adaptável ao ajustar o tamanho da janela

código:

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

Escreva machart.setOption(opção); abaixo do código

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

de uma maneira ~

No geral, esses dois

<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>

O texto acima foi escrito por vue3, basta alterá-lo para vue2

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

2. Fonte adaptável

Para adicionar, adaptação de fonte:

tamanho da fonte: calc(100vw * 14/1920);

14 é o tamanho da fonte que você deseja, basta alterá-lo para 14