🌈个人主页：前端青山
🔥系列专栏：Vue篇
🔖人终将被年少不可得之物困其一生
依旧青山,本期给大家带来Vue篇专栏内容:Vue-ECharts自适应
目录
前言
1920*1080分辨率示图
8184*2432分辨率示图
以vue3+ts开发为例
(一)Echarts Resize 方法
(二)window.addEventListener事件监听方法
(三)根据浏览器窗口的宽度动态计算字体大小
注意
-
前言
嘿，小伙伴们！是不是有时候你会遇到这样的烦恼：好不容易做好的图表，在不同的设备上显示效果就变了样，要么字太小看不清，要么图太大撑破边框？最近作者也是接到了这么一个需求,既要满足1920*1080分辨率,又得适应超大屏幕8184*2432分辨率,,别急，今天咱们就聊聊如何让你的图表——尤其是用 Vue 和 ECharts 做的那些——在各种屏幕大小下都能保持最佳状态
1920*1080分辨率示图
8184*2432分辨率示图
以vue3+ts开发为例
<template><div ref="hydrologyChart" style="width: 100%; height: 100%;"></div>
</template>通过ref属性"hydrologyChart"，并设置样式为宽度100%，高度100%。方便撑满父组件盒子宽高
// 使用 ref 创建响应式引用
const hydrologyChart = ref<HTMLElement | null>(null);
const zgrwczqktance = ref<echarts.ECharts | any>(null);hydrologyChart是一个对HTML元素的引用，初始值为null。它可以通过.value属性来获取或设置对应的元素。zgrwczqktance是一个对echarts图表实例的引用，初始值为null。它可以通过.value属性来获取或设置对应的图表实例。
此后在onMounted钩子函数中使用nextTick函数在DOM更新后执行初始化图表
onMounted(() => {if (hydrologyChart.value) {nextTick(() => {zgrwczqktance.value = echarts.init(hydrologyChart.value);// 初始化图表时使用空数据zgrwczqktance.value.setOption(defaultOption);
})(一)Echarts Resize 方法
ECharts Resize 方法解释
在 ECharts 中, myChart.resize() 方法用于使图表自适应其容器的新尺寸。当图表所在的容器大小发生变化时（例如，浏览器窗口被调整大小，或者图表所在元素的尺寸发生改变），需要调用此方法来确保图表能够正确地填充新的可用空间。
故此,我们可以先尝试在onMounted钩子函数中调用此方法
onMounted(() => {if (hydrologyChart.value) {nextTick(() => {zgrwczqktance.value = echarts.init(hydrologyChart.value);// 初始化图表时使用空数据zgrwczqktance.value.setOption(defaultOption);zgrwczqktance.value.resize();//调用自适应方法
})(二)window.addEventListener事件监听方法
onMounted(() => {......其余代码...// 添加窗口大小变化的监听器window.addEventListener('resize', function(){nextTick(() => {resizeHandler();});})
})const resizeHandler = () => {if(zgrwczqktance.value){zgrwczqktance.value.resize();}updateFontSize();};// 监听窗口大小变化，更新字体大小const updateFontSize = () => {if (zgrwczqktance.value) {const windowWidth = window.innerWidth;// 使用平方根计算字体大小，这样在大屏幕下字体可以更大const fontSize = Math.max(12, Math.min(60, Math.sqrt(windowWidth))); const option = {yAxis: {nameTextStyle: {fontSize: fontSize + 'px',},axisLabel: {textStyle: {fontSize: fontSize+'px',},},},};zgrwczqktance.value.setOption(option, true);}};这段代码是在window上添加一个resize事件监听器。当resize事件触发时，它会使用Vue的nextTick函数，在DOM更新之后调用resizeHandler函数。这样做的目的是确保resizeHandler函数在DOM更新之后执行，以便获取最新的DOM状态。
(三)根据浏览器窗口的宽度动态计算字体大小
* @param {any} res - 需要根据字体大小进行调整的尺寸值。* @returns {number} - 返回经过字体大小调整后的尺寸值。*/
const fontSize = (res: any) => {// 获取浏览器窗口的宽度。优先使用window.innerWidth，如果不可用，则尝试使用document.documentElement.clientWidth，// 如果仍然不可用，则使用document.body.clientWidth。let clientWidth =window.innerWidth ||document.documentElement.clientWidth ||document.body.clientWidth;// 如果无法获取到客户端宽度，则直接返回，不进行后续计算。if (!clientWidth) return;// 根据窗口宽度与参考宽度的比例，计算字体大小。基础字体大小为100px，参考宽度为1920px。let fontSize = 100 * (clientWidth / 1920);// 返回传入参数res乘以计算得到的字体大小，用于进一步的尺寸计算或应用。return res * fontSize;
}此函数旨在根据浏览器窗口的宽度，动态调整字体大小，以实现响应式设计的一部分。
它基于一个假设的参考宽度1920px，将当前窗口宽度与参考宽度的比例应用于基础字体大小100px， 从而得出一个新的字体大小值。这个新的字体大小值将被用于计算传入参数res所代表的尺寸。
然后在我们图表的options配置里面使用fontSize()函数
// 封装 option 配置
const defaultOption: any = {grid: {top: "0%",bottom: "2%",left: "34%",right: "20%"},xAxis: {show: false,type: "value",boundaryGap: [0, 0]},yAxis: [{type: "category",data: [],axisTick: [{show: false}],axisLine: {show: false,lineStyle: {color: '#B8E8FF',}},axisLabel: {color: '#fff',fontSize: fontSize(0.075), // 设置字体大小// 这里的formatter函数可以根据你的需要进行调整 formatter: function (value: any, index: any) {// 自定义富文本格式return `{${index + 1}| }${value}`;},// width: 80,rich: {1: {height: fontSize(0.13),width: fontSize(0.13),align: "center",backgroundColor: {image: jyl,},},2: {height: fontSize(0.13),width: fontSize(0.13),align: "center",backgroundColor: {image: jyl,},},3: {height: fontSize(0.13),width: fontSize(0.13),align: "center",backgroundColor: {image: jyl,},},},},}],series: [{name: "",type: "bar",zlevel: 1,barWidth: "20%",label: {normal: {show: true,position: 'right',formatter: '{c}',textStyle: {color: '#BCFBFF', //color of valuefontSize: fontSize(0.075),}}},data: []},]
};即可实现在不同分辨率下实现不同字体大小
注意
在组件卸载时,要清理echarts实例和移除窗口大小变化的监听器
onUnmounted(() => {if (zgrwczqktance.value) {zgrwczqktance.value.dispose(); // 清理echarts实例}// 使用相同的函数引用来移除监听器// 移除窗口大小变化的监听器window.removeEventListener('resize', resizeHandler) // 移除监听器
});都需结合Echarts Resize ()方法使用才能达到自适应分辨率屏幕大小
作者使用的是第三种方法根据浏览器窗口的宽度动态计算字体大小,大家可以尝试,有什么建议或不足可参与讨论
