echarts报错:Error in mounted hook的解决方法

目录
  • 1 .具体报错内容:
  • 2.解决办法：
  • 3.原因：
  • 4.扩展–import导入的方式:
  • 总结

echarts安装创建图表时报这种错误：Error in mounted hook: “TypeError: Cannot read properties of undefined (reading ‘init’)”

1 .具体报错内容:

2.解决办法：

原先大家可能是这样的写法

import echarts from 'echarts'

后面改为这样导入就不会出错了

import * as echarts from 'echarts'

3.原因：

个人感觉跟我们导入的方法有关，如果采用这种 import echarts1 from ‘echarts’ 导入，它是import导入的简便形式，其含义是把echarts里面的默认暴露都存在变量echarts1 里面，而报错是因为我们引用echarts里面的init方法显示没有定义，所以猜测可能是在echarts 里面的init方法不是采用默认暴露的形式导致的。

4.扩展–import导入的方式:

1.通用方式

import * as m1 from "./js/demo.js"; //意思是把demo.js里面所有的暴露数据都存在变量m1里面
console.log(m1);
console.log(m1.default.skill()); //默认暴露的时候，调用里面的属性或者方法要多加一层default

2.结构赋值方式

import {
            school,
            name
        } from "./js/demo.js"; //结构赋值出来的内容与demo.js里面设置的暴露数据是一一对应的
        import {
            school as school1,
            name as name1
        } from "./js/demo2.js"; //结构赋值出来的内容与demo.js里面设置的暴露数据是一一对应的,可以对解构赋值出来的内容另外命名

3.简便方式，只针对默认暴露的形式

import m3 from "./js/demo3.js"; //m3里面的数据全部都是默认暴露的形式

总结

