一：错误描述：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. 32位JDK和64位JDK

    32位和64位系统在计算机领域中常常提及,但是仍然很多人不知道32位和64位的区别,所以本人在网上整理了一些资料,并希望可以与大家一起分享.对于32位和64位之分,本文将分别从处理器,操作系统,JVM ...

  2. ES6数组的扩展--Array.from()和Array.of()

    一. Array.from() : 将伪数组对象或可遍历对象转换为真数组 1.何为伪数组 如果一个对象的所有键名都是正整数或零,并且有length属性,那么这个对象就很像数组,语法上称为"类 ...

  3. const修饰的常量 不能被直接修改 但是可以通过指针进行间接修改

    大家都知道如下代码中,被const限定的a是不可以被直接修改的 void main() { const int a = 3; a=1; } 在C++中const修饰的常量,不能被直接修改,但是可以通过 ...

  4. 去掉xml中的空格和换行符

    有时在拼接xml或是导入xml格式文件时,会无缘无故出现很多空格符合换行符,导致在转换json时会报各种错误,特此在网上找到了一中比较实用的方法: strxml = Regex.Replace(str ...

  5. MySQL数据库中tinyint类型字段读取数据为true和false (MySQL的boolean和tinyint(1))

    数据库一个表中有一个tinyint类型的字段,值为0或者1,如果取出来的话,0会变成false,1会变成true. MySQL保存boolean值时用1代表TRUE,0代表FALSE.boolean在 ...

  6. OCR训练数据生成方法

    有的时候我们训练网络的时候,数据集在收集的过程中由于种种原因导致图像收集的不完整,比如某些种类很少,或者没有,这个时候我们就可以考虑自己生成数据集. 这个和data augmentation还不太一样 ...

  7. struts2——第一个案例

    步骤如下 编程工具等百度云分享 1.创建一个web项目 2.引入struts2的基本jar包 struts2的基本jar包百度云 链接:https://pan.baidu.com/s/1LBnPJhF ...

  8. forever让nodejs后台运行

    nodejs一般是当成一条用户命令执行的,当用户断开客户连接,运用也就停了,很烦人.如何让nodejs应用当成服务,在后台执行呢? 最简单的办法: $ nohup node app.js 但是,for ...

  9. authentication token manipulation error

    用户服务器中修改密码,输入passwd命令后,报错authentication token manipulation error   发生该错误原因是: 1.分区没有空间导致. 2./etc/pass ...

  10. Hibernate与JDBC、EJB、JDO的比较

    常用的数据库操作包括:JDBC.EJB.JDO以及Hibernate.它的各有优缺点: (1) JDBC:多数Java开发人员是用JDBC来和数据库进行通信,它可以通过DAO模式进行改善和提高.但这种 ...