問(wèn)題描述:

當(dāng)切換切換tab 并且窗口尺寸更改時(shí), echarts的尺寸因?yàn)楦冈貫?0, 自動(dòng)設(shè)置為 100px

網(wǎng)上查找資料的結(jié)果:

1,使用vue 中的 v-if 來(lái)重新設(shè)置dom樹(shù)

缺點(diǎn): 頻繁操作dom樹(shù)結(jié)構(gòu), 極其消耗性能

優(yōu)點(diǎn): 自適應(yīng)展示

2,設(shè)置固定寬高

缺點(diǎn): 不能自適應(yīng)展示, 無(wú)需消耗額外性能

優(yōu)點(diǎn): 簡(jiǎn)單粗暴

解決思路:

在窗口更改時(shí), 調(diào)用 echarts 的 resize 方法,傳入自適應(yīng)的寬度,而父元素正常時(shí),不傳入任何參數(shù),自適應(yīng)獲取父元素寬度

官方文檔關(guān)于 resize 方法的解釋: Documentation - Apache ECharts

• width?可顯式指定實(shí)例寬度，單位為像素。如果傳入值為?null/undefined/‘a(chǎn)uto’，則表示自動(dòng)取?dom（實(shí)例容器）的寬度。
• height?可顯式指定實(shí)例高度，單位為像素。如果傳入值為?null/undefined/‘a(chǎn)uto’，則表示自動(dòng)取?dom（實(shí)例容器）的高度。

解決流程:

在原有的 useECharts.ts 的基礎(chǔ)上進(jìn)行更改,在需要重新設(shè)置寬高的時(shí)候即調(diào)用 resize 方法中加入自適應(yīng)的寬高
1, useECharts 方法加入指定 dom 元素的入?yún)?/p>

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

2,調(diào)用時(shí),傳入自適應(yīng)寬高的 dom 元素節(jié)點(diǎn)

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 // 設(shè)置指定節(jié)點(diǎn)元素的寬度 // height: hi, }); 
} }