首页 前端知识 echarts图自适应 字体自适应

echarts图自适应 字体自适应

2024-02-09 20:02:20 前端知识 前端哥 363 987 我要收藏
一、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即可了哈

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1626.html
标签
评论
发布的文章

CSS样式变换效果及动画

2024-02-23 11:02:51

实现 抽屉效果 css3

2024-02-23 11:02:47

jQuery (JavaScript)进阶使用

2024-02-23 11:02:59

CSS样式

2024-02-23 11:02:49

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!