Echarts 明明和官方文档配置一致,图表加载却是报错:Error in mounted hook: "TypeError: Cannot read property 'get' of undefined",重新npm run dev,问题解决。

在搞Echarts的关系图graph,一开始正常显示,如下:

然而就在本人修改了option里的curveness = 0.2,ctrl+f5强制刷新页面后,图表加载报错:Error in mounted hook: "TypeError: Cannot read property ‘get‘ of undefined"

一开始以为是因为curveness的修改而报错,遂回退修改,然而问题依旧。

于是乎,研究一下报错的地方,就是“axisModel = undefined”这个鬼东西报错;

然后各种怀疑,怀疑dom组件加载未成功就进行了初始化,又怀疑echarts布局配置有bug(coordinateSystem: ‘cartesian2d‘,),折腾半小时后无果。

于是使出最后一招“重启开发环境”:重新npm run dev,问题解决。

后面试验了一下,发现浏览器加载了npm run dev 缓存的东西,当动态v-if去改echarts显示或不显示时,也会报以上描述的错。渣渣的我只能简单的将该问题定义为:npm run dev缓存影响组件装载。

附上options配置:

options: {
"xAxis": [{
"show": false,
"type": "value"
}],
"yAxis": [{
"show": false,
"type": "value"
}],
"animationDurationUpdate": 1500,
"animationEasing": "cubicOut",
"animationEasingUpdate": "quinticInOut",
"series": [{
"type": "graph",
"layout": "none",
"coordinateSystem": "cartesian2d",
"zlevel": 3,
"xAxisIndex": 0,
"yAxisIndex": 0,
"focusNodeAdjacency": true,
"symbolSize": 10,
"label": {
"normal": {
"show": true,
"fontSize": 12,
"position": "bottom",
"backgroundColor": "#fff",
"formatter": "{b}"
}
},
"edgeSymbol": ["circle", "arrow"],
"edgeSymbolSize": [0, 15],
"data": [{
"name": "10.200.51.51",
"value": [1, 0],
"createtime": "2019/10/08 14:00:45",
"itemStyle": {
"color": "#21B1ED"
}
}, {
"name": "10.200.51.52",
"value": [2, 20],
"createtime": "2019/10/08 14:01:51",
"itemStyle": {
"color": "#21B1ED"
}
}, {
"name": "10.200.51.53",
"value": [2, 120],
"createtime": "2019/10/08 14:01:51",
"itemStyle": {
"color": "#21B1ED"
}
}, {
"name": "10.200.51.54",
"value": [3, 40],
"createtime": "2019/10/08 14:02:51",
"itemStyle": {
"color": "#21B1ED"
}
}, {
"name": "10.200.51.55",
"value": [4, 60],
"createtime": "2019/10/08 14:04:51",
"itemStyle": {
"color": "#21B1ED"
}
}, {
"name": "10.200.51.56",
"value": [5, 80],
"createtime": "2019/10/08 14:08:51",
"itemStyle": {
"color": "#21B1ED"
}
}],
"links": [{
"source": "10.200.51.51",
"target": "10.200.51.52",
"lineStyle": {
"normal": {
"color": "#D1E1E7",
"opacity": 0.9,
"width": 1,
"type": "dashed",
"curveness": 0
}
}
}, {
"source": "10.200.51.51",
"target": "10.200.51.53",
"lineStyle": {
"normal": {
"color": "#D1E1E7",
"opacity": 0.9,
"width": 1,
"type": "dashed",
"curveness": 0
}
}
}, {
"source": "10.200.51.52",
"target": "10.200.51.53",
"lineStyle": {
"normal": {
"color": "#D1E1E7",
"opacity": 0.9,
"width": 1,
"type": "dashed",
"curveness": 0
}
}
}, {
"source": "10.200.51.52",
"target": "10.200.51.54",
"lineStyle": {
"normal": {
"color": "#D1E1E7",
"opacity": 0.9,
"width": 1,
"type": "dashed",
"curveness": 0
}
}
}, {
"source": "10.200.51.54",
"target": "10.200.51.55",
"lineStyle": {
"normal": {
"color": "#D1E1E7",
"opacity": 0.9,
"width": 1,
"type": "dashed",
"curveness": 0
}
}
}]
}],
"tooltip": {
"trigger": "item",
"backgroundColor": "#fff"
}
}

Echarts 明明和官方文档配置一致,图表加载却是报错:Error in mounted hook: "TypeError: Cannot read property 'get' of undefined",重新npm run dev,问题解决。

原文地址:https://www.cnblogs.com/huyuting/p/11728240.html

