echarts之Error: Initialize failed: invalid dom.

  • 问题截图:
  • 产生原因:进入图表页后调用获取图表数据接口,接口未返回数据时就跳离图表页,而后数据返回并创建图表,但跳离了图表页就获取不到容器元素,因此报错并且创建图表失败。
  • 解决方案:
    1. 不使用原生js方法获取容器元素(例如:document.getElementById()),改用this.$refs。
    2. 如果图表页是缓存页,并希望跳回图表页后图表能加载好,则需要在图表容器的行内样式中写好容器的宽高(以px为单位)。(对于缓存页也提供另外一种解决思路:在组件的activated生命周期执行创建图表方法)
  • 示例代码:
    <div ref="chinaMapChart" style="width: 770px; height: 560px" />
    
    --- 分割线 ---
    
    const myChart = echarts.init(this.$refs.chinaMapChart)

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
根据你提供的错误信息,看起来是在使用 ECharts 这个库时出现了问题。错误提示中提到了 "Initialize failed: invalid dom",意味着初始化 ECharts 失败,原因是无效的 DOM。 这个错误通常发生在没有正确配置和使用 ECharts 的情况下。请确保你在浏览器环境中正确引入 ECharts 库,并且在 DOM 加载完成后再初始化 ECharts。 以下是一个简单的示例代码,展示了如何在浏览器中正确使用 ECharts: ```html <!DOCTYPE html> <html> <head> <title>ECharts Example</title> <script src="path/to/echarts.js"></script> </head> <body> <div id="chart" style="width: 600px; height: 400px;"></div> <script> // 等待 DOM 加载完成再执行代码 document.addEventListener('DOMContentLoaded', function() { // 获取容器元素 var chartDom = document.getElementById('chart'); // 创建图表实例 var chart = echarts.init(chartDom); // 配置图表选项 var option = { // ... }; // 使用配置项绘制图表 chart.setOption(option); }); </script> </body> </html> ``` 请确保替换示例代码中的 "path/to/echarts.js" 为实际的 ECharts 库文件路径。另外,确保在执行 ECharts 相关代码之前,DOM 已经加载完成。 如果你已经按照上述方式正确引入和初始化 ECharts,但仍然遇到 "Initialize failed: invalid dom" 错误,那可能是由于其他原因导致的。你可以检查其他代码逻辑和错误信息,或者参考 ECharts 官方文档和示例进行调试。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值