一：错误描述：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. nginx ip无法访问

    CentOS 7.0默认使用的是firewall作为防火墙,这里改为iptables防火墙步骤. 1.关闭firewall: systemctl stop firewalld.service #停止f ...

  2. FutureTask、Fork/Join、 BlockingQueue

    我们之前学习创建线程有Thread和Runnable两种方式,但是两种方式都无法获得执行的结果. 而Callable和Future在任务完成后得到结果.   Future是一个接口,表示一个任务的周期 ...

  3. [转]浅谈Hive vs. HBase 区别在哪里

    浅谈Hive vs. HBase 区别在哪里 导读:Apache Hive是一个构建于Hadoop(分布式系统基础架构)顶层的数据仓库,Apache HBase是运行于HDFS顶层的NoSQL(=No ...

  4. EasyUI：年份、月份下拉框Demo

    EasyUI:年份.月份下拉框Demo jsp中定义: <td width="10%" height="25px" style="text-al ...

  5. 非法字符: '\ufeff' 解决方案|错误: 需要class, interface或enum

    解决方案,把文件用Editplus打开,UTF-8+BOM编码的文件转为普通的UTF-8文件

  6. oracle时间的获取，前一天，上一个星期，上一个月

    –前一天的开始时刻 SELECT to_date(to_char(TRUNC(SYSDATE-1),’yyyy-mm-dd’) || ‘00:00:00’,’yyyy-mm-dd hh24:mi:ss ...

  7. 最简单的CI框架入门示例--数据库取数据

    前提: 安装好MySQL,Apache,PHP. 1.下载CI框架 下载地址  http://www.codeigniter.com/ 2.配置 database.php配置:    为数据库服务器设 ...

  8. HTTP Status 500 - Unable to instantiate Action, customerAction, defined for 'customer_toAddPage' i

    使用struts2时碰到这样的错误 HTTP Status 500 - Unable to instantiate Action, customerAction, defined for 'custo ...

  9. WPF Invoke和BeginInvoke

    在WPF中Invoke和BeginInvoke和Winform中的是差不多的,只是一个用Control的一个用Dispatcher的. 而Invoke和BeginInvoke的区别嘛 就是一个是同步的 ...

  10. WPF DataGrid 分组

    public ListCollectionView collection; collection = new ListCollectionView(obj.empData); collection.G ...