【vue3+highCharts】图表及字体大小自适应

创建文件 resize.js

// resize.js
import { ref, onMounted, onUnmounted } from 'vue';

export function useResize(initChartFn) {
  const debounce = (func, wait, immediate) => {
    let timeout, args, context, timestamp, result;

    const later = function () {
      // 据上一次触发时间间隔
      const last = +new Date() - timestamp;

      // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
      if (last < wait && last > 0) {
        timeout = setTimeout(later, wait - last);
      } else {
        timeout = null;
        // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
        if (!immediate) {
          result = func.apply(context, args);
          if (!timeout) context = args = null;
        }
      }
    };

    return function (...args) {
      context = this;
      timestamp = +new Date();
      const callNow = immediate && !timeout;
      // 如果延时不存在，重新设定延时
      if (!timeout) timeout = setTimeout(later, wait);
      if (callNow) {
        result = func.apply(context, args);
        context = args = null;
      }

      return result;
    };
  }
  const clientWidth = ref(
    window.innerWidth ||
    document.documentElement.clientWidth ||
    document.body.clientWidth
  );

  // 计算字体大小的函数
  const fontSizeRem = (res) => {
    if (!clientWidth.value) return;
    let fontSize = 100 * (clientWidth.value / 1920);
    return res * fontSize;
  };

  // 窗口大小改变时的处理函数
  const handleResize = debounce(() => {
    clientWidth.value =
      window.innerWidth ||
      document.documentElement.clientWidth ||
      document.body.clientWidth;
    if (typeof initChartFn === 'function') {
      initChartFn();
    }
  }, 500);

  onMounted(() => {
    window.addEventListener('resize', handleResize);
  });

  onUnmounted(() => {
    window.removeEventListener('resize', handleResize);
  });

  return {
    clientWidth,
    fontSizeRem,
    updateChart: initChartFn, // 提供给外部调用的方法，用于重新绘制图表
  };
}

父组件引用 chart1.vue

<template>
  <div class="w100 h100" id="container1"></div>
</template>

<script setup>
import { useResize } from "./mixins/resize_test";
import {
  ref,
  reactive,
  toRefs,
} from "vue";
import { useRoute, useRouter } from "vue-router";
import Highcharts from "highcharts"; //必须引入
import Highcharts3D from "highcharts/highcharts-3d"; // 3D必须有引入
import variablePie from "highcharts/modules/variable-pie";
// 初始化 variablepie 模块
variablePie(Highcharts);
Highcharts3D(Highcharts);

const props = defineProps({
  themeColors: {
    type: Array,
    default: [
      "#2ab6ee",
      "#1189ff",
      "#bd78fa",
      "#f78722",
      "#0df7fe",
      "#f7c824",
      "#6605ff",
      "#d67f0b",
    ],
  },
});

/**
 * 数据部分
 */
const data = reactive({});
let dataCount = ref([]);
let initChart = () => {
  Highcharts.setOptions({
    colors: props.themeColors,
  });
  Highcharts.chart(
    "container1",
    {
     // ...你的图表配置
      tooltip: {
        headerFormat: "<span>{point.key}</span><br/>",
        pointFormat: "<b>{point.percentage:.1f}%</b>",
        style: {
          // color: "#000",
          fontSize: fontSizeRem(0.15),// fontSizeRem的使用
        },
      },
    }
  );
};
const { fontSizeRem, updateChart } = useResize(initChart);
// 处理图表数据
const handleChart = (arr) => {
  dataCount.value = arr.map((item) => ({
    name: item.deviceType,
    y: item.deviceCount,
    z: item.deviceCount + 16,
  }));
  setTimeout(() => {
    updateChart();
  }, 500);
};
defineExpose({
  ...toRefs(data),
  handleChart,
});
</script>
<style scoped lang="scss">
#container1 {
  background: linear-gradient(
    80.97deg,
    rgba(8, 49, 92, 0.5) 0%,
    rgba(8, 48, 92, 0) 100%
  );
  border: 0.00625rem solid rgba(0, 0, 0, 1);
}
</style>