位置: IT常识 - 正文

解决echarts报错Cannot read properties of null (reading ‘getAttribute‘)(echarts遇到的坑)

编辑:rootadmin
解决echarts报错Cannot read properties of null (reading ‘getAttribute‘) 前言

推荐整理分享解决echarts报错Cannot read properties of null (reading ‘getAttribute‘)(echarts遇到的坑),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:引入echarts报错,echarts.min.js报错,echarts nodataloadingoption,echarts.min.js报错,echarts cannot read property,echarts.init报错,echarts常见问题,echarts cannot read property,内容如对您有帮助,希望把文章链接给更多的朋友!

最近在写 echarts 的时候碰到了这么一个报错,如下图。造成报错的原因是因为 echarts 的图形容器还未生成就对其进行了初始化,下面几种方法是经本人自测最有效的解决方案。

解决echarts报错Cannot read properties of null (reading ‘getAttribute‘)(echarts遇到的坑)

报错截图

解决方案:1. this.$nextTick

该方法思路是将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。

this.$nextTick(() => { this.chartPort();});2. created(){}

将 created(){} 生命周期中的方法放在 mounted(){} 生命周期中,该方法思路是因为数据渲染方法放到了 created(){} 生命周期中,但是数据还未取到,页面已经加载了,故放在 mounted(){} 生命周期中,在初始化页面完成后,再对 DOM 节点进行相关操作。

mounted() { this.chartPort();},3. document.readyState

document.readyState 方法主要是描述了文档的加载状态,以下是它的三种类型值:

值描述loading加载中interactive文档已经完成加载且已被解析,但是类似图像,样式表和框架之类的子资源仍在加载。complete加载完成

当这个属性的值变化时,document 对象上的 readystatechange 事件就会触发。因此我们可以借助此特性让图表方法在页面渲染完成后在触发。

mounted() { var that = this;//防止this指向问题 var timer = setInterval(function () { // 判断页面所有资源已加载完毕 if (document.readyState === "complete") { that.chartPort();//执行方法 window.clearInterval(timer); } }, 800);},
本文链接地址:https://www.jiuchutong.com/zhishi/298507.html 转载请保留说明!

上一篇:最新人工智能GPT-4免费简单使用教程(最新人工智能软件chingt)

下一篇:文件上传漏洞upload-labs靶场通关教程 1-20(带原理)(文件上传漏洞原因)

  • 城镇土地使用税暂行条例
  • 一般计税预缴增值税3%怎么办
  • 哪些商业保险可以扣除个人所得税
  • 利润表报错了怎么撤回修改
  • 发票服务名称都有什么
  • 一次性计提后的固定资产残值
  • 增值税专用发票电子版
  • 销售商品的会计分录现金折扣
  • 税收优惠包括哪三个方面的内容
  • 银行本票通俗
  • 固定资产进项税额
  • 弱电系统安装的注意要点
  • 采购退货退款怎么做账
  • 税务稽查补缴的税款需要申报吗
  • 留抵税额怎么计算
  • 代缴个税税务局奖励款怎么做账?
  • 小规模所得税表格模板
  • 车票进项税可以跨年抵扣吗
  • 外资公司办事处职能
  • gif图片查看软件
  • 是否启用税种综合申报
  • 苗木发票抵扣政策2021
  • PHP:mb_encoding_aliases()的用法_mbstring函数
  • 深度deepin系统安装教程
  • php string函数
  • 外贸企业进项税额转出
  • 存货周转率公式怎么算
  • linux mount命令详解
  • 支付境外设计费合同备案流程
  • bho是什么文件夹
  • 装修未办理施工许可证怎么处罚
  • 煤炭贸易公司账务大全
  • 事业单位会计专业知识考什么
  • 大脊山,英格兰峰区国家公园 (© John Finney Photography/Moment/Getty Images)
  • 什么叫股权溢价之谜?
  • 一只华莱士飞蛙掠过森林地面 (© Stephen Dalton/Minden Pictures)
  • php引用传值
  • yolov5目标检测流程图
  • html基础网页
  • linux调试工具有哪些
  • python用内置函数来打开文件
  • javascript 箭头
  • 给客户的现金奖励会计处理
  • 发票上一定要盖章吗
  • 横幅属于是什么税收大类?
  • 人工智能自动对焦又叫什么
  • 上级拨付的债券怎么做账
  • 在建工程待摊支出是什么意思
  • 资产负债表编制
  • 资产减值损失会计科目编码
  • 公司自己搭建的房子出租可以按投资性房地产吗
  • 免抵退税怎么申报
  • 收入与成本不配合
  • 外经证先开票还是异地预缴税率
  • 律师事务所优惠政策
  • cmd 执行sql
  • 线上MYSQL同步报错故障处理方法总结(必看篇)
  • windows service 2008 r2
  • windows7中ie浏览器怎么打开
  • win8有几种版本
  • WIN10如何设置电脑自动锁屏
  • 电脑显示window
  • ubuntu server怎么样
  • Linux驱动程序开发视频教程
  • unity分发平台
  • window系统设置
  • 如何在eclipse
  • php上传文件到指定目录
  • 使用Android Go的手机
  • linuxshell命令行
  • shell脚本怎么导出
  • shell脚本运行linux命令
  • node javascript
  • shell 读取
  • Python装饰器入门学习教程(九步学习)
  • easyui toolbar布局
  • 无偿赠送的税务怎么处理
  • 南京税务局几点下班?
  • 贵州省高新区属于哪个县
  • 国家产业政策是什么
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设