本文将为您描述如何解决 eharts.js报错 Uncaught TypeError: Cannot read property 'getAttribute' of null 的问题

根据报错信息查找原因发现是因为 实例化 echarts 的元素不存在(未找到指定的元素),查看官方文档发现:

// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

基于准备好的 dom,初始化 echarts 实例,也就是只有 页面存在的HTML元素 才可以去初始化。

解决方案:

HTML DOM getElementById() 方法 (通过 指定ID查找元素),在 初始化echarts 之前打印一下看看此元素是否存在

例:

console.log(document.getElementById('main'))

echarts js报错 Cannot read property 'getAttribute' of null的更多相关文章

  1. 在vue中使用echarts报错Cannot read property getAttribute of null

    报错信息如下: 报错代码: mounted() { // ... this.drwaCharts() // drawCharts方法为自己定义的包含渲染 echarts 图表的方法 // ...} 之 ...

  2. js执行函数报错Cannot set property 'value' of null怎么解决?

    js执行函数报错Cannot set property 'value' of null 的解决方案: 原因:dom还没有完全加载 第一步:所以js建议放在body下面执行, 第二步:window.on ...

  3. vue.config.js报错cannot set property "preserveWhitespace" of undefined

    vue.config.js报错cannot set property "preserveWhitespace" of undefined 最近在项目中配置webpack,由于vue ...

  4. hexo 报错 Cannot read property 'replace' of null

    详细错误信息: FATAL Cannot read property 'replace' of null TypeError: Cannot read property 'replace' of nu ...

  5. vue项目中使用echarts map报错Cannot read property 'push' of undefined nanhai.js

    在vue中绘制地图需要加载一个本地china.json文件,我用的是get请求的方法加载的,而不是直接import,因为我怕import请求到的部署到线上的时候会有问题.如下是get请求方法: thi ...

  6. 报错”Cannot read property 'addEventListener' of null“

    1.报错:Cannot read property 'addEventListener' of null 2.解决方案: 把代码放到window.onload=function(){...}里面,因为 ...

  7. 【jQuery学习】用JavaScript写一个输出多选框的个数报错:Cannot set property 'onclick' of null"

    说明:代码段来源于:<锋利的jQuery> 根据代码段我补充的代码如下: <!DOCTYPE html> <html> <head> <meta ...

  8. 小程序分享报错 Cannot read property 'apply' of null;at page XXX onShareAppMessage function

    Cannot read property 'apply' of null;at page XXX onShareAppMessage function 然后看了下自己的代码,分享按钮在子组件里, at ...

  9. echarts Cannot read property 'getAttribute' of null 问题的解决方法

    今天在使用echarts练习官方给的实例的时候,代码没有问题 却总是报错“Cannot read property 'getAttribute' of null” 找了好久的文档没有看明白 ... 最 ...

随机推荐

  1. CompareAndSwap原子操作原理

    在翻阅AQS(AbstractQueuedSynchronizer)类的过程中,发现其进行原子操作的时候采用的是CAS.涉及的代码如下: 1: private static final Unsafe ...

  2. SpringCloud微服务的Eureka

    一.什么是微服务架构 架构设计概念,各服务间隔离(分布式也是隔离),自治(分布式依赖整体组合)其它特性(单一职责,边界,异步通信,独立部署)是分布式概念的跟严格执行SOA到微服务架构的演进过程 作用: ...

  3. C#通用查询器

    很多通用查询器,对查询条件中的AND及OR的支持度不是很好,要么全部是AND要么全部是OR.笔者通过一段时间的摸索,终于完成了一个自己较为满意的通用查询器, 可以实现多条件的AND及OR,现将实现过程 ...

  4. idea个性化配置

    .katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...

  5. feign使用hystrix熔断的配置

    熔断器hystrix 在分布式系统中,每个服务都可能会调用很多其他服务,被调用的那些服务就是依赖服务,有的时候某些依赖服务出现故障也是很正常的. Hystrix 可以让我们在分布式系统中对服务间的调用 ...

  6. mysql5.5下载安装教程

    下载地址:https://dev.mysql.com/downloads/mysql/ 这里选择的是5.5的版本: 步骤1: 步骤2: 步骤三: 步骤四: 步骤5: 步骤6: 步骤7: 步骤8: 步骤 ...

  7. 过滤器(Filter)对登陆页面进行过滤验证

    import javax.servlet.*;import javax.servlet.annotation.WebFilter;import javax.servlet.http.HttpServl ...

  8. SAP_ECC6_EHP7_IDES安装文档ORACLE11G+WINDOWS2012 R2 问题总结

    SAP_ECC6_EHP7_IDES安装文档ORACLE11G+WINDOWS2012 R2 问题总结 1.注意密码不能带@等特殊符号,否则会报如下错误,因为ORACLE数据是不容许密码带@的.@是一 ...

  9. SLES 12: Database Startup Error with ORA-27300 ORA-27301 ORA-27303 While Starting using Srvctl (Doc ID 2340986.1)

    SLES 12: Database Startup Error with ORA-27300 ORA-27301 ORA-27303 While Starting using Srvctl (Doc ...

  10. 017.Kubernetes二进制部署检查集群

    一 验证集群功能 1.1 检查节点状态 [root@k8smaster01 ~]# kubectl get nodes 1.2 创建测试文件 [root@k8smaster01 ~]# cd /opt ...