微信小程序开发使用echarts报错Cannot read property ‘getAttribute‘ of undefined

如图,我在小程序圈中的区域渲染echarts图标报错了,报错提示Cannot read property 'getAttribute' of undefined 

 

 这里的canvas ,width ,height,dpr获取为 undefined

分析问题:

  1. 初始化图表时传递错误的参数

    onShow 生命周期方法中调用 this.initChart() 方法时,并没有传递 canvaswidthheightdpr 参数。这可能导致 canvasundefined。要解决这个问题,确保在调用 initChart() 方法时正确传递这些参数。

  2. 未正确设置图表初始化回调

    data 中定义的 ecec1 对象中,onInit 属性的值被设为空字符串 '',这意味着初始化回调函数没有被正确设置。在 onShow 生命周期方法中,虽然调用了 this.initChart() 方法,但并未把初始化函数返回的图表对象与 ecec1 对象中的 onInit 属性绑定起来。因此,图表对象无法正确传递给小程序组件。为了解决这个问题,需要修改 onShow 方法中的代码如下:

/**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    this.setData({
      ec:{
        onInit:this.initChart.bind(this)
      },
      ec1:{
        onInit:this.initChart1.bind(this)
      }
    })
  },

解决问题了,使用 bind 方法将 this.initChartthis.initChart1 函数与 ecec1 对象中的 onInit 属性绑定起来,并确保在 initChartinitChart1 函数中可以访问到 Page 实例的 data

现在可以正常显示并且不报错了 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/44637.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Vue第四篇:html和js基础知识查漏补缺

1、a标签 定义超链接,用于从一个页面链接到另一个页面 target属性:打开目标URL的方式,_top为再当前窗口打开,_blank为新窗口打开 2、span标签 对文档中的行内元素进行组合,它提供了一种将文本的一部分或者文档的一部分…

MySQL 数据抽稀 每分钟取一条

假如原始数据为每5秒一个数据,现在想展示为每4分钟一条数据,先按照分钟数把除以4余数为0的行选出来,在按照 年月日 时分,做组内排序(窗函数ROW_NUMBER),最后再拿出序号为1的行。 WITH data_01 …

了解Unity编辑器之组件篇UI(一)

UI组件:提供了用户交互,信息展示,用户导航等功能 一、Button:用于响应用户的点击事件 1.Interactable(可交互):该属性控制按钮是否可以与用户交互,如果禁用则按钮无法被点击。可以通…

go使用gin结合jwt做登录功能

1、安装gin go get -u github.com/gin-gonic/gin 2、安装session go get github.com/gin-contrib/sessions 3、安装JWT鉴权 go get "github.com/golang-jwt/jwt/v4" 4、创建一个jwt的工具文件 package utilsimport ("errors""github.com/golan…

ubuntu挂载ext4文件系统

文章目录 1.虚拟机分配10G磁盘用来挂载ext4文件系统2.磁盘分区3.创建文件系统4.挂载文件系统5.卸载文件系统6.使用ior测试ext4三种日志模式(1)ordered(2)journal(3)writeback 1.虚拟机分配10G磁盘用来挂载e…

Flutter动画库:animations(路由过渡动画或者页面切换动画)

animations animations 是一个 Flutter 库,它提供了一组用于创建动画效果的工具和组件。这个库的核心重点是路由过渡动画或者页面切换动画 地址 https://pub-web.flutter-io.cn/packages/animations 安装 flutter pub add animations看了下官方文档和官方例子&a…

【深度学习】【Image Inpainting】Free-Form Image Inpainting with Gated Convolution

模型:DeepFillv2 (CVPR’2019) 论文:https://arxiv.org/abs/1806.03589 代码:https://github.com/JiahuiYu/generative_inpainting 文章目录 效果AbstractIntroductionRelated WorkAutomatic Image InpaintingGuided Image Inpainting and Sy…

第1章 获取数据库中的数据

CoreShop源程序是以数据库优先进行定义的,所以其本身不包含代码优先的定义,但本从更习惯于代码优先,所以为其定义了代码优先的定义。 1 CoreCms.Net.Model.Entities.SysRole using SqlSugar; using System.ComponentModel.DataAnnotations…

三十章:Segmenter:Transformer for Semantic Segmentation ——分割器:用于语义分割的Transformer

0.摘要 图像分割在单个图像块的级别上经常存在歧义,并需要上下文信息来达到标签一致性。在本文中,我们介绍了一种用于语义分割的Transformer模型- Segmenter。与基于卷积的方法相比,我们的方法允许在第一层和整个网络中对全局上下文进行建模。…

《PyTorch深度学习实践》

文章目录 1.线性模型2.梯度下降算法3.反向传播3.1原理3.2Tensor in PyTorch 4.用PyTorch实现线性模型 1.线性模型 2.梯度下降算法 # 梯度下降x_data [1.0,2.0,3.0] y_data [2.0,4.0,6.0]w 3.0def forward(x):return x*w# 损失函数 def cost(xs,ys):cost 0for x,y in zip(x…

基于 Flink SQL CDC 数据处理的终极武器

文章目录 一、传统的数据同步方案与 Flink SQL CDC 解决方案1.1 Flink SQL CDC 数据同步与原理解析1.2 基于日志的 CDC 方案介绍1.3 选择 Flink 作为 ETL 工具 二、 基于 Flink SQL CDC 的数据同步方案实践2.1 CDC Streaming ETL2.2 Flink-CDC实践之mysql案例 来源互联网多篇文…

华为OD机试真题 Java 实现【文件目录大小】【2023 B卷 100分】,附详细解题思路

目录 专栏导读一、题目描述二、输入描述三、输出描述四、解题思路五、Java算法源码六、效果展示1、输入2、输出3、说明4、再输入5、再输出6、说明 华为OD机试 2023B卷题库疯狂收录中,刷题点这里 专栏导读 本专栏收录于《华为OD机试(JAVA)真题…

spring-cloud-alibaba——nacos-server搭建

前言:组件版本关系,官方:组件版本关系 1,nacos-server搭建(windows环境),下载地址nacos 选择对应的版本,这里以目前最新版2.2.3为例子,下载后解压 单机模式 修改\nacos-server-2.2.3\nacos\bin\startup.c…

分布式调用与高并发处理 Nginx

一、初识Nginx 1.1 Nginx概述 Nginx是一款轻量级的Web服务器、反向代理服务器,由于它的内存占用少,启动极快,高并发能力强,在互联网项目中广泛应用。Nginx 专为性能优化而开发,使用异步非阻塞事件驱动模型。 常见服务…

(2)前端控制器的扩展配置, 视图解析器类型以及MVC执行流程的概述

SpringMVC入门程序的扩展说明 注册前端控制器的细节 在web.xml文件注册SpringMVC的前端控制器DispatcherServlet时使用url-pattern标签中使用/和/*的区别 /可以匹配.html或.js或.css等方式的请求路径,但不匹配*.jsp的请求路径/*可以匹配所有请求(包括.jsp请求), 例如在过滤器…

【Linux Shell】基础知识

Linux Shell基础知识 一、Linux Shell基础概念1.1 Shell定义1.2 命令行提示符 二、初识Shell2.1 Shell定义2.2 登录Shell相关文件2.3 Shell中的变量变量类型变量的引用单引号\ 与双引号\" \"变量的删除与检查 2.4 Shell中的扩展大括号扩展{ }其他扩展 一、Linux Shel…

使用springboot进行后端开发100问

properties和yaml文件怎么互转 安装插件 properties文件和yaml文件区别 properties 文件通过“.”和“”赋值,值前不加空格,yaml通过“:”赋值,值前面加一个空格;yaml文件缩进用空格; properties只支持键值对&#x…

flash attention 2论文学习

flash attention作者Tri Dao发布了flash attention 2,性能为flash attention的2倍。 优化点主要如下: 一、减少 non-matmul FLOPs A00中由于tensor core的存在,使得gpu对于浮点矩阵运算吞吐很高,如FP16/BF16可以达到312 TFLOPs/…

LINUX中的myaql(一)安装

目录 前言 一、概述 二、数据库类型 三、数据库模型 四、MYSQL的安装 (一)yum安装MYSQL (二)rpm安装MYSQL 五、MYSQL本地登录 rpm安装MYSQL本地登录 六、重置密码 总结 前言 MySQL是一种常用的开源关系型数据库管理系统&#xff…

蛋白质分子结构设计

paper read 1 Created by: 银晗 张 Created time: May 27, 2023 3:47 PM Tags: Product 补充了解蛋白质的生物学知识学习一下Diffusion的原理 💡 Method & Innovations Framework Summary: first deep learning models to perform antibody sequence-stru…
最新文章