时间: 2024-10-06 01:07:13

Echarts 明明和官方文档配置一致,图表加载却是报错:Error in mounted hook: "TypeError: Cannot read property 'get' of undefined",重新npm run dev,问题解决。的相关文章

Spring集成JPA配置懒加载两个报错解决办法

一:报错no session 因为entitymanager对象在事物提交后就关闭了 报错的 no session相当于sql的session 解决办法:解决办法 在web.xmL配置一个过滤器 使其在这个session中的manager在结束后再关闭open <!--配置openmanager--> <filter> <filter-name>openEntity</filter-name> <filter-class>org.springfr

Spring 4 官方文档学习(十一)Web MVC 框架之配置Spring MVC

在前面的文档中讲解了Spring MVC的特殊beans,以及DispatcherServlet使用的默认实现.在本部分,你会学习两种额外的方式来配置Spring MVC.分别是:MVC Java config 和  MVC XML namespace. 原文: Section 22.2.1, "Special Bean Types In the WebApplicationContext" and Section 22.2.2, "Default DispatcherSer

Spark官方文档: Spark Configuration(Spark配置)

Spark官方文档: Spark Configuration(Spark配置) Spark主要提供三种位置配置系统: 环境变量:用来启动Spark workers,可以设置在你的驱动程序或者conf/spark-env.sh 脚本中: java系统性能:可以控制内部的配置参数,两种设置方法: 编程的方式(程序中在创建SparkContext之前,使用System.setProperty("xx","xxx")语句设置相应系统属性值): 在conf/spark-env

(三)Kafka0.8.2官方文档中文版系列-topic配置参数

前文链接: (一)Kafka0.8.2官方文档中文版系列-入门指南 (二)Kafka0.8.2官方文档中文版系列-API Topic-level configuration(主题级别的参数配置) 与主题相关的配置具有全局默认值(参考broker部分)和每个主题可选重写(broker部分有明确提示).如果主题没有重写这些配置,使用全局默认设置.可以使用--config添加一个或者多个自定义选项.下面这个例子创建了一个名为my-topic的主题,它自定义了最大消息大小和刷新速率: > bin/kaf

Spring 4 官方文档学习(十一)Web MVC 框架之约定优于配置

当返回一个ModelAndView时,可以使用其addObject(Object obj)方法,此时的约定是: An x.y.User instance added will have the name user generated. An x.y.Registration instance added will have the name registration generated. An x.y.Foo instance added will have the name foo gener

【网络】app(retorfit2+RxJava)+javaweb(服务器) retrofit2官方文档实践

官方文档:http://square.github.io/retrofit/ 下列操作,是在Retrofit环境配置好的情况下进行的. tjstudy:写在前面,开发环境 app环境: android studio 2.1.1 minSdkVersion 14 targetSdkVersion 23 javaweb server 环境: MyEclipse 10 jdk 1.6 一 .最基本的标记 @GET @POST 标记:网络访问方式的最基本标记 指定访问方式,一般会写入访问地址,如果是获取

Android Studio官方文档之构建和运行你的APP

Android Studio官方文档之构建和运行你的APP 本文由MTJH翻译,jkYishon审校. 前言 默认情况下,Android Studio设置新的项目并且部署到模拟器或者真机设备上,只需要点击几下.使用即时运行,你并不需要构建一个新的APK即可将改变后的方法和现有的应用资源应用到一个正在运行的应用程序中,所以代码的改变是即时可见的. 点击Run来构建并运行你的APP.Android Studio通过Gradle构建你的App,选择一个部署的设备(模拟器或连接的设备),然后把你的APP

Spring Cloud官方文档中文版-声明式Rest客户端:Feign

官方文档地址为:http://cloud.spring.io/spring-cloud-static/Dalston.SR2/#spring-cloud-feign 文中例子我做了一些测试在:http://git.oschina.net/dreamingodd/spring-cloud-preparation Declarative REST Client: Feign 声明式Rest客户端:Feign Feign is a declarative web service client. It

【苦读官方文档】2.Android应用程序基本原理概述

官方文档原文地址 应用程序原理 Android应用程序是通过Java编程语言来写.Android软件开发工具把你的代码和其它数据.资源文件一起编译.打包成一个APK文件,这个文档以.apk为后缀,保存了一个Android应用程序全部的内容.Android设备通过它来安装相应的应用. 一旦安装到设备上.每一个Android应用程序就执行在各自独立的安全沙盒中: Android系统是一个多用户的Linux系统.每一个应用都是一个用户. Android系统默认会给每一个应用分配一个唯一的用户ID(这个