渲染echarts 报错model.js:654 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'getAttribute')

### ECharts 渲染报错解决方案 当遇到 `model.js:654 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'getAttribute')` 错误时，通常是因为 DOM 元素未正确加载或初始化导致的。以下是可能的原因分析及对应的解决方法： #### 原因一：DOM 容器尚未完全加载 如果调用 `init()` 方法时，目标 DOM 容器还未被浏览器解析完成，则会抛出此错误。 **解决方法** 确保在页面加载完成后才执行图表初始化操作。可以通过监听 `DOMContentLoaded` 或将脚本放置在 HTML 文件底部来实现[^1]。 ```javascript document.addEventListener('DOMContentLoaded', function () { const chartDom = document.getElementById('main'); const myChart = echarts.init(chartDom); }); ``` --- #### 原因二：目标容器 ID 错误或不存在 如果指定的目标容器 ID 不匹配或者该容器根本不存在于当前文档中，也会触发类似的错误。 **解决方法** 确认目标容器存在并具有正确的 ID 属性。例如，在 HTML 中定义如下结构，并确保其与 JavaScript 脚本中的选择器一致。 ```html <div id="main" style="width: 600px; height: 400px;"></div> ``` --- #### 原因三：异步请求数据后延迟渲染 如果通过 AJAX 获取数据后再更新图表，而此时图表实例已被销毁或未正常创建，也可能引发上述错误。 **解决方法** 在设置数据前重新验证图表实例是否存在，必要时重新初始化图表。 ```javascript function updateChart(data) { if (!myChart || !myChart.getDom()) { // 验证图表实例有效性 const chartDom = document.getElementById('main'); myChart = echarts.init(chartDom); // 如果已销毁则重新初始化 } myChart.setOption({ series: [{ data: data, type: 'bar' }] }); } ``` --- #### 原因四：动态调整窗口大小时重绘失败 在某些情况下，手动调整窗口尺寸可能导致图表无法正确响应布局变化，从而出现异常行为。 **解决方法** 绑定窗口事件以适配不同屏幕分辨率下的显示效果。 ```javascript window.onresize = function () { setTimeout(() => { if (myChart && typeof myChart.resize === 'function') { myChart.resize(); } }, 200); }; ``` --- 以上四种情况涵盖了大部分实际开发过程中可能出现的问题及其对应处理方式。按照这些指导原则逐一排查即可有效解决问题。