vue3 中 多个 Echarts图表切换显示,宽度width变化,使用 resize() 失效的一种情况
1、情况说明
1)有多个Echarts 图表,且每个作图的内容 是单独的组件
2)使用 v-show 指令切换显示 图表,每次只显示一个
index 就是索引号,每次切换
<data-chart key="0" v-show="index=== 0" :index="index" :type='0' />
<data-chart key="1" v-show="index=== 1" :index="index" :type='1' />
<data-chart key="2" v-show="index=== 2" :index="index" :type='2' />
1)每次切换后图表会变窄,这是因为 在各个chart display none 和 block 切换后,获取不到容器的实际高宽,图表的宽度会将 100% 转换为 100px,所以 需要手动调用 resize 方法获取正确的高宽并且刷新画布。
2)使用watch 检测index 变化 ,直接调用 chartInstance.resize()
3)结果画布大小没有改变,还是窄的
原因: 因为index变化后,容器切换成block,这个变化组件很快就检测到了,但DOM渲染还没有完成,所以立即调用 resize(), 获取的还是之前display: none的宽高,所以需要等待一定的时间
也就是说 需要在 DOM 准备好后,resize()才能正确执行
监视 index 变化,调用resize()
2 组件代码示意
export default defineComponent({
props: {
type: {
type: Number,
default: 0, //
required: true
},
index: {
type: Number,
default: 0, // 当前显示的数据
required: true
},
},
setup(props: any) {
const _props = toRefs(props)
watch(_props.index, () => {
if (_props.index == _props.type) {
setTimeout(() => {
if (chartInstance) chartInstance.resize()
}, 10)
}
})
}
})
分类:
前端 / 前端--echarts
, 前端 / 前端--vue
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· .NET10 - 预览版1新功能体验(一)