vue3 vben-admin 窗口大小更改后 echarts尺寸变为 100px的问题

ziming007 的个人博客 / 47 / 0 / 创建于 1年前

问题描述:

当切换切换tab 并且窗口尺寸更改时, echarts的尺寸因为父元素为 0, 自动设置为 100px

网上查找资料的结果:

1,使用vue 中的 v-if 来重新设置dom树

缺点: 频繁操作dom树结构, 极其消耗性能

优点: 自适应展示

2,设置固定宽高

缺点: 不能自适应展示, 无需消耗额外性能

优点: 简单粗暴

解决思路:

在窗口更改时, 调用 echarts 的 resize 方法,传入自适应的宽度,而父元素正常时,不传入任何参数,自适应获取父元素宽度

官方文档关于 resize 方法的解释: Documentation - Apache ECharts

width 可显式指定实例宽度，单位为像素。如果传入值为 null/undefined/‘auto’，则表示自动取 dom（实例容器）的宽度。
height 可显式指定实例高度，单位为像素。如果传入值为 null/undefined/‘auto’，则表示自动取 dom（实例容器）的高度。

解决流程:

在原有的 useECharts.ts 的基础上进行更改,在需要重新设置宽高的时候即调用 resize 方法中加入自适应的宽高
1, useECharts 方法加入指定 dom 元素的入参

export function useECharts(elRef: Ref<HTMLDivElement>, theme: 'light' | 'dark' | 'default' = 'default', parentElRef: Ref<HTMLDivElement>)

2,调用时,传入自适应宽高的 dom 元素节点

const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>, 'default', wrapRef as Ref<HTMLDivElement>);

3.在 resize 方法增加获取附加 dom 元素宽度的方法

function resize() { 
    const el = unref(parentElRef); 
    if (!el || !unref(el)) { 
        chartInstance?.resize(); return; 
    } else { 
        chartInstance?.resize({ width: parentElRef.value?.clientWidth // 设置指定节点元素的宽度 
        // height: hi, 
    }); 
} }