echarts.js:1136 Uncaught Error: Initialize failed: invalid dom.

1、错误描述

 

echarts.js:1136 Uncaught Error: Initialize failed: invalid dom.


 

2、错误原因


<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><link rel="shortcut icon" href="../js/echarts-2.2.7/doc/asset/ico/favicon.png"><script type="text/javascript" src="../js/echarts-2.2.7/doc/asset/js/jquery.min.js" ></script><script type="text/javascript" src="../js/echarts.js" ></script><script>var myChart2 = echarts.init(document.getElementById('main2'));myChart2.setOption({title: {text: '异步数据加载示例'},tooltip: {},legend: {data:['销量']},xAxis: {data: []},yAxis: {},series: [{name: '销量',type: 'bar',data: []}]});$.get('../js/data.json').done(function (data) {console.dir(data);// 填入数据myChart2.setOption({xAxis: {data: data.categories},series: [{// 根据名字对应到相应的系列name: '销量',data: data.data}]});});</script></head><body><div id="chart" style="width: 1200px; height: 560px;"></div></body></html>

{"categories": ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],"data": [5,20,36,10,10,20]}

echarts在用json数据请求时未调用

 

3、解决办法

(1)将上述代码放在一个函数中,然后在onload中调用这个函数

(2)用jQuery方法


<script>$(document).ready(function(){var chart = document.getElementById('chart');var chartData = echarts.init(chart);chartData.setOption({title: {text: '异步数据加载示例'},tooltip: {},legend: {data:['销量']},xAxis: {data: []},yAxis: {},series: [{name: '销量',type: 'bar',data: []}]});$.get('../js/data.json').done(function (data) {console.dir(data);// 填入数据chartData.setOption({xAxis: {data: data.categories},series: [{name: '销量',data: data.data}]});});function eConsole(param) {console.dir(param);}chartData.on("click",eConsole);});</script>

转载自https://blog.csdn.net/you23hai45/article/details/51585480

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Fiddler在PC/台式对Android进行抓包

Fiddler是一个常用的http抓包工具&#xff0c;它能够记录电脑和移动端的进出数据&#xff0c;而且操作十分简便&#xff0c;下面主要介绍在台式机上Fiddler如何对Android进行数据抓包&#xff0c;本人使用的Fiddler版本为v5.0&#xff0c;文章主要知识点如下&#xff1a; 1.手机…

Echars折线配置详解

Echars折线配置详解 比如做成如下效果图&#xff1a; 所有的配置如下&#xff1a; var option {tooltip: { // 提示框trigger: axis, // 触发类型(坐标轴触发)alwaysShowContent: false, // 是否永远显示提示框的内容backgroundColor: rgba(32, 174, 252, 0.7), // 提示框…

【Python爬虫】爬取微信公众号文章信息准备工作

有一天发现我关注了好多微信公众号&#xff0c;那时就想有没有什么办法能够将微信公众号的文章弄下来&#xff0c;而且还想将一些文章的精彩评论一起搞下来。参考了一些文章&#xff0c;通过几天的研究基本上实现了自己的要求&#xff0c;现在记录一下自己的一些心得。 整个研…

js:堆栈和队列

JavaScript数组的栈和队列的操作方法。 堆栈和队列 要了解JavaScript数组的堆栈和队列方法的操作&#xff0c;需要先对堆栈和队列基础知识有所了解。在继续后面的内容之前&#xff0c;我们先简单的了解一下堆栈和队列的概念。 栈和队列都是动态的集合&#xff0c;在栈中&…

【Python爬虫】微信公众号历史文章和文章评论API分析

上一篇文章爬取微信公众号文章信息准备工作介绍了微信公众号历史文章和文章评论API的组成情况&#xff0c;历史文章API格式&#xff1a;https://mp.weixin.qq.com/mp/profile_ext?actiongetmsg&__bizMjM5NjAxOTU4MA&fjson&offset10&count10&is_ok1&sc…

MySql的Delete、Truncate、Drop分析

MySql的Delete、Truncate、Drop分析 相同点&#xff1a; truncate 和不带 where 子句的 delete&#xff0c;以及 drop 都会删除表内的数据 不同点:  1. truncate 和 delete 只删除数据不删除表的结构(定义)   drop 语句将删除表的结构被依赖的约束(constrain)、触发器(…

【Python】Python简介和Python解释器

计算机语言的种类非常的多&#xff0c;总的来说可以分成机器语言&#xff0c;汇编语言&#xff0c;高级语言三大类。 机器语言(二进制)→汇编语言→&#xff08;前面两种语言是与硬件进行交互&#xff09; →高级语言&#xff08;面向过程语言(C语言)→面向对象语言&#xff09…

python 判断当前时间是否为零点

import time time_now int(time.time()) #unix时间time_local time.localtime(time_now) #转换为win_timedt time.strftime("%H:%M:%S", time_local)# 转换成新的时间格式(18:59:20)adt.split(:)b[]for a in dt.split(:):b.append(a)c.join(b)if c000000:print(是…

多任务场景下单线程异步多线程多进程

多任务的场景&#xff1a;1.爬取不同url的内容&#xff0c;爬取同一个url分页内容。比如&#xff1a;豆瓣图书 Top 250 https://book.douban.com/top250?start0 实现豆瓣图书Top250的抓取工作&#xff0c;并存入excel中&#xff0c;如果采用的串行爬取方式&#xff0c;每次爬完…

django 按天水平分表并插入数据

db pymysql.connect("localhost", "数据库管理员名", "数据库密码", "数据库名")cursor db.cursor()unix_time str(int(time.time()))win_time datetime.datetime.now().strftime(%Y%m%d)table_name engineeringdata win_timesq…

【Python】单线程异步多线程多进程实例

上一篇文章主要介绍了多任务场景下单线程异步、多线程、多进程如何选择&#xff0c;链接&#xff1a;多任务场景下单线程异步多线程多进程 这里主要通过三个实例去验证一下简单的多任务场景下&#xff0c;三种方式的耗时情况&#xff0c;假设有10个互不关联的10个任务 多进程版…

python及pycharm2018软件安装教程

python及pycharm2018软件安装教程 python 3.6.5及pycharm2018.1.1 Win版32/64位下载地址&#xff1a; https://pan.baidu.com/s/1KdECgnrARK4HubPeFSKCTw 密码&#xff1a;bwc5 Python及PyCharm简介&#xff1a; Python 是一种面向对象的解释型计算机程序设计语言。是纯粹的自由…

【Python爬虫】requests与urllib库的区别

我们在使用python爬虫时&#xff0c;需要模拟发起网络请求&#xff0c;主要用到的库有requests库和python内置的urllib库&#xff0c;一般建议使用requests&#xff0c;它是对urllib的再次封装&#xff0c;它们使用的主要区别&#xff1a; requests可以直接构建常用的get和post…

2059 - authentication plugin 'caching_sha2_password' -navicat连接异常问题解决

使用navicat 连接 mysql 8.0.11 报 "2059 - authentication plugin caching_sha2_password ..." 解决办法&#xff1a; 进入mysql命令行然后输入 ALTER USER root% IDENTIFIED WITH mysql_native_password BY root1;

【教育】世界上最伟大的25个教育法则

鱼缸法则 心灵的成长需要自由 一家公司里&#xff0c;职员把几条小鱼放在一个鱼缸里&#xff0c;好几年了&#xff0c;鱼竟然还是那么小&#xff0c;于是大家都认为这鱼就是小个头。一天鱼缸被打破了&#xff0c;就把它们养在院子塘里&#xff0c;没想这些鱼疯了似地长得很大…

mysql安装版安装

1、到mysql官网。选择windows&#xff0c;选择.msi文件。下载 2、双击安装。安装时选择server即可ok。 3、在输入密码时&#xff0c;切记勿用小键盘上的数字&#xff08;可能会造成后期连接数据库密码错误&#xff09; 4、安装完成后&#xff0c;打开sql命令行。输入密码校正…

【测试工具】在linux测试环境安装bug管理工具禅道

在我们测试中&#xff0c;为了方便管理测试流程&#xff0c;提交测试发现的bug&#xff0c;我们需要使用到bug管理工具。有些大公司可能会自己开发一些bug管理工具&#xff0c;但是我们也会用一些开源的bug管理工具&#xff0c;比如Bugzilla&#xff0c;Redmine&#xff0c;Tra…

PyCharm点击设置没反应,无法进行设置

首先检查下是不是装了中文汉化包resources_cn.jar 如果有的话&#xff0c;解决办法&#xff1a;1.更换一个汉化包或者将原来的resources_en.jar也放进lib目录下 2.将汉化包都删除&#xff0c;只留下原版的resources_en.jar 转载自https://blog.csdn.net/xiangshangbashaon…

【测试工具】在linux测试环境访问禅道数据库

上一篇文章我们介绍了如何在linux测试环境安装bug管理工具禅道&#xff0c;现在我们来介绍一下如何访问禅道的数据库&#xff0c;访问数据库有什么用呢&#xff1f;首先&#xff0c;我们可以更改我们安装后的管理系统的名称&#xff08;改为自己公司名称&#xff09;&#xff0…

在命令提示符(cmd)下怎样复制粘贴(详细版)

我们的命令提示符面板&#xff0c;不能选中复制。应该怎么办呢&#xff1f; 按照下面的方法即可解决 输入“cmd”&#xff0c;确认。 此时打开了cmd窗口&#xff0c;在图中位置右键选择“属性”。 4 在弹出的窗口中&#xff0c;勾选“快速编辑模式”。 5 复制方框1中的文字…