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…

【Python】Python简介和Python解释器

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

【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 是一种面向对象的解释型计算机程序设计语言。是纯粹的自由…

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;

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

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

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

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

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

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

python各种库安装

1、安装django pip install django 安装成功测试&#xff1a;进入cmd--》输入python--》输入import django-->输入 django.get_version(),若正常显示则说明安装成功 2、更新pip python -m pip install --upgrade pip 3、安装pymysql pip install pymysql 出现错误&…

【工具】SecureCRT安装和注册

SecureCRT是一款支持SSH&#xff08;SSH1和SSH2&#xff09;的终端仿真程序&#xff0c;简单地说是Windows下登录UNIX或Linux服务器主机的软件。 SecureCRT支持SSH&#xff0c;同时支持Telnet和rlogin协议。SecureCRT是一款用于连接运行包括Windows、UNIX和VMS的理想工具。通过…

Windows下如何查看某个端口被谁占用并强制关闭

一、查看那个端口被调用 我告诉大家一个方法&#xff0c;^_^。 1、 开始—->运行—->cmd&#xff0c;或者是windowR组合键&#xff0c;调出命令窗口&#xff1b; 2、输入命令&#xff1a;netstat -ano&#xff0c;列出所有端口的情况。在列表中我们观察被占用的端口&a…

【性能测试】性能测试的基础理论

转发自博客园贺满&#xff1a;https://www.cnblogs.com/puresoul/p/5456855.html &#xff0c;有删减。 随着软件行业的快速发展&#xff0c;现代的软件系统越来越复杂&#xff0c;功能越来越多&#xff0c;测试人员除了需要保证基本的功能测试质量&#xff0c;性能也随越来越受…

MySQL 处理插入重主键唯一键重复值办法

本篇文章主要介绍在插入数据到表中遇到键重复避免插入重复值的处理方法&#xff0c;主要涉及到IGNORE,ON DUPLICATE KEY UPDATE,REPLACE&#xff1b;接下来就分别看看这三种方式的处理办法。 IGNORE 当使用INSERT语句向表中添加一些行数据并且在处理期间发生错误时&#xff0c;…

【性能测试】性能测试的基本流程

转发自博客园贺满&#xff1a;https://www.cnblogs.com/puresoul/p/5463477.html&#xff0c;有删减。 本文主要介绍下性能测试的基本流程&#xff0c;性能测试从实际执行层面来看&#xff0c;测试的过程一般分为这么几个阶段&#xff0c;如下图&#xff1a; 下面分别介绍下每个…

【性能测试】性能测试工具选择

转发自博客园贺满&#xff1a;https://www.cnblogs.com/puresoul/p/5503134.html&#xff0c;有删减。 本篇文章主要简单总结下性能测试工具的原理以及如何选型。性能测试和功能测试不同&#xff0c;性能测试的执行是基本功能的重复和并发&#xff0c;需要模拟多用户&#xff0…

【测试工具】禅道项目管理工具设置触发邮箱

禅道支持邮件提醒&#xff0c;当需求、任务、bug等发生变化的时候&#xff0c;可以发邮件提醒。 禅道提醒邮件默认通知范围&#xff08;禅道9.8版本&#xff0c;可以在 后台-消息-设置中设置哪些动作需要发信&#xff09;&#xff1a; 1、Bug&#xff1a;指派给抄送 添加&#…