matteao03 opened a new issue, #18102:
URL: https://github.com/apache/echarts/issues/18102
### Version
5.4.1
### Link to Minimal Reproduction
暂无
### Steps to Reproduce
# dom
```
<div class="container">
<div class="item">
<div class="title">1212</div>
<div class="about" id="about1"></div>
</div>
<div class="item">
<div class="title">2323</div>
<div class="about" id="about2"></div>
</div>
<div class="item">
<div class="title">3434</div>
<div class="about" id="about3"></div>
</div>
</div>
```
# css
```
.container {
display: flex;
height: 400px;
}
.title {
padding: 10px;
}
.item {
display: flex;
flex: 1;
flex-direction: column;
}
.about {
flex: 1;
}
```
# js
```
import { onMounted，onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'
let about1, about2, about3
onMounted(() => {
about1 = echarts.init(document.getElementById('about1'))
about2 = echarts.init(document.getElementById('about2'))
about3 = echarts.init(document.getElementById('about3'))
about1.setOption({
// options
})
about2.setOption({
// options
})
about3.setOption({
// options
})
})
onBeforeUnmount(()=>{
about1.dispose()
about2.dispose()
about3.dispose()
})
```
### Current Behavior
# 表现
- id 为 `about1`, `about2`, `about3` 的宽度都和 class `container` 的宽度一样，而不是三等分
`container` 的宽度；
- id 为 `about1`, `about2`, `about3` 的高度为正常： 400 px - 标题的高度； 但是图表的高度为： 0
每次切换路由，这种情况不是都必现的。 我这边使用 chrome 94 , 如果切换路由频繁，且快速，复现的频率比较高。
### Expected Behavior
# 期望
获取正常高度，图表渲染出来
### Environment
```markdown
环境：
- vue ：3.2.45
- vite： 2.9.15
- chrome: 94 (容易复现，107 版本也出现过，但是不容易复现）
```
### Any additional comments?
推测一： 路由切换过程中，上次图表实例没销毁. （实际上已销毁）
推测二： vue3 相关的 响应式绑定的问题 （已对照 issues， 做了整改）
# 疑问：
- id 为 `about1`, `about2`, `about3` 的宽度 为啥不是三等分后的宽度？
- 高度为啥是 0， vue 的 onMounted 生命周期，样式还没有绑定？ 我在 vue 的官方仓库，没有找到相关 isssue .
希望大家有遇到的，指点迷津
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
