echart 踩坑之：图表设置了宽高，却仍然报错Can‘t get DOM width or height.

记录一次 debug 的过程。

场景

我是在 el-tab 页签下使用的 echarts ，有多个 tab-pane，每个 tab-pane 下都有图表，都是最基础的柱状图，每个 echarts 容器都设置了宽高。初始渲染是没问题的，可就当我在切换 tab 标签页的时候，echarts 绘制不出来了，打开控制台，出现了如下警告：

解决

由于我非常确定 echarts 容器都设置了宽高，所以一开始我觉得很困惑。

而后转念一想，会不会是let chartDom = document.getElementById(id)获取元素的时候出了问题，毕竟如果元素获取出问题的话，那自然元素的宽高也就获取不到了。

于是我把目光盯到了 id 上，发现原来是不同标签页下的容器 id 我都写成了一样的，随后我把 id 改成不一样的后，问题就解决了。

但是疑问又来了(没办法，人菜问题多)，el-tab 的标签页下我都是写的独立的组件，标签页切换的时候，原来页签的元素不应该都隐藏了吗？为什么 id 重复就冲突了呢？

打开控制台，发现 tab-pane 虽然设置了 display: none，但是元素依旧是存在于 DOM 树上的。

至此，疑问解决了，同时也加深了对 display: none的认识，虽然元素隐藏了，但是还是存在于 DOM 树上。所以 id 设置成一样会重复！

---

以上就是本文全部内容，如有错误，还望及时指正😄