log.js:59 [ECharts] Can't get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They should not be 0.For example, you may need to call this in the callback of window.onload. outputLog @ log.js:59 log.js:59 [ECharts] Can't get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They should not be 0.For example, you may need to call this in the callback of window.onload. outputLog @ log.js:59 log.js:59 [ECharts] Can't get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They should not be 0.For example, you may need to call this in the callback of window.onload. outputLog @ log.js:59 log.js:59 [ECharts] Can't get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They should not be 0.For example, you may need to call this in the callback of window.onload. outputLog @ log.js:59

### 解决 ECharts 无法获取 DOM 宽度或高度的问题 当使用 ECharts 初始化图表时，可能会遇到 `dom.clientWidth` 和 `dom.clientHeight` 均为 0 的情况。这通常是由于初始化时机不当引起的，即在 DOM 尚未完全加载完毕之前就尝试初始化图表[^1]。 #### 问题分析 ECharts 需要一个有效的 HTML 元素作为容器来绘制图表。如果该容器尚未被浏览器渲染到页面上，则其宽高属性会返回 0。这种情况常见于以下场景： - 在 `window.onload` 或类似的生命周期钩子之外过早调用了 ECharts 的初始化方法。 - 使用框架（如 Vue.js、React 等）开发时，在组件挂载完成之前执行了 ECharts 初始化逻辑。 --- #### 解决方案一：确保 DOM 已经加载完成再初始化 通过将 ECharts 初始化操作放置在 `window.onload` 回调函数中，可以有效避免此问题。这是因为 `onload` 事件会在整个页面资源（包括图片等外部文件）都加载完成后触发[^2]。 ```javascript window.onload = function () { var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option = { title: { text: '示例图表' }, tooltip: {}, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'bar' }] }; myChart.setOption(option); }; ``` --- #### 解决方案二：Vue 生命周期中的正确初始化时间点 对于基于 Vue 构建的应用程序来说，应该利用组件的生命周期钩子 `mounted()` 来延迟 ECharts 实例化过程直到对应的 DOM 节点确实存在为止[^3]。 ```javascript <template> <div id="chart" style="width: 600px; height: 400px;"></div> </template> <script> import * as echarts from 'echarts'; export default { mounted() { this.$nextTick(() => { let chartDom = document.getElementById('chart'); let myChart = echarts.init(chartDom); let option = { title: { text: 'Vue 示例' }, tooltip: {}, xAxis: { type: 'category', data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] }, yAxis: { type: 'value' }, series: [{ data: [5, 20, 36, 10, 10, 20], type: 'bar' }] }; myChart.setOption(option); }); } }; </script> ``` 这里的关键在于使用 `$nextTick` 方法等待当前视图更新结束之后才去创建 ECharts 实例[^3]。 --- #### 解决方案三：强制重绘图表 即使已经按照上述方式处理但仍偶尔出现问题的话，还可以考虑手动重新调整图表尺寸或者刷新它： ```javascript myChart.resize(); ``` 这个命令告诉 ECharts 再次测量它的父级容器并相应改变自身的大小[^4]。可以在窗口大小发生变化或者其他可能导致布局变动的操作后调用。 --- ### 总结 以上三种办法分别针对不同的应用场景提供了相应的解决方案。最常用的是结合具体的前端框架特性选择合适的时机进行 ECharts 的初始化工作；而当发现异常状况时也可以借助 resize 函数快速恢复正常的显示效果。