wordpress 缺省目录,邢台seo,多商户系统,集群网站开发问题描述:
当切换切换tab 并且窗口尺寸更改时, echarts的尺寸因为父元素为 0, 自动设置为 100px 网上查找资料的结果:
1,使用vue 中的 v-if 来重新设置dom树
缺点: 频繁操作dom树结构, 极其消耗性能
优点: 自适应展示
2,设置固定宽高
缺点: 不能自适应展示, 无需消耗额外…问题描述:
当切换切换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: RefHTMLDivElement, theme: light | dark | default default, parentElRef: RefHTMLDivElement)2,调用时,传入自适应宽高的 dom 元素节点
const { setOptions } useECharts(chartRef as RefHTMLDivElement, default, wrapRef as RefHTMLDivElement);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, });
} }
