一：错误描述：echarts.js:1136 Uncaught Error: Initialize failed: invalid dom.

二：错误原因：echarts在用json数据请求时未调用

 <!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

     ]

 }

三：解决办法：

（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>

echarts.js:1136 Uncaught Error: Initialize failed: invalid dom.的更多相关文章

  1. (原)Echarts 报Uncaught Error: Initialize failed: invalid dom 根本解决

    1.循环出的Echarts出现 Uncaught Error: Initialize failed: invalid dom ,附上完美解决方案 setTimeout(function () { co ...

  2. bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires jQuery at bootstrap.min.js:6

    自己写了个Django系统,用到了Django-bootstrap3结果在浏览器控制台发现报错:bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaS ...

  3. myeclipse中导入js报如下错误Syntax error on token "Invalid Regular Expression Options", no accurate correc

    今天在使用bootstrap的时候引入的js文件出现错误Syntax error on token "Invalid Regular Expression Options", no ...

  4. android模拟器 一个错误：X Error of failed request: BadRequest (invalid request code or no such operation)

    最近ubuntu12.04学习python,python2.7 python3.2所不同的是还是蛮大的.学习思考的新 升级后 结果显示 输入方法不显示   update-manager 和  add- ...

  5. Echarts 报错：Uncaught Error: [MODULE_MISS]"echarts/config" is not exists!

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code   问题: 报错:Uncaught Error: [MODULE_MISS]" ...

  6. rdesktop ERROR: CredSSP: Initialize failed, do you have correct kerberos tgt initialized ? Failed to connect, CredSSP required by server

    错误信息: ERROR: CredSSP: Initialize failed, do you have correct kerberos tgt initialized ? Failed to co ...

  7. Android JS 交互出现 Uncaught Error: Error calling method on NPObject

    由于HTML5的功能越来越强大,native app的一些功能逐步被html页面代替,不可避免的JS交互也用到的也越来越多.在第一个版本向第二个版本迭代的过程中却发生了莫名其妙的问题,第一个版本JS调 ...

  8. axios请求报Uncaught (in promise) Error: Request failed with status code 404

    使用axios处理请求时,出现的问题解决 当url是远程接口链接时,会报404的错误: Uncaught (in promise) Error: Request failed with status ...

  9. Uncaught Error: Script error for "popper.js", needed by: bootstrap - require.js

    Uncaught Error: Script error for "popper.js", needed by: bootstrap https://requirejs.org/d ...

随机推荐

  1. hadoop13---centos安装jdk

    由于各Linux开发厂商的不同,因此不同开发厂商的Linux版本操作细节也不一样,今天就来说一下CentOS下JDK的安装: 方法一:手动解压JDK的压缩包,然后设置环境变量 1.在/usr/目录下创 ...

  2. linux 文本分析工具---awk命令(7/1)

    awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再进行各 ...

  3. 【Head First Servlets and JSP】笔记23：Expression Language(EL) 完全攻略

    基本上是<Head First Servlets and JSP>内容的整理.扩充.顺便推荐一个供参考的JSP教程:JSP Tutorial内容很全面,还有一些有趣的实例. 完整代码参考 ...

  4. Python面试题之Super函数

    这是个高大上的函数,在python装13手册里面介绍过多使用可显得自己是高手 23333. 但其实他还是很重要的. 简单说, super函数是调用下一个父类(超类)并返回该父类实例的方法. 这里的下一 ...

  5. ubuntu 刚更改默认python3版本后更新包等

    一般来说ubuntu 刚更改为python3为默认版本后要进行一下更新包等等的内容(当然不更新一下也是可以的,最好更新一下,第一次更新较慢) 使用下面两行代码: sudo apt-get update ...

  6. 用JAR的方式运行SpringBoot项目

    接 Spring Boot 快速入门(Eclipse) 步骤一:部署方式 Springboot 和 web 应用程序不一样,其本质上是一个 Java 应用程序,那么又如何部署呢? 通常来说,Sprin ...

  7. java中HashMap集合的常用方法

    public Object clone() 返回hashMap集合的副本 其余的方法都是实现Map集合的 https://www.cnblogs.com/xiaostudy/p/9510763.htm ...

  8. 我的nodejs 快速入门

    每行以封号结尾(可有可无) 变量定义没有类型 都用var 或者直接const log打印:console.log(db); 内置属性这样写法:__filename.__dirname等 functio ...

  9. 快速将对象转化为JSON格式

    1.导入阿里巴巴fastjson包. <!-- fastJson将对象转化为Json对象 --> <dependency> <groupId>com.alibaba ...

  10. http 和 soap 关系 - 转载

    http soap关系 HTTP http:是一个客户端和服务器端请求和应答的标准(TCP).http协议其目的是为了提供一种发布和接收htttp页面的方法 一http协议的客户端与服务器的交互:由H ...