🌈个人主页：前端青山 🔥系列专栏：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 value
fontSize: fontSize(0.075),
}
}
},
data: [
]
},
]
};即可实现在不同分辨率下实现不同字体大小
注意
在组件卸载时,要清理echarts实例和移除窗口大小变化的监听器
onUnmounted(() => {
if (zgrwczqktance.value) {
zgrwczqktance.value.dispose(); // 清理echarts实例
}
// 使用相同的函数引用来移除监听器
// 移除窗口大小变化的监听器
window.removeEventListener('resize', resizeHandler) // 移除监听器
});都需结合Echarts Resize ()方法使用才能达到自适应分辨率屏幕大小
作者使用的是第三种方法根据浏览器窗口的宽度动态计算字体大小,大家可以尝试,有什么建议或不足可参与讨论
