ui设计师需要考什么证书_公安局门户网申请表怎么下载_app引流推广方法_seo交流论坛seo顾问

创建文件 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 小于设定时间间隔 waitif (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>