到此这篇关于echarts报错:Error in mounted hook: “TypeError: Cannot read properties of undefined (reading ‘init‘)“的解决方法的文章就介绍到这了,更多相关echarts报错Error in mounted hook内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue使用echarts的完整步骤及解决各种报错

    Vue使用echarts的完整步骤及解决各种报错

    前言: Echarts,它是一个与框架无关的 JS 图表库,但是它基于Js,这样很多框架都能使用它,例如Vue,估计IONIC也能用,下次研究. 因为我的习惯,每次新尝试做一个功能的时候,总要新创建个小项目,做做Demo. 首先看自己电脑是否安装了Vue,打开终端命令:vue --version,我以前安装过Vue,但是不知道为何报错: vue/cli Error: Cannot find module ‘@vue/cli-shared-utils‘ 注意:如果是全局module出错,就全局更新

  • Vue使用Echarts图表多次初始化报错问题的解决方法

    Vue使用Echarts图表多次初始化报错问题的解决方法

    目录 问题 方法一 销毁实例 方法二 不要频繁创建实例 总结 问题 Vue项目中需要用Echarts的柱状图显示数据,并且每次搜索要更新柱状图. 这时候小编发现在控制台会出现这样的报错: 原来的代码是这样的,页面挂载和搜索时都会调用init方法 initChart (dataSet = [5, 20, 36, 10, 10, 20]) { this.barChart = echarts.init(this.$refs.chartBox) const option = { title: { tex

  • echarts报错:Error in mounted hook的解决方法

    echarts报错:Error in mounted hook的解决方法

    目录 1 .具体报错内容: 2.解决办法: 3.原因: 4.扩展–import导入的方式: 总结 echarts安装创建图表时报这种错误:Error in mounted hook: “TypeError: Cannot read properties of undefined (reading ‘init’)” 1 .具体报错内容: 2.解决办法: 原先大家可能是这样的写法 import echarts from 'echarts' 后面改为这样导入就不会出错了 import * as ech

  • AngularJS报错$apply already in progress的解决方法分析

    本文实例分析了AngularJS报错$apply already in progress的解决方法.分享给大家供大家参考,具体如下: 如果我们使用了AngularJS中的$scope.$apply()或者$scope.$digest(),我们很可能会遇到类似下面的错误,虽然这个错误没有太大影响,但是在日志中看起来还是很不爽的,日志中记录的异常或者错误,就应该是需要关注和解决的问题,否则就没有必要出现在日志中了. Error: [$rootScope:inprog] $apply already

  • Windows环境下npm install 报错: operation not permitted, rename的解决方法

    Windows环境下npm install 报错: operation not permitted, rename的解决方法

    前言 最近发现了一个问题,运行 npm install 命令安装依赖包,在 Mac 上的 Vagrant 装的虚拟机上没问题,在阿里云 CentOS 上也没问题,但是在 Windows 环境同样是 Vagrant 装的环境相同的虚拟机上就是不成功,报错如下: npm ERR! Error: EPERM: operation not permitted, rename '/usr/share/nginx/html/tanteng.me/node_modules/duplexify' -> '/us

  • sql2000报错Successfully re-opened the local eventlog解决方法

    sql2000报错Successfully re-opened the local eventlog解决方法

    报错1:Unable to read local eventlog (reason: 事件日志文件已在读取间更改. 报错2:Successfully re-opened the local eventlog - NOTE: Some events may have been missed. 微软解释: http://support.microsoft.com/default.aspx?scid=kb;en-us;811484 解决办法: 如果要防止错误日志, 中出现这些消息可以使用跟踪标志 25

  • asp在iis7报错行号不准问题的解决方法

    在Win7中做ASP开发,发现了一个非常蛋疼的问题.出现错误的时候,行号不准,很难快读定位到出问题的代码(在Win2003的IIS6就没有问题).命名代码仅有几十行,报错的行号确到了几千行(应该IIS7运行时把 asp 所有include的代码给合并到了一个文件),如图: 经过查看IIS7中的ASP配置,发现 有个 计算行号的选项,设置为true就可以了.(注意:点击右侧的应用后,虽然提示生效,但是实际没有生效.必须用 iisreset 重启IIS后才可以生效)

  • Docker报错Operation not permitted问题的解决方法

    目录 前言 1)docker file 生成基本镜像,这个比较简单 2)容器内安装扩展包时,提示没有权限 3)容器内安装扩展包 4)扩展包里没有redis包,只能通过pecl安装. 5)使用当前容器生成镜像 总结 前言 Docker PHP需要安装 bcmath,pdo_mysql,redis3个扩展,由于权限问题,所以不能通过Dockerfile直接生成需要的镜像.这里分3部分来做,第一部分生成基本镜像,包含了可以用Dockerfile安装的PHP扩展.第二部分用镜像启动容器,手工安装扩展包最

  • mybatis中foreach报错：_frch_item_0 not found的解决方法

    发现问题 在mybatis的动态sql中最常见的错误就是使用,比如:_frch_item_0 not found There is no getter for property named 'states' in 'class com.xingguo.model.User' 等等. 一般在使用时出现问题是由以下几种错误使用方式造成的: 1.参数类型不是List,特别当参数为实体类,一个属性为list时,注意collection的名字. 2.遍历时属性的名字或者字段错误 3.多个参数时没有使用@p

  • Vue 报错Error: No PostCSS Config found问题及解决

    Vue 报错Error: No PostCSS Config found问题及解决

    目录 Vue 报错Error: No PostCSS Config found 解决办法 Vue使用中报错处理ERROR Vue常见错误解析 Vue 报错Error: No PostCSS Config found 从git上 clone 下来的代码: npm install 安装依赖以后,启动服务,出现Error: No PostCSS Config found报错: npm run dev 解决办法 在项目根目录下创建postcss.config.js,配置内容如下:即可修复报错问题. mo

  • pycharm 2020.2.4 pip install Flask 报错 Error：Non-zero exit code的问题

    pycharm 2020.2.4 pip install Flask 报错 Error：Non-zero exit code的问题

    Problem: Solution: 参考stackoverflow给出的解决方案:https://stackoverflow.com/questions/65085956/pycharm-venv-failed-no-such-option-build-dir ① 确定自己pycharm里面python解释器的路径: ② 在cmd里面输入:自己解释器的路径 + -m pip install pip==20.2.4 (其中可能会有网络问题提示Retry,要多尝试几次) 这里做法的主要原因是:py

  • 永久解决 Intellij idea 报错:Error :java 不支持发行版本5的问题

    永久解决 Intellij idea 报错:Error :java 不支持发行版本5的问题

    初次在IDEA使用maven的时候遇到的问题 搜索之后得到解决方案 idea 报错:Error : java 不支持发行版本5 实际测试后该博主提供的方法可以解决. 但是每次创建新项目的时候都要设置一次. 这里提供一个 一劳永逸的方法 在 maven地址\conf\setting.xml 中设置默认jdk版本- 把图中代码添加到-中 我使用的是jdk11 复制代码时需要修改成自己的jkd版本 例如jkd8 code: <profile> <id>development</id

随机推荐